Accelerate Mobile Page – мастхэв для блога, СМИ и интернет-магазина

СОДЕРЖАНИЕ

Чем принципиально отличаются Google AMP от Турбо-страниц Яндекса

Как выглядят AMP-страницы

Кому будут полезны AMP

Коротко про устройство AMP

Что должно быть в AMP; HTML-операторы

Чего НЕ должно быть в AMP-страницах

Монетизация AMP-страниц

AMP для интернет-магазинов

AMP-страницы на WordPress

AMP для Drupal

AMP для Joomla

Выводы

Итак, продолжаем разбирать тематику Mobile Friendley, т.е. способы подружить Ваш сайт с мобильными устройствами, т.к. средний процент мобильного трафика уже давно перевалил за 60% и продолжает расти. А это значит, что 95% коммерческих проектов без мобильного трафика просто не выжить в поисковой выдаче. Ну а в качестве бонуса, еще и Google с алгоритмом Mobile First подлил масла в огонь.

По тематике Mobile Friendly у нас уже есть две статьи – одна про адаптивную вёрстку и одна про Турбо-страницы от Яндекса, в которой уже частично затрагивалась тема AMP-страниц (дословно – Accelerate Mobile Page – ускоренные мобильные страницы). В этой статье мы рассмотрим данную тему гораздо глубже.

Но для начала небольшое видео, взятое из нашей статьи о Турбо-страницах, в нём мы коротко рассмотрели 4 способа подружить Ваш сайт с мобильными устройствами, а также предложили несколько вариантов по расстановке приоритетов между данными способами.

В данном видео мы рассмотрели Турбо-страницы и AMP как 2 аналогичных друг другу способа подружить сайт с мобильными устройствами. Хоть это и аналоги друг друга, но у них есть несколько кардинальных отличий друг от друга.

Чем принципиально отличаются Google AMP от Турбо-страниц Яндекса

Не будем «вокруг да около», сразу к делу.

В случае с Турбо-страницами просто формируется фид (скажем так – видоизменённая RSS-лента), который выглядит примерно вот так:

Т.е. Яндекс считывает фид и самостоятельно формирует Турбо-страницы на своих серверах. Следовательно, физически Турбо-страницы ОТСУТСТВУЮТ на сайте.

С Google AMP – наоборот: страницы физически ПРИСУТСТВУЮТ на сайте и именно их Google и «кушает» в том виде, в котором они есть. Но как же тогда получается, что страница есть, но она физически не получает трафика? Эмм… Ну не то чтобы вот прям совсем не получает… Фишка в том, что AMP грузятся с серверов Google (а если конкретнее – из кэша), а если по каким-то причинам загрузить страницу из кэша не представляется возможным, то происходит переадресация на физическую копию страницы, находящуюся на сайте.

Еще одно ключевое отличие Турбо-страниц от AMP – это оформление. В первом случае это просто текст с картинками и рекламными баннерами (если речь о новостном сайте). Во втором же случае страницы имеют пусть и небольшое, но всё-таки оформление, которое иногда вводит посетителя в заблуждение, заставляя думать, что он на мобильной версии или версии с адаптивной вёрсткой.

Третье ключевое отличие – AMP НЕВОЗМОЖНО просмотреть на десктопных машинах. Да, мы не спорим, можно воспользоваться эмулятором Opera Mobile, можно перевести десктопный браузер в мобильный режим, а можно воспользоваться эмулятором Android-устройств. Но всё это уже «пляски с бубном» в чистом виде. Если же просто вставить в адресную строку ссылку на AMP-страницу, загруженную из кэша Google, то произойдёт переадресация на десктопную версию. В приведенном ниже видео именно это и продемонстрировано. Яндекс же тем временем позаботился о том, чтобы Турбо-страницы можно было просматривать как на мобильных устройствах, так и на десктопных. Более того, Яндекс считает, что необходимо сделать еще и десктопные Турбо-страницы. Да-да, ДЕСКТОПНЫЕ ТУРБО-СТРАНИЦЫ!

Как выглядят AMP-страницы

Кто бы что ни говорил, а AMP, даже не смотря на свою «обрезанность» по дизайну функционалу, смотрится гораздо более привлекательнее, чем Турбо-версия той же страницы. Для примера давайте рассмотрим AMP-страницы с двух разных сайтов, 1 из которых является еще и интернет-магазином.

Итак, что же мы увидели? А увидели мы следующее:

