Полное руководство по использованию Google AMP
Компания Google постоянно работает над разработкой новых технологий, позволяющих ускорить загрузку сайтов на устройствах пользователей. Ранее специалистами компании был разработан протокол SPDY, который лег в основу http/2.
В октябре 2015 года компания объявила о новом формате страниц для мобильных устройств Google Accelerated Mobile Pages (Google AMP), который призван ускорить скорость загрузки страниц на мобильных устройствах.
По данным Google, загрузка страниц сайта с использованием Google AMP ускоряется на 15-85%.
Google AMP представляет собой набор 3-х технологий:
- AMP HTML – фактически это обычный HTML, в котором ряд используемых тэгов заменен на специальные разновидности, поддерживаемые этим форматом.
- AMP JS – эта библиотека ускоряет и управляет загрузкой ресурсов, дает возможность пользоваться упомянутыми выше специальными тэгами.
- Google AMP Cache – это основанная на прокси CDN, которая распространяет все валидные AMP-страницы.
У формата есть несколько интересных ограничений:
- Разрешены только асинхронные скрипты
- Нельзя описывать стили с помощью «style» по месту применения, все они должны быть описаны в HTML файле в тэге «style amp-custom»
- Стили ограничены размером в 50 КБ
- Параметры «width» и «height» внешних ресурсов, таких как картинки, должен быть указан внутри html
- Нельзя написать произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS
- Шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face
Как начать внедрение AMP на своем сайте
Теперь вам всегда придется поддерживать две версии страниц: изначальную версию в том виде, как вы привыкли видеть ее на сайте и AMP-версию.
Поскольку АМР не разрешает многие элементы, вам скорее всего придется обойтись пока без таких вещей, как комментарии на странице и различные динамические элементы, и без некоторой другой функциональности, к которой вы привыкли на своем обычном сайте.
Отдельным моментом следует рассмотреть, как внедрить форму для сбора лидов на АМР-странице, об этом будет секция ниже.
Придется поработать над визуальными элементами. Поскольку в АМР высота и ширина картинок должны быть указаны в HTML, создание АМР версий существующих страниц может быть трудоемким процессом, если эти параметры уже не указаны в 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>
Или такой –
< amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w >
< /amp-img>
Если у вас используются анимированные gif-файлы, придется использовать специальный компонент «amp-anim».
Для видео используется специальный тэг «amp-video», а для того, чтобы вставить видео с YouTube (как это чаще всего делается на сайтах), существует отдельный компонент «amp-youtube».
Поддерживаются также такие элементы, как «карусели» с изображениями и лайтбоксы, внедрение элементов из Twitter, Facebook, Instagram, Pinterest и Vine через внешние компоненты.
Также потребуется внести изменения и в исходную страницу в «обычном» HTML. Чтобы у Google и других систем, которые будут поддерживать АРМ, была возможность переключиться на АМР-версию, в исходной статье нужно прописать специальный «link rel» тег с указанием на АМР-страницу. И в обратную сторону, все АМР-страницы должны иметь тег канонической ссылки на исходную версию страницы в обычном HTML.
Некоторые платформы, которые поддерживают АМР, требуют, чтобы на странице была корректно настроена разметка Schema.org, это также требуется для того, чтобы ваш контент мог показываться в «карусели» новостей на поиске Google.
Как внедрить форму сбора лидов
В стандарте АМР много ограничений, поэтому нельзя создать форму сбора лидов «в лоб», но
Iframe поддерживается в amp-html, и iframe может включать в себе произвольный Javascript. Поэтому, чтобы получить форму на своей АМР-странице, вам надо включить компонент «amp-iframe» в секции «head» страницы:
< script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
Затем нужно вставить «amp-iframe» внутри «body» страницы. Нужно, чтобы этот элемент был не менее 600 пикселей или на 75% высоты страницы от верхнего края страницы. URL, используемый в «amp-iframe» использовать https и находиться на том же домене или поддомене, что и страница.
Работает ли статистика на АМР-страницах
Да, вы можете отслеживать статистику по вашим АМР-страницам, причем в стандарте применена философия «измерь один раз и сообщи всем», чтобы избежать ситуации, когда множественные коды отслеживания и аналитики замедляют загрузку страницы.
Существует два способа, которые позволяют отслеживать статистику посещений АМР-страниц:
- Элемент «amp-pixel»: это простой тег, который может быть использован, чтобы отслеживать просмотры страниц с использованием запроса GET. Много переменных можно передать через него, включая такие как «document_referrer» и «title».
- Расширенный компонент «amp-analytics»: более продвинутый способ, который позволяет внедрить Google Analytics (или другие подобные системы) на АМР-страницу. Прочитать подробную инструкцию о том, как внедрить Google Analytics для АМР-страниц можно здесь (https://developers.google.com/analytics/devguides/collection/amp-analytics/)
Google AMP для SEO
Google внедрил в прошлом году свой алгоритм ранжирования страниц с учетом их отображения на мобильных устройствах. Это был четкий сигнал, что дружественность сайтов к пользователям с мобильных устройств является существенным фактором ранжирования.
Поэтому АМР-страницы, которые разработаны специально для мобильных устройств, должны получить серьезное преимущество в ранжировании. Уже сейчас Google обращает внимание мобильных пользователей на доступность быстрых АМР-страниц при запросе с мобильных устройств, отмечая их значком с зеленой молнией.
Никто не хочет получить понижение ранга из-за дублированного контента, и Google требует, чтобы в заголовке страницы на обычном HTML было сделано указание на аналог этой страницы в формате АМР:
< link rel="amphtml" href="(тут URL АМР-страницы">
А в заголовке АМР-версии страницы должно быть указание на исходную страницу в обычном HTML:
< link rel="canonical" href="(тут URL обычной страницы)">
При этом возможны ситуации, когда на сайте есть только АМР-страница, то есть не существует аналога страницы в обычном HTML – в этом случае в теге «canonical» нужно указывать саму АМР-страницу.
Как внедрить Google AMP на сайтах, где используется CMS
Внедрение зависит от используемой CMS, но как правило для этого используется какой-то плагин, который обеспечивает подобную функциональность.
Вот как эксперты сайта SEO-Hacker рекомендуют внедрять АМР на WordPress-сайте:
1. Установить и активировать плагин AMP WordPress plugin (https://wordpress.org/plugins/amp/)
2. Отредактировать файл .htaccess, чтобы перенаправлять посетителей с мобильными устройствами на АМР-страницы. Для этого надо вставить в .htaccess следующее:
RewriteEngine On
RewriteCond %{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), АМР-тема (https://www.drupal.org/project/amptheme) и АМР-библиотека на PHP (https://github.com/Lullabot/amp-library).
При установке АМР-модуля, формат АМР становится доступен для всех типов страниц и «отдает» АМР-страницы, если добавить к URL страницы «?amp» на конце.
АМР-тема разработана, чтобы обеспечивать специфическую разметку, которую требует стандарт, она автоматически становится активной, если обращение идет к странице с «?amp» на конце. Как любая другая тема Drupal, эта тема может быть расширена с помощью подтемы, что позволяет владельцам сайтов кастомизировать выдачу АМР-страниц, как они посчитают нужным.
АМР-библиотека используется для случаев, когда пользователи вводят HTML в поля, позволяющие это делать, и выдает предупреждение для тех случаев, когда введенный текст не соответствует АМР-стандарту. Библиотека также автоматически корректирует HTML-текст там, где это возможно, в том числе меняет тэги img и iframe на их АМР-эквиваленты.
В Joomla возможность выдавать АМР-страницы пользователям обеспечивается с помощью плагина wbAMP (https://weeblr.com/joomla-accelerated-mobile-pages/wbamp).
Указанные решения являются, вероятно, только самыми первыми, доступными прямо сейчас, ведь формат АМР является относительно новым. В будущем мы увидим появление множества аналогичных решений и плагинов для различных CMS.
Какие браузеры поддерживают Google AMP
По
В заключение давайте подведем итог, в чем плюсы и минусы стандарта Google AMP?
Плюсы:
- AMP – это открытый стандарт.
- Увеличение скорости загрузки страниц может дать преимущество в SEO, поскольку скорость загрузки является одним из факторов ранжирования.
- Поскольку этот стандарт разработан Google, можно ожидать, что само наличие AMP-страниц для выдачи мобильным пользователям на сайте может в будущем стать фактором ранжирования, по крайней мере для Google.
- АМР-страницы могут попасть в «карусель» в мобильной выдаче в топе Google.
- Большие возможности для кастомизации, и в том числе возможность не использовать AMP Cache от Google и отдавать контент со своей CDN или своего сервера.
- Наличие плагинов для популярных CMS, которые облегчают внедрение AMP на сайте.
Минусы:
- AMP может оказаться сложен во внедрении, если вы не веб-разработчик или хотя бы не понимаете HTML.
- АМР добавляет сложности. Мы вынуждены заниматься внедрением еще одной технологии, вместо того, чтобы оптимизировать имеющееся.
- Возможности кастомизации при внедрении в CMS достаточно ограничены, возможно это изменится со временем.
- Поддержка кастомного Javascript возможна только через «amp-iframe», но это не дает возможности получить доступ к данным из этого скрипта.
- IE11 не поддерживает пока стандарт AMP, а значит пользователи Windows Phone пока не увидят AMP-страницы, а будут видеть вместо них стандартные HTML-версии этих страниц.
В статье использованы материалы:
https://www.ampproject.org
https://www.keycdn.com/blog/accelerated-mobile-pages/
http://searchwilderness.com/amp-forms-hack/
https://www.lullabot.com/articles/amping-up-drupal
https://joomlaseo.com/blog/google-amp-support-in-joomla
https://seo-hacker.com/accelerated-mobile-pages-amp-important-implement/
Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой
-
Читал, что АМР страницы лучше использовать новостным порталам, а не магазинам. Кто как считает?
![](/upload/resize_cache/main/1c6/60_60_2/1c69f5d9450d031572e1e89e9eb6d1d1.jpg)
![](/upload/resize_cache/main/40b/60_60_2/40ba9e6ccd40245b03725d4fb1487296.jpg)
![](/upload/resize_cache/main/713/60_60_2/713cf673b9cc25f51e3ab30512c44960.jpg)
![](/upload/resize_cache/main/713/60_60_2/713cf673b9cc25f51e3ab30512c44960.jpg)
![](/images/avatar/8.png)
![](/images/avatar/9.png)
![](/upload/resize_cache/main/076/60_60_2/07676f60d798d16ad8207d78bc007548.jpeg)
![](/upload/resize_cache/main/40b/60_60_2/40ba9e6ccd40245b03725d4fb1487296.jpg)
![](/upload/resize_cache/main/f81/60_60_2/f81b362b0e0fa94888db15809e91b3ea.jpg)
![](/images/avatar/3.png)
![](/images/avatar/4.png)
![](/images/avatar/7.png)
![](/upload/resize_cache/main/585/42_42_2/585f431424743e842039591d897b0018.jpg)
![](/upload/resize_cache/main/a7d/42_42_2/a7d58966649e99f3a4bc367b19fdace1.jpg)
![](/upload/resize_cache/main/713/42_42_2/713cf673b9cc25f51e3ab30512c44960.jpg)
![](/upload/resize_cache/main/a8f/42_42_2/a8fff0ebc3ae749f6c6e9235ee028d04.jpg)
![](/images/avatar/2.png)
![](/upload/resize_cache/main/517/42_42_2/5176ed0818edf65ffafd8091d485a4ef.png)
![](/images/avatar/9.png)
![](/upload/resize_cache/main/06d/42_42_2/06deae019622f209c1d2dbf0b02efa26.jpg)
![](/upload/resize_cache/main/c81/42_42_2/c816924d3b35c0fb60ed8597fcf48a5c.jpg)
![](/upload/resize_cache/main/802/42_42_2/802244fb8bbbdf42e704c3d7629712a7.jpg)
![](/upload/resize_cache/main/213/42_42_2/2131d1f6eb6785d43aa67c97635ba6a0.png)
![](/upload/resize_cache/main/d35/42_42_2/d3592bbe1f46c09319b2e411691696ae.jpg)
![](/upload/resize_cache/main/e73/42_42_2/e73ce1fffeff410ec230dab60b43bb2c.jpg)
![](/images/avatar/2.png)
![](/upload/resize_cache/main/974/42_42_2/9748368d2314dfb79ed5da3eaf65c5c4.jpg)
![](/upload/resize_cache/main/950/42_42_2/95075458576d86f53a212f253fa06fae.png)
![](/upload/resize_cache/main/0bc/42_42_2/0bc9321f23deb17434fdc831ed3f9242.jpg)
![](/upload/resize_cache/main/52c/42_42_2/52c72b135acd8f0d14938c084ad5c668.png)
![](/images/avatar/9.png)
![](/images/avatar/3.png)
![](/upload/resize_cache/main/527/42_42_2/5270eff60c8599d94be00b89d941c224.png)