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

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

Компания 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
      читателей
      Александр
      Руслан
      6 месяцев назад
      Думаю что использовать AMP страницы стоит всем, и магазинам также. Нужно обеспечить максимально комфортные условия посещения и использования сайта, для быстро растущей аудитории пользователей, которые активно используют мобильные и портативные устройства в серфинге сети.
      -
      1
      +
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Кейс: как продвинуть сайт производителя мебели на заказ в Москве
Art Moderator
2
комментария
0
читателей
Полный профиль
Art Moderator -
Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
Гость
1
комментарий
0
читателей
Полный профиль
Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
«Баден-Баден»: как выйти из-под фильтра
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Здравствуйте! У меня совсем новый сайт (около месяца). Как только добавила страницы - были на 64, 45 и т.д. местах в выдаче яндекса по нч и сч запросам, но через несколько дней улетели за пределы 200. Что это баден - баден или песочница? Текст вроде не спамный, но мне трудно судить. Сайт portretnazakaz.ru
Второе дыхание ссылочного продвижения
Rookee.ru
24
комментария
0
читателей
Полный профиль
Rookee.ru - Еще лучше, когда продвижение осуществляется комплексно :)
Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
Анатолий Шевчик
1
комментарий
0
читателей
Полный профиль
Анатолий Шевчик - +1097988
32 инструмента в помощь SEO-специалисту
Alex Wise
5
комментариев
0
читателей
Полный профиль
Alex Wise - Данис, я тысячу раз извиняюсь насчёт имени! :( Хотя уверен, что лучше всех вас понимаю по этому поводу, ибо меня всегда называют "Алексеем", хотя я Александр: всё из-за сокращения Alex ;) Жду фидбека по новой версии 3.0!
Контекст под SEO. Как поисковая реклама помогает позициям в органической выдаче
Сергей Дембицкий «Sima-Land.ru»
22
комментария
0
читателей
Полный профиль
Сергей Дембицкий «Sima-Land.ru» - Боже мой, неужели SEO-маги вернулись??? Открыть в роботс utm-метки для индексации и наплодить дублей...что? А расчеты в конце статьи про бюджет на SEO и контекст...откуда эти пропорции? Как по мне, SEO-магия вне Хогвартс. Спасибо, развеселили!
Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
Максим Мирошник
2
комментария
0
читателей
Полный профиль
Максим Мирошник -
Все, что нужно SEO-специалисту. Обзор инструментов
Администратор Сайта
1
комментарий
1
читатель
Полный профиль
Администратор Сайта - Шаришь в seo! Сервис реально хороший
«Прямая линия» с Артуром Латыповым: отвечаем на вопросы
God Koss
1
комментарий
0
читателей
Полный профиль
God Koss - Добрый день! Есть сайты одной компании продвигающиеся в разных странах. .ru .com .net. На российском сайте два языка ru и en, на остальных до 10 языков. Недавно сайт ru по основному брендовому запросу выпал из выдачи Яндекс но после апа вернулся на вторую позицию. На вопрос аффилирования в тех поддержку, получит ответ, что всё в порядке и сайт com не учавствует в выдаче. Но он есть и занимает 1 место. Как быть в данной ситуации? Так же, после возврата в топ 10 по этому запросу зашла еще одна внутренняя страница. Могло ли это случиться из-за каннибализации запроса? Немного изменил description на внутренней, исключил вхождения брендового запроса. Жду апа. Хотел бы услышать ваше мнение. Заранее благодарю!
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
320
Комментариев
262
Комментариев
234
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
86
Комментариев
80
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55
Комментариев
54
Комментариев
53

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