• AMP, по сути, выполняют ту же функцию, что и Турбо-страницы, а именно – привести посетителя на быстро загружающийся сайт, Ваша же задача – удержать приведённого посетителя любой ценой.
• AMP, как и Турбо-страницы, НЕ ПРЕДНАЗНАЧЕНЫ для торговли. Самый максимум, что они смогут сделать – привести Вам потенциального покупателя. Ну а далее «закрыть покупателя на сделку» - это уже дело за Вами.

Точнее не за Вами, а за тем, как быстро работает Ваш сайт, как он адаптирован для мобильных устройств и т.д.

Кому будут полезны AMP

Если в общих чертах, то ситуация в точности та же, что и в случае с Турбо-страницами.

Простым рядовым пользователям (речь о мобильном трафике) однозначно понравится быстрая загрузка облегчённых страниц, которые, в отличие от Турбо-страниц Яндекса, еще и неплохо оформлены. Напомним, что количество тех, кто «гуляет» по Рунету с мобильных устройств растёт уже даже не из года в год, а из месяца в месяц.

Что касается онлайн-бизнеса, то:

• AMP однозначно будут полезны для сайтов, которые монетизируются исключительно за счет рекламных показов – СМИ, блоги, новостные ленты и т.д.;
• для полноценной онлайн-торговли AMP не подходит, однако, именно с помощью упрощённых AMP-карточек можно привлечь потенциального покупателя, опять-таки за счёт быстрой загрузки, а «закрывать» его на сделку уже в мобильной (именно в мобильной, а не адаптированной) версии сайта.

И если раньше делать AMP-карточки товаров было абсолютно бессмысленно, то сейчас смысл хотя бы в том, чтобы привлечь потенциальных покупателей и «перекинуть» их на мобильную версию сайта.

Ну и, естественно, никто не будет запрещать Вам комбинировать эти варианты. Например, у Вас есть интернет-магазин бытовой техники, а в магазине есть блог. Что Вам мешает сделать AMP-версии как статей, так и карточек товаров? Правильно – ничего не мешает. Вот и действуйте!

Коротко про устройство AMP

В сайтостроении уже давно нет необходимости заново программировать слайдеры, модальные окна и прочую лабуду, для этого уже давно придуманы так называемые jQwery-библиотеки. Т.е. верстальщик не пишет код с нуля, а берёт уже готовый (как раз тот случай, когда «всё уже украдено до нас») и адаптирует его под конкретный сайт. С AMP всё происходит почти по той же схеме, за исключением нескольких отличий.

Отличие 1 – для AMP оставлен только тот код, который годится для быстрой загрузки контента. Например, картинки могут подгружаться не сразу, а далее по мере прокручивания страницы пользователем. Сюда же можно отнести модальные окна, слайдеры и прочую «легкотню».

Отличие 2 – используются только асинхронные скрипты, т.е. снова всё для наиболее быстрой загрузки.

Отличие 3 -  код написан таким образом, что AMP-страница будет одинаково хорошо отображаться вообще на любых мобильных устройствах. 

Все эти 3 отличия направлены в первую очередь на то, чтобы браузеры отобразили страницу настолько быстро, насколько это вообще возможно. Однако, функционал страницы при этом достаточно сильно ограничивается. Хотели вставить какие-то свои собственные скрипты? Забудьте, ибо даже список допустимых к использованию html-тегов ограничен.

Что должно быть в AMP; HTML-операторы

Итак, давайте разбираться с тем, что вот прям совсем обязательно должно быть в AMP-страницах.

1. Код обязательно должен начинаться с тега <!doctype html>.
2. Не забываем про тег верхнего уровня. В AMP это либо <head>, либо <head amp>. На данный момент без разницы, какой из этих двух тегов использовать. Мы же всегда для AMP-страниц используем <head amp> - мало ли что.
3. В теге <link rel="canonical" href=""> в атрибуте href должен быть указан адрес десктопной версии страницы. Если AMP-страница не имеет десктопной версии, то ссылка указывается «на саму себя». В каком-то смысле мы таким образом «склеиваем дубли страниц». Кстати. На десктопной версии страницы должен быть прописан код <link rel="amphtml" href="">, а в href в этом случае прописывается адрес AMP-версия страницы. Вот Вам и лайфхак о том, как узнать, использует ли сайт AMP или нет.
4. Кодировка – куда же без неё: <meta charset="utf-8">.
5. <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> - данный код необходим для автоматической подстройки страницы под размеры экрана устройства, на котором отображается страница.
6. <script async src="https://cdn.ampproject.org/v0.js"></script> - для загрузки библиотеки AMP JS.
7. Также должен быть вот этот шаблонный код в виде «как есть» - <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Ну и не забывайте про микроразметку. Например, если у Вас новостной сайт, то страница с необходимой микроразметкой вполне может попасть в так называемую «новостную карусель».

