Оценка: 3 от 2 гласа

Google Amp html таговеGoogle работи постоянно над разработването на нови технологии, които да ускорят зареждането на уеб сайтове на устройствата на потребителите. По-рано, специалисти разработват SPDY протокол, който е в основата http/2.

През октомври 2015 г. компанията обяви новия формат за страници на мобилни устройства Google Accelerated Mobile Pages (Google AMP) , който има за цел да ускори скоростта на зареждане на страниците на мобилни устройства.

Според данни на  Google, изтеглянето на страниците на сайта използвайки Google  AMP се ускорява с 15-85%.

Google AMP е сбор от 3 технологии:

  • AMP HTML - всъщност това е редовен HMTL, в който броят на използваните тагове е  заменен със специални видове, поддържани от този формат.
  • AMP JS - тази библиотека ускорява и управлява натоварването на ресурсите,  позволява да използвате специалните тагове, споменати по-горе.
  • Google AMP Cache - това е на базата на прокси CDN, която разпределя всички валидни AMP-страници.

Има някои интересни ограничения в формата:

  • позволяват се само асинхронни скриптове
  • Невъзможно е да се описват стилове с помощта на «style»   на мястото на приложение, те трябва да бъдат описани в HTML файл в таг  «style amp-custom»
  • стиловете са ограничени до 50 KB
  • Параметри «ширина» и «височина» на външни ресурси, като например изображения, трябва да бъдат посочени в HTML
  • Не може да пишете произволен Javascript-код може да се използва само  от поддържаните AMP JS от библиотеката
  • Шрифтовете трябва да бъдат изтеглени чрез линк или в CSS-дизайн @font-face

Как да започнете въвеждането на AMP на своя уебсайт

Сега вие винаги трябва да поддържат две версии на страницата: оригиналната версия на формата, както сте свикнали да го виждате на сайта, и AMP-версия.

Тъй като, АМР не разрешава много от елементите, най-вероятно ще трябва да минете без такива неща, като коментари на страниците, както и разнообразие от динамични елементи, и без  друга функционалност, на която сте свикнали в нормалния си сайт.

Трябва да се поработи над визуалните елементи. Тъй като в AMP височината  и ширината на изображенията трябва да бъдат показани в HTML, създаването на AMP версии на съществуващи страници може да бъде  тежък процес, ако тези параметри не са посочени в HTML.

Трябва също да се има в предвид, че «amp-img»   ви позволява да показвате различния изображения на устройства с различни резолюции на екрана. Например, един възможен вариант:

< amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
< /amp-img>

< amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive" >
< /amp-img>

Ако използвате анимирани gif-файлове, трябва да използвате специален компонент  «amp-anim».

За видео,се използва специален маркер «amp-video», но за да добавите видео от YouTube (както се прави в сайтовете по-често), там съществува отделен компонент «amp-youtube».

Поддържат се също елементи, като "въртележки" с изображения и светещи кутии, въвеждането на елементи отTwitter, Facebook, Instagram, Pinterest и Vine чрез външни компоненти.

Също така трябва да се направят промени в оригиналната страница в "нормална» HTML. За да може  Google и други системи, които ще поддърж ат AРM, да могат да преминат към AMP версията, в оригиналната статия  трябва да се регистрира специален «link rel» таг с позоваване на AMP страница. И в обратна посока, всички АМР-страници трябва да имат каноничен таг препратка към първоначалната версия на страницата в нормален HTML.

Някои платформи, които поддържат АМР , изискват на страницата да е конфигурирано правилно Schema.org маркиране, също така е необходимо да се гарантира, че съдържанието си могат да бъдат показани в "въртележката" на новини за търсене на Google.

Направете статистика на AMP- страниците

Да, можете да следите статистиката на вашата АМР- страница, стандартът се прилага с философията "Мери веднъж и кажи на всички", за да се избегне ситуация, в която проследяването на множество кодове и анализаторите забавят зареждането на страницата.

Има два метода, които ви позволяват да следите статистиката за посетители на AMP страници:

  • Eлемента «amp-pixel» : това е просто маркер, който може да се използва, за да следите мненията на страницата, използвайки заявка за GET. Много променливи могат да бъдат прекарани през него, включително такива като «document_referrer» и «title».
  • Разширения компонент «amp-analytics»: по-напреднал метод, който дава възможност за прилагане на Google Analytics (или подобна система) на AMP страницата.

Google AMP за SEO

Google въведе свой  алгоритъм за класиране на страници миналата година, с оглед на тяхното показване на мобилни устройства. Това беше ясен сигнал, че нашите сродни сайтове за потребители с мобилни устройства, е съществен фактор за класиране.

Ето защо, АМР- страници, които са създадени специално за мобилни устройства, трябва да получат значително предимство в класацията. Вече, Google насочва вниманието на мобилните потребители за наличието на бързи страници AMP при поискване от мобилни устройства и ги маркира с икона на зелена мълния.

Google AMP

