Полное руководство по использованию Google AMP

Россия+7 (495) 960-65-87
Шрифт:
2 40445

Компания 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 amp.png

Никто не хочет получить понижение ранга из-за дублированного контента, и 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

По данным AMP Project, поддерживаются 2 последних версии Chrome, Firefox, Edge, Safari и Opera. Также поддерживают, но не совсем корректно отображают АМР-страницы системный браузер Android 4.0 и  Chrome версии 28 и старше на мобильных устройствах.

В заключение давайте подведем итог, в чем плюсы и минусы стандарта 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/

(Нет голосов)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Руслан
    больше года назад
    Читал, что АМР страницы лучше использовать новостным порталам, а не магазинам. Кто как считает?
    -
    2
    +
    Ответить
    • Александр
      1
      комментарий
      0
      читателей
      Александр
      Руслан
      больше года назад
      Думаю что использовать AMP страницы стоит всем, и магазинам также. Нужно обеспечить максимально комфортные условия посещения и использования сайта, для быстро растущей аудитории пользователей, которые активно используют мобильные и портативные устройства в серфинге сети.
      -
      1
      +
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Рейтинг Известности 2018: старт народного голосования
Михаил Р
1
комментарий
0
читателей
Полный профиль
Михаил Р - 1. Demis 2. кокс 3. Ашманов 4. Скобеев 5. Digital Strategy
Тест: Кто как пробежал, или Итоги клиентского рейтинга SEOnews 2018
Анна Макарова
338
комментариев
0
читателей
Полный профиль
Анна Макарова - Друзья, спасибо всем за участие! Мы определили победителей. Кто ими стал - вы найдете по ссылке: www.seonews.ru/events/darim-knigi-ot-mif-pobediteli-opredeleny/ Если вы стали одним из победителей, обязательно свяжитесь с нами по указанной в новости (по ссылке выше) почте. Всем хороших выходных! =)
SEO глазами клиентов 2018
Артур Якушев
1
комментарий
0
читателей
Полный профиль
Артур Якушев - >сейчас же сложно найти агентства, которые специализируются только на SEO Не так и сложно найти нас www.msk.lapkinlab.ru
Рейтинг Известности 2018: второй этап народного голосования
Константин Сокол
3
комментария
0
читателей
Полный профиль
Константин Сокол - Кто был ответственный за дизайн таблицы голосования? Копирайтер?
Комплексный аудит интернет-магазина от «Ашманов и партнеры». Часть 1
Александр Сова
1
комментарий
0
читателей
Полный профиль
Александр Сова - А вот и сеошники подъехали, покидать на вентилятор :D
Кейс: вывод лендинга по изготовлению флагов на заказ в ТОП 1 по Санкт-Петербургу
utka21
4
комментария
0
читателей
Полный профиль
utka21 - Кейс как кейс. Для некоторых станет вполне возможно полезным. ( Для конкурентов точно) . А вот с комментариями , что то пошло не так )
Не очень удачный кейс продвижения сайта по услуге «Трезвый водитель» в Москве
Кирилл Щербаков
3
комментария
0
читателей
Полный профиль
Кирилл Щербаков - "даже пришлось подключить отслеживание звонков с сайта" "Даже" - как будто это что-то нереальное
Как использовать Python для LSI-копирайтинга
Evgeny Montana
6
комментариев
0
читателей
Полный профиль
Evgeny Montana - спасибо)
Стартовал сбор заявок на участие в рейтинге «Известность бренда SEO-компаний 2018»
Артем Первухин
1
комментарий
0
читателей
Полный профиль
Артем Первухин - Make KINETICA Great Again!
Эксперимент: как уникальность контента влияет на продвижение сайта
Ilia Nazmutdinov
2
комментария
0
читателей
Полный профиль
Ilia Nazmutdinov - Кстати, ПФ не работают на нулевом трафике. Пока на сайт не льются тысячи показов по одним и тем же запросам влияние оказывает ток ссылочное\внешнее и внутреннее\ и внутренняя оптимизация.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
338
Комментариев
262
Комментариев
241
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
98
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
67
Комментариев
61
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55
Комментариев
54

Отправьте отзыв!
Отправьте отзыв!