Чего НЕ должно быть в AMP-страницах

Итак, от «можно» переходим к «нельзя».

1. base, frame, frameset, object, param, applet, embed – полностью запрещены к применению, исключений нет.
2. любые атрибуты, начинающиеся с on – полностью запрещены к применению, исключений нет.
3. Атрибуты, связанные с XML – полностью запрещены к применению, исключений нет.
4. video, audio, iframe, img, form – вместо них должны использоваться amp-video, amp-audio, amp-iframe, amp-img, amp-form. ВАЖНО!!! У <img> нет закрывающего тега, а у <amp-img> он должен быть <amp-img src="godnota.jpg" alt="А вот это – лютая годнота" height="600" width="1200"></amp-img>.
5. script – этого тега быть не должно, за исключением приведенных в предыдущем разделе исключений, а также за исключением application/ld+json или text/plain.
6. noscript – не является запрещённым, однако его использование допускается только в том случае, если оно никак не повлияет на отображение страницы в случае, когда у пользователя отключено использование скриптов.
7. input elements – разрешен, кроме случаев с использованием <input[type=image]>, <input[type=button]>, <input[type=password]>, <input[type=file]>.

Как видите, в AMP достаточно много чего нельзя использовать. Тем не менее в большинстве случаев Вы НЕ будете «упираться» ни в одно из перечисленных выше ограничений (за исключением, пожалуй, третьего пункта, который можно «обойти»). 

Монетизация AMP-страниц

Данный подраздел будет интересен всем владельцам информационных сайтов, поскольку их сайты, как правило, монетизируются либо исключительно за счет контекстной рекламы, либо в основном за счет рекламы (ключевыми словами тут являются «исключительно» и «в основном»). Итак, с помощью каких же рекламных сетей можно монетизировать AMP:

• Adform;
• AdReactor;
• Plista;
• Yieldmo;
• Google Менеджер рекламы;
• Taboola;
• Flite;
• AOL AdTech;
• Amazon A9;
• Smart AdServer;
• Google AdSense;
• DotAndAds.

Как видите, рекламных платформ для монетизации AMP предостаточно, а это жирный плюс для блогеров и новостных сайтов.

AMP для интернет-магазинов

Давайте еще раз разберём этот пункт.

Во-первых, напомним, что сами по себе AMP НЕ ПРЕДНАЗНАЧЕНЫ для онлайн-торговли. Они предназначены для привлечения потенциальных покупателей.

Во-вторых, если посетитель решится на покупку, то заканчивать заказ он будет либо на мобильной версии сайта, либо на десктопной адаптированной, в зависимости от того, как настроен Ваш сайт.

В-третьих, напомним, что AMP в первую очередь полезны пользователям, у которых медленный и нестабильный интернет. Следовательно, мобильная версия сайта тоже должна быть лёгкой и быстрой, иначе посетитель может «сорваться» с покупки и закрыть его на сделку не получится.

AMP-страницы на WordPress

И снова в WordPress всё сводится к нажатию условной кнопки «сделай мне хорошо», т.е. к установке тех или иных плагинов.

