×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
2 53664

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

(Голосов: 4, Рейтинг: 3.75)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Руслан
    больше года назад
    Читал, что АМР страницы лучше использовать новостным порталам, а не магазинам. Кто как считает?
    -
    2
    +
    Ответить
    • Александр
      1
      комментарий
      0
      читателей
      Александр
      Руслан
      больше года назад
      Думаю что использовать AMP страницы стоит всем, и магазинам также. Нужно обеспечить максимально комфортные условия посещения и использования сайта, для быстро растущей аудитории пользователей, которые активно используют мобильные и портативные устройства в серфинге сети.
      -
      0
      +
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Сергей
2
комментария
0
читателей
Полный профиль
Сергей - Прошёл у Паши курс год назад, пытался продвигать свой сайт portativ.org.ua, но особых продвижений нет. Наверное сео уже умерло??
Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
Юлия Дмитриева
2
комментария
0
читателей
Полный профиль
Юлия Дмитриева - Согласна с вами, что в любом деле важен индивидуальный подход:)
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
Яндекс возобновил «показательные порки» за накрутку поведенческих факторов
Антон
1
комментарий
0
читателей
Полный профиль
Антон - Никакой не выпал. Кроме клиентского сайта, который проседал из-за скрутки, о чем Я.Поиску сообщали и клиенту тоже. Ноль реакции от поисковика (продолжайте развивать сайт, никаких проблем нет ...). Клиенту надоело и он заказал накрутку у подрядчиков. Мы искренне ждали бана, сообщали об этом клиенту, т.к. мы все таки делаем все остальное для развития. Как итог: с лета полет нормальный. Сайт растет, никаких проблем. Случайно даже стажер палил тех поддержке факт использования накрутки. И ничего. Сайт растет дальше. Если они не могут ничего принять даже после признания факта накрутки, что они могут сделать с жалобами на накрутку конкурентов?! Никогда не одобряли данные методы, но ... похоже ... все работает :)
«Нет в наличии»: что делать с карточками отсутствующего товара
freyr energy
1
комментарий
0
читателей
Полный профиль
freyr energy - Thank you so much @ admin for share your valuable thoughts and ideas We always enjoy your articles its inspired a lot by reading your articles day by day. So please accept my thanks and congrats for success of your latest series. We hope, you should published more better articles like ever before solar rooftop
Яндекс тестирует оценки сайта в сниппете
Сергей Демин
8
комментариев
0
читателей
Полный профиль
Сергей Демин - вопрос такой: где получить оценку о сайте? а не об организации
15 языков программирования, за знание которых платят выше среднего
Любомир
2
комментария
0
читателей
Полный профиль
Любомир - Ну и ЗП: ни слова о том что она варируеться от 0 до 100 000$ в год!!! Что до высокой зп надо несколько лет етим заниматся! Что 100 000$ в год на западе заробатывают, а где нибудь в азиатских страннах 100$ в год. В СНГ первые годы в разработчика ЗП как в грузчика на складе - это где то 4-5 тыс. долларов в год, и уже имея несколько лет опыта возможно дойти до 10-20 тыс. долларов в год! Почему нет конкретики? Меня лично нервирует то что людям внушают великие ЗП в АйТи, а люди тупые и ведутся!!!!
Локальное продвижение интернет-магазина: как получить дополнительный трафик из регионов
Саша Дружин
2
комментария
0
читателей
Полный профиль
Саша Дружин - У меня был опыт раскрутки сайта на иностранных рынок, например для анголязычной аудитории. В целом отличия есть, хоть и небольшие. Больше всегда прироста получил после закупки ссылок от www.e-raskrutka.ru/anothercountry , они достаточно качественно работают на англоязычную аудиторию и могут лаконично вписаться в любое обсуждение. Можно самому попробовать заказать такие ссылки и посмотреть на результат.
От количества к качеству: что происходит с рекламой в Рунете
Евгений
1
комментарий
0
читателей
Полный профиль
Евгений - Истину глаголите!
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
384
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
91
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

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