AMP — это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается компанией Google в своем поисковике.
Суть в том, что на сайте используются специальные теги, количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.
Google находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то в Гугле, браузер на фоне подгружает информацию из CDN Гугла, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.
Страницы с AMP ранжируются выше других запросов в поиске за счет того, что соответствуют требованиям к быстрой загрузке и адаптированы под мобильные устройства.
По сути все подобные страницы являются статическими или условно-динамическими, так как допускают использование отправки форм, а также iframe.
Области применения: новостные сайты и порталы; каталоги (без использования фильтров); легковесная мобильная версия сайта (если удовлетворяет функционал); страницы-зацепки, чтобы заинтересовать пользователя и заманить на основной сайт.
Отсутствие кастомных скриптов
Первое и самое главное отличие от стандартных сайтов — это невозможность вставки «обычных» скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.
Решение — использование доступных компонентов и iframe.
Доступные компоненты позволяют добиться, пусть и не полной, реализации привычных фич, но представляют им достойную замену и оптимизированы для быстрой загрузки.
С их помощью можно сделать боковое меню, карусель, отправку формы, подгружаемый контент, рекламу и прочее.
Каждый компонент связан со своей js-библиотекой, которую нужно подключить для его использования на сайте.
Отсутствие обычных <img> тегов в документе.
Все изображения на странице должны быть описаны в особом теге <amp-img>, что затрудняет вставку изображений пользователем через текстовый редактор. Для других элементов, где вывод изображений прописан “руками”, достаточно поправить верстку. Так же, если используются карусель или lightbox, нужно вставить аналоги из компонентов.
В коде страницы не должно быть inline-стилей
Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style="color:…", не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.
Структурированная схема данных (structured data)
Для включения статей в подборку “Top stories google” к страницам должны быть добавлены схемы данных с краткой информацией о статьях, авторе, издательстве, логотип компании, а также даты публикации и изменения статьи.
Использование структурных данных не является обязательным условием, но для того чтобы поисковик корректно отображал данные и изменения при редактировании, нужно помещать эту схему на сайт. Фактически использование AMP без этой схемы становится бессмысленным.
Css 50 кб
Css стили пишутся inline, и их размер не должен превышать 50кб.
Как настроить AMP
Настройки AMP не представляют сложности и выполняются быстро.
• Индексирование AMP роботом Google.
Google индексирует страницы AMP, если другие веб-страницы связаны с ними специальным тегом либо ссылаются на них.
Если на сайте имеется AMP-версия веб-страницы, настройки выполняются следующим образом:
- добавьте ссылку на страницу AMP на обычную веб-страницу, чтобы робот Google узнал о ней: https://www.example.com/url/to/amp-version.html;
- добавьте ссылку на страницу AMP на каноническую версию обычной страницы https://www.example.com/url/to/regular-html-version.html.
Страницы AMP, не имеющие обычных версий, следует указать как канонические <link rel=canonical href=https://www.example.com/url/to/amp-document.html />. Робот Google проиндексирует данные страницы, если обнаружит их. Главное, чтобы страницы были указаны в файле Sitemap.xml, либо на них ссылались другие индексируемые страницы.
После завершения настроек убедитесь, что страницы AMP не заблокированы от робота Google в файле robots.txt.
• Проверка нахождения AMP роботом Google.
Страницы AMP, найденные Google, указаны в Search Console, в отчете «Ускоренные мобильные страницы». Чтобы просмотреть отчет, выберите «Вид в поиске», далее − «Ускоренные мобильные страницы». Если страницы AMP созданы только что, увидеть их в отчетах можно будет через несколько дней.
С помощью нового отчета можно быстро найти типичные ошибки на не проиндексированных страницах AMP. Для устранения ошибки следует изменить шаблон страницы либо установить совместимый плагин для системы управления контентом.
• Допуск AMP к показу в Google Поиске.
К показу в Google Поиске допускаются только правильно настроенные страницы AMP. Проверить корректность настроек можно с помощью инструмента AMP Validator или расширения Chrome. Можно использовать автоматизированные методы, например, скрипты cron.
Рекомендуется включать в страницы AMP структурированные данные формата JSON-LD. Это особенно актуально для издателей новостей: специальные свойства разметки позволят занимать особые места в результатах поисковой выдачи. То есть правильная разметка новостей позволяет показывать их в блоке ссылок либо в карусели «Главные новости».
Преимущества и недостатки AMP
Главное преимущество AMP – ускорение загрузки страниц на мобильных устройствах на 15−85 %, достигаемое за счет значительного уменьшения объема данных и кэширования контента.
Для ускоренной загрузки страниц пользователям с медленной передачей данных Google предоставляет свою сеть доставки и дистрибуции контента по географически распределенным серверам.
Скорость загрузки страниц учитывается при ранжировании ресурсов, но рассматривать AMP как технологию для повышения позиций сайта в результатах поисковой выдачи нельзя.
Google AMP имеет определенные недостатки. Данные о целевых посетителях, переходящих на страницы AMP из поисковиков, не попадают в сервисы статистики, в том числе в Google Analytics. Чтобы получать статистические данные, необходимо использовать готовые плагины либо добавить код отслеживания вручную.
Мобильные страницы Google AMP мало функциональны и содержат только основной контент. Оставлять комментарии, пользоваться навигационным меню, просматривать рекомендуемую информацию, рекламные блоки и боковую колонку, переходить по ссылкам социальных сетей нельзя. Визуальная составляющая ускоренных страниц также уступает стандартным. Но часть минусов веб-мастер может устранить самостоятельно.
На основании озвученных преимуществ и недостатков технологии становится понятно, что Google AMP больше всего подходит для поставщиков контента: новостным сайтам, корпоративным блогам, информационным изданиям. Сколько трафика приносят AMP-страницы и как они влияют на ранжирование в поисковой выдаче Google, пока не ясно.
Как внедрить AMP на сайте
Google AMP может использоваться на любом сайте. Платформа доступна для каждого веб-мастера и имеет открытый код.
Для популярных CMS (WordPress, Drupal, Joomla) имеются готовые решения, позволяющие быстро внедрить AMP на сайт.
WordPress-сайты
Установите и активируйте плагин AMP WordPress plugin (https://wordpress.org/plugins/amp/).
Отредактируйте файл .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-сайты
Используйте AMP-модуль (https://www.drupal.org/project/amp), АМР-тему (https://www.drupal.org/project/amptheme) и АМР-библиотеку на PHP (https://github.com/Lullabot/amp-library).
После установки модуля формат АМР становится доступным для всех типов страниц и «отдает» их, если добавить к URL страницы «?amp» на конце. АМР-тема обеспечивает специфическую разметку и становится автоматически активной, если обращение идет к странице с «?amp» на конце. Тема может быть расширена подтемой, что позволяет кастомизировать выдачу АМР-страниц.
АМР-библиотека используется, когда пользователи вводят HTML в предусмотренные для этого поля, выдает предупреждение, если текст не соответствует АМР, и автоматически корректирует HTML-текст там, где это возможно.
Joomla-сайты
Возможность выдавать АМР-страницы обеспечивается использованием плагина wbAMP (https://weeblr.com/joomla-accelerated-mobile-pages/wbamp).
Владельцам интернет-изданий, не использующим готовые CMS, необходимо интегрировать AMP вручную по следующему алгоритму:
1. Создайте шаблоны страниц в формате AMP (код основных шаблонов следует переписать с использованием amp-тегов).
2. Отключите динамические элементы.
3. Задайте параметры шрифтов, изображений и стилей согласно требованиям AMP. Стили ограничены размером в 50 КБ и выносятся в отдельный тег style amp-custom. Высота и ширина графических элементов прописываются внутри HTML-документа. Шрифты загружаются по ссылке либо при помощи CSS @font-face.
4. Масштабируйте шаблоны с помощью автоматического алгоритма либо вручную.
5. Настройте аналитику с помощью отслеживающего пикселя или разновидности кода Google Analytics.
6. Протестируйте валидность с помощью AMP Test. Специальный тег в коде основной страницы указывает на AMP-страницу сайта.
Подведем итоги. Технология Google AMP ускоряет загрузку страниц с мобильных устройств и актуальна для контентных проектов: блогов, новостных сайтов, журналов и других цифровых изданий. Проектам из области электронной коммерции, интернет-магазинам внедрять AMP не нужно. Насколько Google AMP будет полезна издателям медиа, покажет время.