Начнём с установки официального плагина, который так и называется – AMP (ссылка на страницу плагина - https://wordpress.org/plugins/amp/). 

После его установки и активации, AMP-страницы будут выглядеть примерно вот так, т.е. довольно простенько.

Кстати, AMP-страницы появляются буквально сразу же после активации плагина. Плагин не имеет вообще никаких настроек, а это значит, что:

• кроме активации плагина, не требуется вообще ничего;
• изменить внешний вид AMP-страницы, увы, не получится.

Ну а чтобы посмотреть, как будет выглядеть Ваша страница в AMP-формате, достаточно просто дописать в адресную строку /amp/. Например, было – https://police.academy/zakon-i-poradok/, а стало - https://police.academy/zakon-i-poradok/amp/.

Созданные с помощью данного плагина AMP-страницы успешно проходят валидацию в онлайн-сервисе https://validator.ampproject.org/. К слову, Pass как раз и означает, что замечаний у сервиса по этому вопросу нет. Т.е. официальный плагин – это как раз тот случай, когда просто поставил и забыл.

Ну а теперь давайте рассмотрим альтернативу в виде другого плагина - AMP for WP (https://wordpress.org/plugins/accelerated-mobile-pages/). Основной минус данного плагина в том, что он англоязычный.

Этот плагин, в отличие от предыдущего, позволяет менять внешний вид страницы. Для этого нажимаем на AMP в верхней строке админки и переходим в настройки.

Затем заходим в раздел General. Далее:

• переключатель “AMP on Pages”, если Вы хотите, чтобы AMP-версии были не только у записей, но и у страниц (по умолчанию плагин делает AMP-версии только для записей);
• при необходимости включаем “Front Page”, чтобы указать адрес страницы, которая будет отображаться в качестве главной на AMP-версии;
• загрузить логотип (рекомендуемые размеры – не более 190х36 пикселей), либо с помощью кнопки Custom Logo Size обойти данную рекомендацию и загрузить логотип, который Вам больше подойдёт.

Также плагин позволяет подключить аналитику Google Analytics. Для этого заходим в Analytics и указываем GA-идентификатор.

Далее при желании можно зайти в Desigh и настроить дизайн Ваших Amp-страниц, зайти в SEO и настроить отображение мета-данных Ваших Amp-страниц, зайти в раздел Advertisement и настроить монетизацию через рекламные сети (объявления над шапкой, под футером, над и под контентом), и т.д., функционал у плагина достаточно богатый.

AMP для Drupal

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

• html-библиотека AMP (добыть ее можно вот отсюда - https://github.com/Lullabot/amp-library)
• тема оформления AMP-страниц (украсть ее можно прямо с официального сайта движка Drupal - https://www.drupal.org/project/amptheme);
• собственно, плагины -  Accelerated Mobile Pages (который также можно украсть прямо с официального сайта Drupal - https://www.drupal.org/project/amp/), Token (https://www.drupal.org/project/token), Chaos Tools (https://www.drupal.org/project/ctools), а если сайт еще и будет монетизироваться через показы рекламы из AdSence – еще и Google AdSence Integrator (https://www.drupal.org/project/adsense).

Итак, заходим в настройки модуля AMP, идём на вкладку AMP Configuration, где мы и подключим отображение ускоренных страниц. На данной странице Вы можете выбрать тему AMP-оформления (собственно, для этого мы и оставили ссылку, чтоб Вы сами выбрали для себя подходящую тему). Здесь же можно указать идентификатор Google Analytics.

Далее заходим на вкладку AMP Metadata, где указываем название сайта и настраиваем логотип.

Вот, собственно, и всё! Далее заходите на любую страницу сайта, дописываете к адресу «?amp» и смотрите, как будет выглядеть AMP-страница.

AMP для Joomla

Вот тут есть одна небольшая проблемка. Дело в том, что вменяемых полностью бесплатных плагинов для реализации AMP на Джумле мы не нашли. Поэтому будем довольствоваться тем, чем приходится – wbAMP. Он есть в двух версиях:

• бесплатная (но ограниченная) сборка для сообщества (https://weeblr.com/download);
• полная версия за 44 американских президента в год (https://weeblr.com/joomla-accelerated-mobile-pages/wbamp).

После скачивания, установки и активации заходим на страницу настроек, где:

• URL AMP не трогаем, тогда адрес AMP-страницы будет таким же, как и основной, только заканчиваться на «/amp», т.е. менять параметр смысла нет;
• выбираем тип микроразметки (NewsArticle больше подойдёт для новостных заметок, а BlogPosting – для записей в блоге);

• заходим на вкладку «Выбрать страницы» и настраиваем правило для com_content следующим образом: ID и «Задачи» заполняем звёздочками, а в «Представлении» указываем Article, если хотите, чтобы AMP генерировались только для публикаций (хотя большего и не требуется),

далее спускаемся до «Категорий» и указываем категории, для которых будут генерироваться ускоренные страницы;

Далее рассматривать настройки не будем, т.к. вряд ли Вы захотите платить 44 доллара в год, а весь остальной функционал в бесплатной версии заблокирован.

Выводы

Итак, что же мы выяснили? Да практически ничего нового, по сравнению с Турбо-страницами мы и не выяснили. И AMP и Турбо-страницы выполняют по сути одни и те же задачи, реализованы очень похожим образом и имеют схожий функционал. Соответственно, и рекомендации по AMP будут те же самые, что и по Турбо-страницам:

• однозначно подключать;
• можно монетизировать за счет показов рекламы;
• можно создавать «быстрые» карточки товаров для привлечения покупателей;
• интернет-магазинам крайне желательно иметь быструю мобильную версию, чтобы удержать покупателей, пришедших по медленному интернет-соединению.

Далеко не факт, что это последняя статья по тематике Mobile Friendley, поскольку:

• Яндекс уже запустил десктопные Турбо-страницы;
• Google пообещать в ближайшее время «завезти» поддержку пользовательских JavaScript.