Требования 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 и Турбо-страницы — интересная технология, которую нужно использовать с умом. Может быть использована для «легкой» мобильной версии сайта, либо для определенных разделов, не требующих высокой функциональности. И, конечно, это отличное решение для информационных сайтов, блогов, интернет-журналов.
А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 вашему сайту: подробное руководство по технологии
Увеличение скорости работы сайта на мобильных устройствах остается одним из ключевых SEO-трендов, перешедших из 2018 в 2019 год. Для этого есть три весомые причины:
И вот Google дает нам готовый инструмент для создания идеального web-ресурса — быстрого, адаптивного, отвечающего требованиям самой поисковой системы и пользователей — AMP. Рассмотрим, что это за технология и какая может быть отдача от ее внедрения.
AMP (Accelerated Mobile Pages) — это технология ускоренных мобильных страниц, активно продвигаемая самой ПС Google. С помощью этой технологии создаются быстрые динамические страницы — шаблонные и ограниченные с технической стороны, но гибкие и разнообразные с точки зрения дизайна и функционала.
Для кого актуально
В первую очередь технологию AMP используют новостные сайты, блоги и другие информационные ресурсы, имеющие большое количество шаблонных контентных страниц. Этим список не ограничивается: на AMP можно создать как лендинг, так и мобильную версию для любого сайта, в том числе интернет-каталог с полноценными продуктовыми страницами.
Примеры сайтов на AMP
Как работает AMP
Страницы AMP построены с помощью трех основных технологий:
AMP HTML
Это HTML-разметка с ограничениями, расширениями, а также особенными web-компонентами, регламентированными в спецификации. Вот несколько примеров:
Тег в html
Тег-аналог в AMP HTML
При этом следует учитывать, что многие компоненты не имеют аналогов и не могут быть использованы в коде AMP (также описано в спецификации). Код страницы AMP легко узнать по значку ⚡ (молния) в теге :
Библиотека AMP JS
AMP Cache
Позволяет загружать страницы AMP из поиска практически мгновенно за счет использования CDN (сети доставки контента) Google.
Именно благодаря набору ограничений библиотеки и компонентов сделанный с помощью AMP сайт гарантированно будет быстрым и легким.
Сравнение скорости загрузки и функционала AMP и адаптивной версии на конкретном примере
Для наглядности сравним адаптивную и AMP-версию новостной страницы сайта bbc.com и оценим, насколько в действительности технология позволяет увеличить скорость загрузки сайта на мобильных устройствах.
Страницы для сравнения:
По данным сервиса Google PageSpeed Insights адаптивная версия имеет низкую скорость загрузки:
На полную загрузку страницы при просмотре с мобильного устройства уходит 9.5 секунд, а достаточное количество контента (т.е. первый экран и основной контент страницы) начинает отображаться только через 2.8 секунды после открытия страницы. Вспомним, что половина пользователей покинет страницу после трех секунд ожидания загрузки: можно сделать вывод, что такая низкая скорость может серьезно отразиться на показателе отказов и конверсии.
AMP-страница сайта отличается очень высоким показателем скорости:
Первый экран и основной контент страницы загружается за 1 секунду — это очень хороший результат, а через 3,9 секунды AMP полностью готова к взаимодействию с пользователем (удовлетворительный результат). В среднем ускоренная мобильная страница оказалась быстрее в 2,5 раза своей адаптивной версии и оценивается поисковой системой Google как страница с высокой скоростью загрузки (95 пунктов из 100 в сервисе Google PageSpeed Insights), что дает ей преимущество при ранжировании согласно Mobile-first indexing.
А что с визуальной составляющей и функционалом
А теперь сравним дизайн, функционал и удобство обеих версий страницы для пользователя.
AMP-версия новостных страниц bbc.com обладают рядом недостатков по сравнению с адаптивной версией, но выявленные недоработки можно исправить, ведь технология AMP позволяет создавать меню сайта (как в хедере, так и в футере), а также размещать строку поиска и перелинковывать страницы с помощью тегов. Дополнительно на данных ускоренных мобильных страницах рекомендуется разместить ссылку на основную версию в футере, чтобы пользователи имели возможность перейти к полному функционалу сайта.
Нужен ли AMP вашему сайту
Оценить актуальность технологии для вашего сайта помогут ответы на следующие вопросы:
Часто разработать полноценную мобильную или адаптивную версию сложнее и затратнее, чем внедрить шаблоны AMP. Если мобильная версия вашего сайта не получила «зеленую отметку» в сервисах (и вы уже проработали пункты рекомендаций по увеличению скорости загрузки), AMP — это оптимальное решение.
Блок «Главные новости» размещается в верхней части мобильной выдачи, попадание в карусель вашей новостной или контентной страницы может обеспечить значительное количество дополнительных переходов на AMP-страницу.
К примеру, вот результаты внедрения AMP из кейса сайта-агрегатора бронирования авиаперелётов и отелей wego.com:
Технология позволила улучшить скорость загрузки сайта в 10 раз, увеличить конверсию по партнерским программам на 95% и на 49% улучшить конверсию из мобильного поиска. Суммарно CTR рекламы на мобильных устройствах выросла в 3 раза.
Отметим, что создание адаптивной версии для коммерческого сайта все еще может быть более актуальным вариантом. Перед принятием решения необходимо детально изучить возможности технологии AMP и соотнести их с нуждами вашего бизнеса.
Например, по коммерческому запросу «купить телевизор в москве» в ТОП-5 мобильной выдачи Google представлена 1 ускоренная мобильная страница:
А вот пример для сайта кулинарной тематики: по запросу «Блины на кефире» в топ-5 представлено 5 AMP-страниц, первые две из которых отображаются в поиске с помощью разметки вида «Карусель рецептов».
AMP-шаблон можно использовать не для всего сайта, а только для страниц определенного типа: продуктовых, информационных и новостных, страниц рецептов и т.д.
К практике: как внедрить AMP
Для популярных CMS (Bitrix, WordPress, Drupal, Joomla и др.) имеются готовые решения, позволяющие быстро внедрить AMP на сайт. Следует отметить, что большинство плагинов платные и достаточно ограничены в своих возможностях, так что перед выбором и покупкой стоит взвесить все «за» и «против». Возможно, лучше создать свою AMP-версию с нуля.
Современное SEO: AMP-истории
Да, вот такой гибридный, русско-английский заголовок получился… Поэтому давайте сразу кое-что проясним. Итак, если SEO широко известный (в узких кругах) термин, то AMP — ещё не столь. Accelerated Mobile Pages был анонсирован Google в 2015 г. (см. статью в Википедии), как инструмент, позволяющий быстро просматривать веб-страницы на мобильных телефонах. Со временем AMP превратился в фреймворк, позволяющий создавать страницы для любых сайтов (не только для мобильных устройств), и расширил свою «номенклатуру»: собственно сайты (AMP Websites), истории (AMP Stories; тема этой статьи), рекламные блоки (AMP Ads), и электронные письма (AMP email). За всем этим, как было сказано выше, стоит Google, и если вас интересует продвижение сайтов в этой поисковой машине — полезно будет отнестись к теме AMP с должным вниманием. Но давайте сначала посмотрим как выглядят эти самые AMP-истории (UPD: с 1 мая 2020 AMP Stories переименованы в Web Stories, поэтому теперь по-русски их лучше называть Веб-истории), затем решим нужны ли они нам, и, если окажется, что нужны — рассмотрим как это сделать.
Пример AMP-истории
Кликните по QR-коду, чтобы посмотреть как выглядит AMP-история на реальном сайте с настольного компьютера или ноутбука, или сосканируйте его, чтобы просмотрите эту же страницу с мобильного устройства (смартфона и/или планшета):
На компьютере или ноутбуке вы должны увидеть такую «историю»:
А на планшете и смартфоне такую:
Кому это подходит
Использовать AMP-истории хорошо там, где несколькими кадрами (рекомендуется от 7 до 20, но это не строгое правило) можно передать смысл и красоту услуги или продукта. Например, тот же туризм и путешествия, отели (покажите номера, зоны отдыха, SPA), мода (покажите коллекцию одежды), рестораны и кафе (покажите интерьеры и блюда), салоны красоты (покажите… красоту). В общем смысл должен быть понятен, а каждый владелец бизнеса лучше меня знает, что ему следует показывать.
Как это влияет на поисковую оптимизацию (SEO)
Тенденция поисковых алгоритмов по моему мнению сегодня такова, что на ранжирование сайта всё меньше влияют ссылки с других сайтов (хотя, да, по-прежнему влияют), а всё больше следующие факторы (не обязательно в перечисленном порядке):
Скорость загрузки страниц
Взгляните на этот скриншот из документации Google, и прочитайте подчёркнутое (или кликните на изображение, чтобы перейти к этому документу):
Технология AMP с самого начала была разработана именно для увеличение скорости загрузки страниц на мобильных устройствах. Для этих целей, на мобильные устройства Google загружает AMP-страницы не с вашего сервера, а из своего кеша (Google AMP Cache). То есть Google предварительно сохраняет вашу AMP-страницу (в данном случае AMP-историю) у себя, и затем быстро отдаёт её пользователям мобильных устройств с помощью своей мощной глобальной сети серверов, т.н. CDN — Content Delivery Network.
Правда, это справедливо лишь для страниц, открываемых на мобильных устройствах (страницы, открываемые с компьютера, по-прежнему будут грузиться с вашего сервера), но мы знаем, что адаптация к мобильным устройствам очень важна, поскольку сегодня пользователи заходят на сайты с мобильных устройств чаще, чем с традиционных компьютеров и ноутбуков. Итак, с помощью технологии AMP мы решаем проблему скорости загрузки страниц (по крайней мере на мобильных устройствах), которая удовлетворяет жёстким требованиям Google. И это уже не мало! Но в документации также сказано и про: «иллюстрированные статьи в результатах Google поиска«, коими, очевидно, названы AMP-истории (взгляните на первое предложение на скриншоте, или кликните на изображение, чтобы перейти к этому документу):
Из данного контекста можно сделать вывод, что Google в своём поиске выделяет им (т.е. «иллюстрированным статьям«) специальное место в поисковой выдаче! Так почему бы не занять это место и вашим историям? Но технология AMP-историй ещё достаточно новая, и Google не раз объявлял о поэтапном её внедрении в результаты поисковой выдачи — по регионам планеты и темам самих историй. Но, я знаю, что вы знаете, когда лучше всего готовить сани… Кроме того, наличие на вашем сайте в качестве контента AMP-историй со структурированными данными просто не может остаться незамеченным (если мы всё правильно сделаем; об этом читайте далее) алгоритмами Google, и, очень даже вероятно, что это благотворно повлияет на позиции всего сайта в его поисковой выдаче.
А пока давайте проверим на Валидаторе AMP страниц от Google можно ли считать нашу историю корректной AMP-страницей с точки зрения самого Google:
Да, всё ОК. Обратите внимание, что внизу на данном скриншоте сказано и о том что «На странице найдены действительные структурированные данные«. К ним мы ещё вернёмся, но сначала давайте проверим, адаптирована ли наша AMP-история к мобильным устройствам.
Адаптация к мобильным устройствам
Для этой проверки есть ещё один инструмент от Google — Проверка оптимизации для мобильных устройств. Проверяем:
Всё ОК. И, честно сказать, я почему-то это знал заранее.
Наличие структурированных данных
Если посмотреть в документацию Google, то там можно обнаружить довольно большой раздел, посвящённый структурированным данным (кликните на изображение, чтобы перейти к этому документу):
Очевидно, что Google придаёт им существенное значение. Поскольку мы заинтересованы в Google не менее чем он в нас, давайте не будем отказывать ему в таких пустяках, и сделаем как он хочет. Если посмотреть на код нашей AMP-истории, то там, в разделе head, можно найти следующий фрагмент:
Далее документация говорит, что предпочтительный стандарт http://schema.org — принимаем и это.
А дальше всё очевидно и интуитивно понятно. Поясню только что:
— пути к файлам здесь можно указывать как относительные так и абсолютные;
— datePublished и dateModified при первой публикации совпадают, а в случае изменении контента — меняем только значение поля dateModified;
— формат полей datePublished и dateModified именно такой как показано, причём +3 — это смещение времени в часах от Гринвича (GMT — Greenwich Mean Time), в данном случае имеется в виду московское время;
— в качестве image (здесь это файл poster.jpg) рекомендуется использовать изображение с соотношениями сторон (ширина/длина) 3:4, размером не менее 696 x 928 пикселей, рекомендуется: 960 x 1200 или 1200 x 1600;
— в качестве logo (здесь это файл thumb.png) рекомендуется постоянно использовать одно и то-же (для конкретного сайта или бренда) квадратное изображение, размером не менее 112 x 112 пикселей (думаю, что 200 x 200 или 256 x 256 будет ОК).
При проверки валидности AMP мы уже видели что: «На странице найдены действительные структурированные данные«, но давайте проверим это с помощью специального инструмента от Google Проверка структурированных данных:
Как видим, в правом верхнем углу заглавными буквами написано: НЕТ ОШИБОК, НЕТ ПРЕДУПРЕЖДЕНИЙ — похоже, что Google довольный. Значит и мы тоже.
Дополнительно: данные для социальных сетей
Хотя к поисковым технологиям это не имеет отношения, но поскольку мы хорошо осознаём роль социальных сетей, давайте сделаем кое-что полезное и для них (но мы-то знаем — в конечном итоге это всё обернётся в нашу пользу). Итак, в разделе head AMP-истории (впрочем, как и любой другой страницы сайта) также можно разместить разметку, сообщающую социальным сетям таким как Facebook, Twitter, Pinterest, ВКонтакте дополнительную информацию о нашей AMP-истории. Теперь если пользователь одной из соцсетей поделится ссылкой на нашу страницу — «подтянется» ещё изображение и заголовок (а иногда ещё и описание), как на примере с ВКонтакте на этом скриншоте:
А вот как эта разметка выглядит в коде страницы:
Здесь, думаю, тоже всё интуитивно понятно. Но поясню следующее.
Разметка пустыми строками разделена на три секции.
Facebook (использует пространство имён og — Open Graph), Twitter (использует пространство имён twitter), и ВКонтакте (использует пространство имён vk).
Надо сказать что Open Graph де-факто является стандартом для подобной разметки, и другие социальные сети также используют её. Более того, если вы не укажите отдельно для Twitter и ВКонтакте — они также будут пытаться использовать Open Graph. Но мы указали для более контролируемого результата.
Надо также отметить, что пути к ресурсам здесь надо прописывать абсолютные, за исключением ВКонтакте — здесь путь к изображению можно прописать как абсолютный, так и относительный (в примере выше — относительный: content=»./hero_vk.jpg» ).
Чтобы создать такое приложение перейдите на страницу приложений аккаунта разработчика (который надо создать, если ещё не создан) Facebook for Developers и нажмите плитку: «Добавьте новое приложение«. Дайте своему приложению любое имя (своё я назвал «Визуальные Истории»), и сразу после создания вы увидите идентификатор вашего приложения, как показано на скриншоте ниже:
Дальнейшие настройки легки для понимания, и для наших целей — не обязательны.
Теперь давайте проверим валидность нашей разметки для социальных сетей.
И с ним, похоже всё хорошо.
Кроме приятных зелёных галочек, внизу ещё и написано: AMP Valid? True. Но главное, обратите внимание здесь на то, что Canonical URL — это адрес самой AMP-истории. Это критично для индексации в Google, и мы ещё вернёмся к этому в конце статьи.
Что касается ВКонтакте, насколько мне известно, у них нет подобного валидатора (или скажем так: мне неизвестно о том, что ВКонтакте имеется подобный валидатор), но мы проверили их в самом начале на практике — всё работает и там.
Как сделать
AMP-историю можно создать… вручную. Хотя у некоторых CMS есть расширения для создания AMP-страниц, но именно AMP-истории, насколько мне известно, ещё не поддерживаются. Есть также несколько онлайн сервисов для создания именно AMP-историй, например, MakeStories, но я их не тестировал, поскольку не люблю подобные зависимости от третьих лиц, в смысле чистоты кода, полноты функционала и своевременности обновлений. Поэтому, вот ссылка на шаблон в моём GitHub-репозитории, содержащий базовый функционал (изображения, видео, анимация — всё как в AMP-истории «Низкие звёзды лета»), которого вполне достаточно для большинства случаев, но и его можно легко расширить пользуясь официальным каталогом компонентов. Шаблон также можно склонировать:
git clone https://github.com/stmike/amp-story-template-ru.git
cd amp-story-template-ru
Но код будет работать некорректно, если его запускать непосредственно из файловой системы. Для целей разработки и тестирования сначала надо запустить локальный сервер. Если у вас нет своего проверенного, надёжного и привычного, и у вас браузер Chrome — могу порекомендовать Web Server for Chrome. Просто запустите, выберите папку с файлами (amp-story-template-ru) и откройте локальный адрес — всё как показано на скриншоте:
Поскольку мы уже говорим о браузере Chrome, могу порекомендовать ещё и расширение от разработчиков AMP — AMP Validator. Пользоваться им невероятно просто: если вы на валидной AMP-странице — на панели Chrome горит зелёный значок; если нет — красный, и при клике показывает номера строк с ошибками.
Код шаблона хорошо прокомментирован — поэтому можете читать его как сказку Андерсена, но всё же хочу обратить внимание на несколько нюансов.
1. Поисковая система Google будет считать AMP-историю (как и любую AMP-страницу) валидной, только если для доступа к ней используется безопасный протокол HTTPS (не HTTP).
2. В GitHub-репозитории наряду с привычным index.html файлом вы найдёте и файл bookend.json. В AMP-историях он отвечает за изящное окончание истории: повторить, поделиться через соцсети, полезные ссылки. Всё, как показано на скриншоте:
Пути к ресурсам в файле bookend.json могут быть как абсолютными, так и относительными.
После индексации на вашем сайте хотя бы одной AMP-страницы (включая AMP-истории) в меню (раздел Улучшения) Google Search Console появится пункт: Страница AMP. Там ошибок быть не должно: