АMP. Что это и с чем его едят?

Общая информация


AMP — это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается компанией Google в своем поисковике. Yandex пока что не подключился к этой инициативе, но, я уверен, в скором времени они внедрят либо этот стандарт, либо придумают что-то схожее по принципу работы.


Суть в том, что на сайте используются специальные теги, количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.


Google находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то в Гугле, браузер на фоне подгружает информацию из CDN Гугла, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.



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


По сути все подобные страницы являются статическими или условно-динамическими, так как допускают использование отправки форм, а также iframe.


Области применения: новостные сайты и порталы; каталоги (без использования фильтров); легковесная мобильная версия сайта (если удовлетворяет функционал); страницы-зацепки, чтобы заинтересовать пользователя и заманить на основной сайт.

Далее расскажу об основных особенностях AMP.


Отсутствие кастомных скриптов


Первое и самое главное отличие от стандартных сайтов — это невозможность вставки "обычных" скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.


Решение — использование доступных компонентов и iframe.


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


С их помощью можно сделать боковое меню, карусель, отправку формы, подгружаемый контент, рекламу и прочее.
Каждый компонент связан со своей js-библиотекой, которую нужно подключить для его использования на сайте.


Все доступные виды компонентов с примерами использования можно найти на этом сайте.




Отсутствие обычных <img> тегов в документе.


Все изображения на странице должны быть описаны в особом теге <amp-img>, что затрудняет вставку изображений пользователем через текстовый редактор. Для других элементов, где вывод изображений прописан “руками”, достаточно поправить верстку. Так же, если используются карусель или lightbox, нужно вставить аналоги из компонентов.




В коде страницы не должно быть inline-стилей


Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style=“color:…”, не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.




Структурированная схема данных (structured data)


Для включения статей в подборку “Top stories google” к страницам должны быть добавлены схемы данных с краткой информацией о статьях, авторе, издательстве, логотип компании, а также даты публикации и изменения статьи.


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


Пример схемы данных для страницы типа "статья":


<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

Некоторые значения являются обязательными. Для структурной схемы данных так же есть свой валидатор. Информация по заполнению и обязательные поля для схемы типа “статья” можно посмотреть здесь.


Там же можно найти информацию по другим типам схем. (Книги, Курсы, Музыка, Подкасты, Рецепты, Обзоры, ТВ и Фильмы, Видео)


Некоторые особенности:


  • Логотип компании
    Есть ряд требований к логотипу:
    https://developers.google.com/search/docs/data-types/articles#AMPlogo guidelines
    Хочу обратить внимание, что размер должен быть не больше и не меньше 60x600px хотя бы по одной из сторон. Желательно соблюдать высоту 60px (например, 450x60px). Изображения меньших размеров, но в тех же пропорциях, что и 60x600px (например 450x45px), проверку не пройдут.


  • Дата публикации и дата изменения
    Дата публикации является обязательным параметром.
    Дата изменения — рекомендованным.
    Хотя я бы отнес оба параметра к обязательным, так как Google кэширует содержание статей, и узнать, когда он пойдет проверять все статьи на сайте снова, невозможно. Поэтому, если дата последнего изменения будет отличаться, поисковику будет проще понять, что нужно сделать новый кэш. Иначе возможна ситуация, когда пользователь не увидит важных изменений.



Ссылки canonical и обратная к ней


Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">


А на AMP-странице — присутствовать обратная ссылка:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">




Css 50 кб


Css стили пишутся inline, и их размер не должен превышать 50кб.




Заключение


AMP — интересная технология, но только для узких задач. Может быть использована для "легкой" мобильной версии сайта, либо для определенных разделов, не требующих высокой функциональности. Хорошее решение для информационных сайтов, блогов, интернет-журналов. Там где нужно донести до пользователя контент максимально быстро и в простой форме. Для больших и сложных проектов AMP не станет заменой мобильной или адаптивной версии, по крайней мере, на данном этапе.


Часть функционала мне удалось реализовать на сайте нашей IT-компании Wellsoft, в разделе новостей (пример) (адаптивное изображение, форма, текст, структурированные данные; кроме того, если появится такая возможность, эта статья попадет в галерею “Top stories”).


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

Метки:
Поделиться публикацией
Комментарии 12
  • 0
    А тег «p» в два «div» заворачивать гугл требует или это ваша инициатива?
    <div class="text_col"><div class="imperavi_cover"><p>Уралец является домашним ареной ХК Автомобилист и регулярно принимает у себя игры КХЛ и МХЛ. Так же на площадке проходят концерты и различные шоу.</p></div></div>
    
    • 0
      Не круто, согласен. На самом деле, это для кастомизации текстового редактора, который сейчас дорабатывается.
    • 0
      Некоторое время назад я задался вопросом, а не сделать ли мне AMP версию сайта? Мой сайт — это блог на Wordpress и оказалось, что есть официальный AMP плагин! Установил, проверил результирующие страницы валидатором от Google — всё верно. Так что всем на заметку: если у вас Wordpress, то попробовать AMP очень просто.
    • 0
      На наших сайтах, процент конверсии на телефонах почти в 2 раза выше! на страницах АМР.
      • 0

        Я правильно понял, что сайт для заказа пиццы я на amp сделать не могу. Но могу прикрутить заглавную рекламную страницу с крупной кнопкой "заказать", и уже для нее сделать амп версию?

        • 0
          Все верно) Вот пример (перейдите с мобильного или загуглите сами), как ebay реализует каталог на AMP, по сути это статическая выдача, можете разобрать, как они используют AMP компонтетны и может что-то реализуете у себя)
        • 0
          Что я должен вбить в поиск гугла, чтобы увидеть что гугл понимает сайт ка AMP? «Wellsoft» и «Wellsoft новости» — не вижу признаков AMP в выдаче гугла.
          • 0

            А мне кажется это путь в ад, сначала от тегов откажемся, потом таблицами верстать, а дальше что картинки монохромные или стоит какой нибудь новый BBS придумать чтоб мобилкам было легче. Пускай лучше железки страдают чем людей заставлять силой примитивные сайты смотреть.

            • 0
              Ну, от тегов они не отказываются, просто пытаются привести все к шаблонам для удобной выдачи поисковиком, и медленного интернета. А что больше всего грузит страницу? Изображения, конечно. Я думаю AMP останется как вариант предпросмотра для сайтов, уже по желанию клиентов и разработчиков. Кто-то не испытывает потребности в адаптивной или мобильной версии, кто-то старается покрыть как можно больше устройств и предоставить удобство пользователям.
              А таблицами, бывает верстаем уже сейчас. О_о новые технологии, все дела ;)
              • 0
                привести все к шаблонам для удобной выдачи поисковиком,
                когда уже попытаются привести к шаблонам удобным для использования людьми наконец :)

                Мне тут недавно привели очень удачную аналогию AMP с wap сайтами, ну во времена wap там тоже были ограниченные во всем скрипты и оптимальная для мобильных разметка и еще тогда то это было прогрессом каким то а тут тоже самое да ещё на фоне того что теперешние мобилки умеют открывать обычные сайты умеют обычные сайты открывать, выглядит все это как явная деградация.

                Ну и вобщем в прошлый раз wap сайты умерли.
                Видится мне все предпосылки к этому есть и у AMP-а. Или нет?

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