Никой не иска да получи понижение на ранга заради дублиране на съдържанието и Google изисква, заглавието на страницата на обикновен HTML да е направено указание на аналог на тази страница във формат AMР.

<link rel= "amphtml" HREF = "(URL тук AMP страница">

А заглавието AMP версия на страницата трябва да има препратка към оригиналната страница в нормален HTML:

<link rel= "canonical" HREF = "(тук нормалната URL адреса на страницата)">

В същото време има ситуации, когато на сайта има само AMP страница, т. е.  няма аналог на страницата в обичайния HTML - в този случай в тага «каноничен» трябва да се уточни самата AMP страница.

Как  се прилага Google AMP на сайтове, които използват CMS

Изпълнението зависи от CMS. който се използва, но обикновено той използва някакъв плъгин, който осигурява подобна функционалност.

Ето как експертите на сайта SEO-Hacker препоръчват да се прилага AMP на WordPress-сайт:

  1. Инсталирайте и активирате плъгин AMP WordPress  plugin (https://wordpress.org/plugins/amp/)

2. Редактирате файла htaccess , за да пренасочва потребителите към мобилните устройства в страницата AMP. За да направите това, поставете следното в .htaccess:

RewriteEngine On

  •  %{REQUEST_URI} !/amp$ [NC]

RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot-mobile|iemobile|iphone|ipod|#opera mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([/]*)$ https://example.com/$1/amp [L,R=302]

 

За Drupal Google AMP става по подобен начин - той използва AMP-модул (https://www.drupal.org/project/amp), AMP-тема (https://www.drupal.org/project/amptheme) и AMP библиотека на PHP (https://github.com/Lullabot/amp-library)

При инсталирането на модула AMP, AMP формат е на разположение за всички видове страници и "дава" AMP страница, ако добавите към URL страницата «?amp»  в края.

AMP- тема е предназначена да осигури специфични маркировки, изисквани от стандарта, той автоматично става активен, ако искането отива към страница с «?аmp» в края. Както и всяка друга Drupal тема, тази тема може да бъде разширена с помощта на подтеми, което позволява на собствениците на сайта, да персонализират издаването на AMP-страници, както им е удобно.

AMP-библиотека се използва за случаите, когато потребителите въвеждат HTML в полетата, които му позволяват да се направи, и дава предупреждение за онези случаи, когато даден текст не отговаря на стандарта AMP. Библиотеката също автоматично поправя HTML-текста, когато е възможно, включително променя тагове img и iframе на техние АМР - еквиваленти.

В Joomla могат да се издават AMP - страници с плъгин wbAMP (https://weeblr.com/joomla-accelerated-mobile-pages/wbamp).

Тези решения са само само началото. тъй като AMР формата е сравнително нов. В бъдеще ние ще видим появата на много подобни решения и плъгини за различни CMS.

Кои браузъри се поддържат от Google MAP

По данни на AMP Project, се подържат от 2 последни версии на Chrome, Firefox, Edge, Safari и Opera. Също така се поддържа, но не е съвсем коректно системата AMP-страница от Android 4.0 браузър и Chrome версия 28 и по-стари на мобилно устройство.

В заключение, нека да обобщим какви са предимствата и недостатъците на Google AMP стандарта?

Преимущества на Google AMP

  • AMP - отворен стандарт.
  • Увеличаване скоростта на зареждане на страници може да даде предимство на SEO, защото скоростта на изтегляне е един от най класираните фактори.
  • Тъй като този стандарт е разработен от Google, може да се очаква, че самото присъствие на AMP-страници за  мобилните потребители на сайта могат в бъдеще да станат фактор за класиране, най-малко за Google.
  • големи възможности за персонализация, и включително възможността да не се използва AMP Cache от Google и да се даде съдържание на неговата или нейната CDN сървър.
  • Наличие на плъгини за най- популярните CMS, които ще помогнат за изпълнението на AMP в уебсайта.

Минуси на AMP:

  • AMP може да се окаже труден за въвеждане, ако не сте уеб разработчик, или поне не разбирате HTML.
  • AMP добавя сложност. Ние трябва да се справяме с въвеждането на още една технология, вместо да оптимизираме вече имащата.
  • Възможностите за персонализиране с въвеждането в CMS са ограничени достатъчно, може би това ще се промени с течение на времето.
  • Поддръжката на  Javascript е възможно само чрез  «amp-iframe», но той не позволява достъп до данните от скрипта.
  • IE11 не поддържа  за сега AMP стандартът, което означава, че потребителите на Windows Phone, няма давидят AMP-страницата,а  ще виждат вместо тях, стандартната HTML-версия на тези страници.

 

Свързани

Google AMP

В продължение на това mobile-friendly през октомври 2015 Google обяви нов проект, който цели да направи живота на "мобилните"  потребители още по лесен.Това е технологията, AMP, Accelerated Mobile Pages - Ускорени мобилни страници. Ние няма да навлизаме в технически подробности, само ще се опитаме да отговорим на разбираем език на основните въпроси: как изглежда, кой и защо има нужда от него, как да се прилага на сайта ви.