АMP. Что это и с чем его едят?
Общая информация
AMP — это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается компанией Google в своем поисковике. Yandex пока что не подключился к этой инициативе, но, я уверен, в скором времени они внедрят либо этот стандарт, либо придумают что-то схожее по принципу работы.
Суть в том, что на сайте используются специальные теги, количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.
Google находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то в Гугле, браузер на фоне подгружает информацию из CDN Гугла, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.
Страницы с AMP ранжируются выше других запросов в поиске за счет того, что соответствуют требованиям к быстрой загрузке и адаптированы под мобильные устройства.
По сути все подобные страницы являются статическими или условно-динамическими, так как допускают использование отправки форм, а также iframe.
Области применения: новостные сайты и порталы; каталоги (без использования фильтров); легковесная мобильная версия сайта (если удовлетворяет функционал); страницы-зацепки, чтобы заинтересовать пользователя и заманить на основной сайт.
Далее расскажу об основных особенностях AMP.
Отсутствие кастомных скриптов
Первое и самое главное отличие от стандартных сайтов — это невозможность вставки «обычных» скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.
Решение — использование доступных компонентов и iframe.
Доступные компоненты позволяют добиться, пусть и не полной, реализации привычных фич, но представляют им достойную замену и оптимизированы для быстрой загрузки.
С их помощью можно сделать боковое меню, карусель, отправку формы, подгружаемый контент, рекламу и прочее.
Каждый компонент связан со своей js-библиотекой, которую нужно подключить для его использования на сайте.
Все доступные виды компонентов с примерами использования можно найти на этом сайте.
Отсутствие обычных тегов в документе.
В коде страницы не должно быть inline-стилей
Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style=“color:…”, не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.
Структурированная схема данных (structured data)
Для включения статей в подборку “Top stories google” к страницам должны быть добавлены схемы данных с краткой информацией о статьях, авторе, издательстве, логотип компании, а также даты публикации и изменения статьи.
Использование структурных данных не является обязательным условием, но для того чтобы поисковик корректно отображал данные и изменения при редактировании, нужно помещать эту схему на сайт. Фактически использование AMP без этой схемы становится бессмысленным.
Пример схемы данных для страницы типа «статья»:
Некоторые значения являются обязательными. Для структурной схемы данных так же есть свой валидатор. Информация по заполнению и обязательные поля для схемы типа “статья” можно посмотреть здесь.
Там же можно найти информацию по другим типам схем. (Книги, Курсы, Музыка, Подкасты, Рецепты, Обзоры, ТВ и Фильмы, Видео)
Логотип компании
Есть ряд требований к логотипу:
https://developers.google.com/search/docs/data-types/articles#AMPlogo guidelines
Хочу обратить внимание, что размер должен быть не больше и не меньше 60x600px хотя бы по одной из сторон. Желательно соблюдать высоту 60px (например, 450x60px). Изображения меньших размеров, но в тех же пропорциях, что и 60x600px (например 450x45px), проверку не пройдут.
Ссылки canonical и обратная к ней
Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:
А на AMP-странице — присутствовать обратная ссылка:
Css 50 кб
Css стили пишутся inline, и их размер не должен превышать 50кб.
Заключение
AMP — интересная технология, но только для узких задач. Может быть использована для «легкой» мобильной версии сайта, либо для определенных разделов, не требующих высокой функциональности. Хорошее решение для информационных сайтов, блогов, интернет-журналов. Там где нужно донести до пользователя контент максимально быстро и в простой форме. Для больших и сложных проектов AMP не станет заменой мобильной или адаптивной версии, по крайней мере, на данном этапе.
Часть функционала мне удалось реализовать на сайте нашей IT-компании Wellsoft, в разделе новостей (адаптивное изображение, форма, текст, структурированные данные; кроме того, если появится такая возможность, эта статья попадет в галерею “Top stories”).
Ко всем статьям AMP в поисковой выдаче Google добавляет иконку AMP, и с мобильных устройств в первую очередь показывает AMP страницы. Кроме того, они ранжируются выше, чем страницы без использования AMP.
UPD: мы потратили много времени на изучение и внедрение технологии, но в итоге решили, что нам AMP не нужен, поэтому на новом сайте (релиз был 1 ноября 2017), страниц с AMP уже нет. Можем поделиться подробностями, кому интересно (контакты на сайте).
AMP и Турбо-страницы: плюсы, минусы и результаты внедрения
Те, кто следит за новинками сферы IT, знают про “быстрые страницы” от Google и Яндекс: AMP и Турбо-страницы. Они были выпущены больше 2 лет назад, но особого шума на рынке не произвели.Меня зовут Константин. Я директор веб-студии AlkoDesign. Мы решили напомнить об этих инструментах и поделиться результатами их внедрения.
Мобильный трафик в последние годы неуклонно растет. Пользователи все чаще читают новостные сайты, заказывают продукты и вещи с телефонов. Мобильные и адаптивные версии сайтов перестали быть привлекательным бонусом, а стали реальной необходимостью.
Но не все так прекрасно. В погоне за трафиком и снижением отказов, приходится искать новые пути решения. Мобильные и адаптивные версии не всегда спасают ситуацию, а иногда вообще неудобны: адаптив получается слишком “тяжелыми” для скачивания, из-за этого скорость загрузки на смартфонах оставляет желать лучшего. (Говорить про то, что посетители, да и поисковые системы, не любят долгую загрузку, нужно?)
Мы в AlkoDesign.ru работаем с одним крупным информационным порталом. (Обойдемся без имен). Одними из поставленных перед нами задач, были: увеличение трафика и снижение процента отказов. Недолго думая, мы решили воспользоваться быстрыми страницами от Google и Яндекса.
В этой статьей мы поделимся результатами внедрения таких страниц на одном из новостных порталов и вкратце расскажем, что такое быстрые страницы и с чем их едят (для тех, кто не в теме).
Теория
AMP и Турбо-страницы — это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается обеими поисковыми системами. Такие страницы загружается даже быстрее чем страница мобильной версии сайта.
AMP страницы google.ru
Суть в том, что на сайте используются специальные теги (с префиксом amp), количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.
Поисковые системы находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то, браузер на фоне подгружает информацию из CDN, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.
При использовании на сайте какой-либо CMS, для AMP страниц необходимо сделать свой отдельный шаблон для отображения данных согласно требованиям к разметке AMP страниц.
Турбо-страницы Яндекса
Основное отличие от AMP — контент Турбо-страниц берется не со страниц сайта, а из специального RSS-канала.
Их содержимое хранится на серверах Яндекса. Но для того, чтобы Яндекс забрал с нашего сайта контент, мы должны написать скрипт, который будет передавать все необходимые данные (текст, изображения, стили и т.д.) в специальном формате XML-документ. Процесс похож на подготовку данных для Яндекс.Товары или Яндекс.Маркета.
Честно говоря, настройка максимально простая. Если количество страниц небольшое (10-20), то сделать RSS-канал для Яндекса можно самим, без привлечения программиста. Правда, в этом случае обновляться он будет тоже вручную.
Скорость загрузки Турбо — страницы превышает обычную примерно в 15 раз. И, дополнительный (но не последний), бонус — если сайт упадёт, например, из-за заражения или DDoS-атаки, его Турбо-страницы продолжат открываться и контент будет по-прежнему доступен пользователям.
Страницы с AMP и Турбо, ранжируются выше других запросов в поиске за счет того, что соответствуют требованиям к быстрой загрузке.
Особенности AMP и Турбо-страниц
Первое и самое главное отличие от стандартных сайтов — это невозможность вставки «обычных» скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.
Решение — использование доступных компонентов и iframe. Доступные компоненты позволяют добиться, пусть и не полной, реализации привычного инструментария на сайте, но представляют ему достойную замену и оптимизированы для быстрой загрузки.
С помощью AMP и Турбо-тегов, можно реализовать боковое меню, карусель, отправку формы, подгружаемый контент, рекламу и прочее. Каждый компонент связан со своей js-библиотекой, которую нужно подключить для его использования на сайте.
Особенности Турбо-страниц
Они помогают увеличивать охват мобильной аудитории — пользователям не приходится долго ждать загрузки сайта, и они почти сразу переходят к вашему контенту. Прирост трафика может быть существенным.
Преимущества Турбо-страниц в том, что после их внедрения на вашем сайте:
Особенности AMP
Подготовка данных
Для AMP-страниц
Так же, если используются карусель или lightbox, нужно вставить аналоги из компонентов amp. Для реализации этого функционала был реализован обработчик, который с помощью регулярных выражений заменяет стандартные HTML-теги, на теги используемые в amp спецификации.
Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style=“color:…”, не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.
Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:
Для Турбо-страниц
Чтобы подключить Турбо-страницы, достаточно внести небольшие изменения в текущий экспортный файл согласно техническим требованиям:
Практика
Внедряем AMP на сайт
Учитывая, что мы далеко не новички в IT-сфере, внедрение страниц не составило большого труда.
Мы создали отдельный шаблон для сайта с использованием необходимых тегов из спецификации AMP и Турбо. Затем настроили автоматическую генерацию страниц.
Сразу после внедрения быстрых страниц, запустили проверку через Google и Яндекс валидатор. После запуска обнаружили дополнительные ошибки, которые были успешно устранены.
Внедряем Турбо-страницы
Для внедрения Турбо-страниц на сайте, была изучена спецификация формата. Определены шаблоны для генерации заголовков турбо-страниц и указания дополнительных изображений. Был разработан специализированный модуль для CMS, который генерирует RSS файлы с данными, согласно технической документации Яндекса ( partner.news.yandex.ru/tech.pdf ).
Поскольку материалы на сайте постоянно добавляются, то обновление RSS ленты с турбо-страницами, также обновляется путем запуска скрипта обновления на CRON. Из-за специфики проекта было принято решение сделать несколько RSS лент, каждая для своего типа контента.
В настройках модуля можно указать какие разделы сайта необходимо экспортировать в RSS, указать дополнительные данные для экспорта. Частота обновлений RSS ленты турбо-страниц задается периодичностью выполнения задачи на CRON.
После прохождения валидации RSS со стороны Яндекса, Турбо-страницы были добавлены к индексации.
Результаты
Отказы
После внедрения AMP и Турбо-страниц изменились поведенческие метрики.
За квартал показатель отказов на сайте в целом составил 14,2 %. Здесь учитываются все посетители, включая пользователей десктопов.
Показатель отказов для владельцев смартфонов, которые приходили на обычные страницы, составил за квартал 23,7%.
Показатель отказов для посетителей Турбо-страниц за этот же период составил 6,2 %.
То есть по показателю отказов, обычные страницы проигрывают турбо-страницам более чем в два раза: 23,7 % против 6,2% с Турбо-страницами и в целом 14,2%.
Посещаемость
С момента внедрения AMP и Турбо-страниц мы увеличили посещаемость портала в 2 раза.
Скорость загрузки страниц
Главный плюс — увеличение скорости загрузки страницы в 3 — 10 раз. Она мгновенно выросла за счет кеширования.
Вывод: внедряем к месту и с умом
Там где нужно донести до пользователя контент максимально быстро и в простой форме.
В нашем случае результатом внедрения стало:
Кому пока не подходит Турбо:
Кому идеально подходят Турбо-страницы:
AMP и Турбо-страницы — интересная технология, которую нужно использовать с умом. Может быть использована для «легкой» мобильной версии сайта, либо для определенных разделов, не требующих высокой функциональности. И, конечно, это отличное решение для информационных сайтов, блогов, интернет-журналов.
Зачем вам нужен AMP Google? И нужен ли?
В начале прошлого года Гугл начал активную работу по улучшению своей поисковой выдачи на мобильных устройствах. Первым «звоночком» был алгоритм mobile-friendly. Суть – если человек зашел в поиск с мобильного телефона, так давайте покажем ему на первых позициях те сайты, которые удобнее на этом самом мобильнике смотреть (естественно, при прочих равных).
Вообще, подход вполне логичный – если из пользователей вашего сайта многие открывают его со смартфонов или планшетов, то сделать сайт адаптивным (читай «удобным») для мобильных устройств – хорошее проявление заботы о своих пользователях, а соответственно, и о поведенческих факторах своего сайта. Гугл лишь подтолкнул процесс «мобилизации» сайтов.
В продолжение mobile-friendly в октябре 2015 Гугл анонсировал новый проект, призванный сделать жизнь «мобильных» пользователей еще слаще )) Речь идет о технологии AMP, Accelerated Mobile Pages – Ускоренные страницы для мобильных устройств. Мы не будем вдаваться в технические тонкости, а попробуем ответить понятным языком на основные вопросы: как это выглядит, кому и зачем это нужно, как внедрить на свой сайт.
Замечание: все скриншоты в статье сделаны с планшета (с мобильного устройства).
Как выглядит AMP Google
Вообще, страница сайта, использующая технологию AMP, внешне мало чем отличается от обычной страницы. Вот пример AMP-страницы:
http://m.lenta.ru/news/2016/01/16/falcon/amp/
Ничего особого в ней нет. Более интересно, как Гугл решил выводить AMP-страницы в своей мобильной поисковой выдаче. Смотрите, если мы ищем какие-то новости в Гугле, например, «новости дня», то под строкой поиска видим блок «Главные новости» с карточками:
Щелкаем по какой-либо карточке, и страница выбранного сайта открывается в новой вкладке. Зачастую, особенно если скорость интернет соединения не слишком высока, в течение 4-7 секунд мы наблюдаем такую картину:
Что придумали в Google – с внедрением AMP в поиск блок «Главные новости» изменится (обратите внимание на значок AMP):
С первого взгляда кажется, что мы видим те же самые карточки, только с чуть большими картинками. Кликаем по одной из них:
Обратите внимание на 4 момента (отмечены на скриншоте):
1. Физически мы не переходим на другой сайт, а остаемся в Гугле, который подгружает нам содержимое выбранной страницы.
2. Оказывается, это слайдер. Мы можем листать влево и вправо, тем самым быстро переключаясь между контентом остальных AMP-страниц блока «Главные новости».
3. По этой кнопке можем вернуться на страницу поиска.
4. И это самое важное – контент AMP-страницы отображается здесь буквально за доли секунды.
Выглядит заманчиво. Теперь ложка дегтя:
Пока такой слайдер с AMP-страницами выводится только в англоязычном google.com, в русскоязычной версии его нет. Ждемс..
Те, кто хочет уже сейчас «потрогать» руками русскоязычную выдачу с AMP-страницами, держите инструкцию:
Еще один нюанс: Если Гугл не нашел достаточное число AMP-страниц, релевантных введенному запросу, то такие карточки показаны не будут. Например, по запросу «новости спорта» ничего подобного пока нет.
Кому нужны AMP-страницы
Полезность AMP-страниц можно рассмотреть с двух точек зрения:
1. Если смотреть с точки зрения пользователя, то такое «быстрое» отображение контента прямо в поисковой выдаче (без дополнительных ожиданий и переходов на сайты) очень удобно для людей, привыкших получать информацию преимущественно с мобильного устройства. А число таких людей с каждым днем только растет.
2. Если же смотреть с точки зрения бизнеса, то проект AMP будет полезен только тем, у кого в основе бизнеса лежит контент – это новостные сайты, интернет-журналы, блоги, обучающие порталы и т.п.
Так что если ваш бизнес – это продажа автомобильных шин, то переводить карточки товаров на AMP абсолютно бессмысленно. Но если при этом вы ведете свой блог с уникальными статьями на различные темы авто индустрии, то сделать для него AMP-версию будет далеко не лишним. Как вы видели на скриншотах выше, карточки с релевантными AMP-страницами показываются в самом начале поисковой выдачи – а не это ли мечта любого владельца сайта.
Рассчитайте стоимость добавления и настройки облегченных мобильных страниц для Яндекса и/или Google. Запросить расчет ».
Как устроен AMP
Теперь, когда мы показали, как это выглядит, можно вкратце рассказать о том, как это устроено.
По сути, AMP – это лишь еще один набор скриптов и правил для отображения веб-страниц. Например, в разработке сайтов давно используется готовый набор скриптов (так называемая «библиотека») с названием jQuery – благодаря ей, верстальщику не надо каждый раз заново программировать слайдеры или, скажем, модальные окошки. Верстальщик просто берет готовый код из библиотеки и настраивает его параметры под конкретный сайт.
Но проект AMP имеет несколько отличий от существующих библиотек:
1. В нем оставлен только тот код, который нужен для быстрого отображения контента (подгрузка картинок по мере прокрутки страницы, слайдеры, загрузка сообщений из соц. сетей, модальные окна). Как говорится, ничего лишнего.
2. Код написан так, чтобы быть максимально быстрым (используются только асинхронные скрипты, если вам это о чем-то скажет).
3. Код написан с учетом особенностей различных мобильных устройств и браузеров так, что AMP-страница должна одинаково хорошо отображаться вне зависимости от устройства, на котором она открыта.
Три этих отличия позволяют AMP-страницам отображаться в мобильных браузерах быстрее. Но при этом они накладывают существенные ограничения на функционал страницы – например, вы не сможете вставить на AMP-страницу никаких своих скриптов, можно использовать только готовые компоненты, да и список доступных html-тегов несколько ограничен (все правила и требования есть тут).
Впрочем, для отображения контента этого вполне достаточно. Вот еще один пример AMP-страницы:
https://www.washingtonpost.com/amphtml/lifestyle/style/six-ways-the-martian-subverts-expectations/2015/10/05/6bba4d42-6873-11e5-8325-a42b5a459b1e_story.html
На ней есть все, что нужно на странице новостного издания, открытой с мобильника – картинки, текст, видео, кнопки соц.сетей, реклама (нужна, конечно, не пользователям, но владельцам сайта), выпадающее меню.
И еще одна важная особенность проекта AMP:
При индексации AMP-страниц Гугл запоминает (кэширует) их содержимое на своих серверах. Поэтому, когда в поисковой выдаче Гугла вы щелкаете по карточке AMP-страницы:
то Гугл «подтягивает» ее не с сервера Lenta.ru (что может занять немало времени, если вы, например, находитесь в этот момент в Австралии), а отображает сохраненный контент со своего ближайшего к вам сервера.
Так Tefal Гугл думает о нас и старается выдать пользователю контент максимально быстро.
AMP – третий в списке
Обратите внимание, что AMP – это не замена обычным html-страницам или мобильным версиям сайта, это лишь дополнение. Давайте рассмотрим на примере.
Возьмем новостной портал lenta.ru и вот такую статью:
https://lenta.ru/news/2016/01/16/falcon/
Это стандартная страница сайта с контентом, выпадающим меню, дополнительными статьями по теме, поиском, кнопкой «Наверх», блоками рекламы, кнопками соц. сетей, различными системами статистики и пр. и пр.
И если на планшете это обилие информации еще воспринимается нормально, то на экране телефона вряд ли все это понадобится (и уж явно не поместится).
Поэтому для мобильных устройств у lenta.ru давно есть мобильная версия сайта, где меньше дополнительного контента (и чуть меньше рекламы):
http://m.lenta.ru/news/2016/01/16/falcon/
Теперь же у lenta.ru появилась 3-я версия этой же страницы в формате AMP:
http://m.lenta.ru/news/2016/01/16/falcon/amp/
Здесь еще меньше каких-либо дополнительных скриптов (рекламы вообще нет, хотя ее и можно вставить в AMP), только контент.
Как же эти 3 версии одной страницы сосуществуют вместе?
Исходной страницей является http://lenta.ru/news/2016/01/16/falcon/. Именно эта страница участвует в основной поисковой выдаче. На основной странице размещаем максимум функционала, информации и прочих «плюшек» для пользователей (не забываем рекламу, монетизироваться как-то нужно).
В «подвале» этой страницы есть ссылка на мобильную версию, и кроме того, при заходе с мобильника на основную страницу происходит автоматическое перенаправление на мобильную версию. Поэтому в поисковой выдаче Гугла на мобильных устройствах будет показана именно ссылка на мобильную версию. В мобильной версии уменьшаем число дополнительного контента и рекламы, что вызвано меньшим размером экрана и более медленным интернетом.
При индексации основной страницы Гугл «увидит» эту ссылку и проиндексирует указанную AMP-страницу, чтобы затем показывать именно ее в своем новостном слайдере AMP-страниц на первой странице мобильной поисковой выдачи (в случае релевантности поисковому запросу).
Таким образом, lenta.ru выдает 3 разных версии одной и той же страницы под разные типы целевой аудитории (версии различны по функционалу, неизменным остается только основной контент).
Внедряем AMP на сайт
Создать AMP-версию своего сайта не так уж и сложно (при наличии грамотного специалиста). Нужно создать отдельный шаблон для сайта с использованием необходимых тегов из спецификации AMP. Затем либо вручную делать AMP-версию каждой новой страницы по готовому шаблону. Либо настроить автоматическую генерацию AMP-страницы средствами своей CMS.
Тем, чьи сайты сделаны на WordPress, повезло, в последнюю версию этой системы поддержка AMP-шаблонов уже встроена.
Также следует понимать, что нет необходимости переводить все страницы сайта в AMP-формат. Это касается только тех страниц, основной ценностью которых является контент (в основном, это статьи).
Если вы хотите добавить AMP-версию для своего сайта, но затрудняетесь это сделать – пишите, мы постараемся вам помочь. А может, ваш сайт вообще не адаптирован под мобильные? Тогда тем более пишите, посоветуем, что можно сделать.
AMP – новая разработка, направленная на ускорение загрузки контента на мобильных устройствах. Вещь достаточно узкоспециализированная, для тех, кто зарабатывает контентом.
Активно поддерживается пока только Гуглом. В русскоязычную версию выдачи Гугла AMP-страницы еще не входят (хотя это лишь вопрос времени). А вот отношение Яндекса к AMP-страницам не известно.
Вывод: пока не понятно, «выстрелит» или нет. Но поддержка со стороны не самого последнего поисковика позволяет думать, что все же «выстрелит». Время покажет. Но если AMP подходит вашему сайту, есть время и ресурсы, почему бы и не подготовить сани летом сайт заранее ))
