Как делать AMP контент для блога или новостного сайта

В прошлой статье по AMP мы рассмотрели статистическую и информационную часть вопроса: кому полезно использовать, какие есть варианты и стоит ли вообще. Эта статья направлена больше на техническую часть вопроса, чтобы показать, как можно создать AMP-контент на вашем сайте своими руками. Также будут указаны ссылки на первоисточники, в том числе на amp.dev – где присутствует отличный тренажер в онлайн-формате, который позволит вам попробовать самим создать первые наброски без физического вмешательства в ваш рабочий сайт.

Давайте, еще раз, для справки закрепим материал. Что такое AMP? Accelerated Mobile Pages (ускоренные мобильные страницы) – open source фреймворк, оптимизирующий страницу ресурса так, чтобы пользователю получил к ней максимально быстрый доступ (1 - 2 секунды), независимо от того использует он мобильную 3G сеть или WIFI 5Гц с гигабитным каналом.

Как делать AMP контент для блога или новостного сайта

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

AMP (Accelerated Mobile Pages) - достигает более высокой производительности за счет использования урезанной версии HTML, CSS и JS. Все лишнее со страницы вырезается все лишнее: реклама, графические элементы, сайдбары. Остается только контент самой страницы (текст и изображения, инфографика) и базовая навигация(не всегда). Технические ограничения у AMP, очевидно, присутствуют:

CSS ограничен лимитом в 75 КБ;
JS тоже ограничен лимитом в 150 КБ;
С критического пути рендеринга вырезается все лишнее.

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

Структура разметки AMP страниц не сильно отличается от привычного HTML. Вот пример всеми любимого “Hello World” с официального сайта технологии.

В целом ничего сложного нет, в есть парочка дополнительных элементов и подгруз JS скрипта. Начало 1 к 1 совпадает с классическим html документом - <!doctype html>. Присутствует тег <meta charset="utf-8">, указывающий на кодировку.

Что действительно важно при разметке ускоренных страниц.

Использование параметра amp в теге <html> - <html amp>. Так мы идентифицируем AMP контент;
Страница содержит обязательно два тега <head> и <body>. Это условие фреймворка, хотя для HTML это и необязательно;
Подгружаем скрипт библиотеки <script async src="https://cdn.ampproject.org/v0.js"> </script> внутри head;
Использование viewport внутри head - <meta name="viewport" content="width=device-width" />. Необходимо для адаптивных страниц;
И еще один важный момент — бойлерплейт (Boilerplate). Это CSS заглушка для скрытия контента до момента инициации и загрузки скрипта AMP.

С базой страницы мы разобрались, но это далеко не все. Теперь разберемся, как выглядит тег для размещения изображений. В классике HTML - это , в AMP почти то же самое.

Вуаля, мы разместили рандомное изображение со стока Unsplash на нашей AMP странице. Просто добавляем к тегу приставку , дальше скрипт отработает сам. Если будет нужно, то картинку можно сделать респонсивной, просто добавив в конце параметр. К чему этот пример? Все просто, структуру AMP страниц действительно схожа с классическими HTML страницами и даже если вы вебмастер или собственник новостного сайта. Базовое понимание технологии поможет вам в диалоге с вашими исполнителями. В структуре разметки используются все те же теги: <html>, <head>, <body>, <div>, <p>, <img>, <video> и т.д.

Только к основным тегам добавляются приставки amp для распознавания контента скриптом. Например, выше рассмотренный или . Кстати визуальный контент поддерживает отложенную загрузку. Просто, укажите loading="lazy" и контент будет подгружаться при пролистывании страницы по необходимости. Но мы настоятельно не рекомендуем заниматься ручной оптимизацией страниц на сайтах новостниках без должных бюджетов. Все крупные кейсы оптимизации больших медиа, блогов и социальных сетей чаще всего происходят в коллаборации вместе с разработчиками технологий amp.dev. Например, в прошлой статье (тут ссылка) разбирали кейс японской социальной сети, которая успешно использует один из форматов AMP для своего блога. Во всех остальных случаях рекомендуем использовать AMP вместе с CMS. Это намного менее безболезненно и практично.

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

Использование консоли разработчика в браузере. Разработчик встраивает AMP валидатор в скрипт, поэтому можно воспользоваться функций из коробки.
Использовать тот же валидатор по ссылке, загружая код в ручную - validator.ampproject.org;
Расширения для браузера — самый простой и удобный вариант на наш взгляд. Ссылка на официальное расширение;
Последние варианты нашего списка объеденим — это NPM пакеты для CL (Command Line), а второй метод валидатор для Command Line. Оба варианта применяются для продвинутой веб-разработки, поэтому погружаться в процессы без контекста не имеет смысла.

Просто вводим

Просто стоит запомнить, что вашей промежуточной целью всегда должна являться проверка страница на валидаторе. Например, в ситуации, когда вы сотрудничаете с фрилансерами, вы должны быть в состоянии проверить его действия. Какие-либо проблемы на валидаторе грозят тем, что ваша страница просто не пройдет кеширование и не будет отображаться в поисковой выдаче, что является синонимом слова “провал”.

Второй важной фишкой AMP-фреймворка является кеширование с помощью CDN. Что это значит? AMP-кэш хранится не у вас на сайте, а на серверах поисковых систем. С помощью него ваш сайт подгружается быстрее.

На деле это выглядит так. Ваша статья попадает в Google News, кешируется и контент подтягивается с серверов CDN при переходе пользователя. При этом обычный URL выглядел бы следующим образом: https://rotgar.com/pbn/. Но при кешировании, он будет выглядеть так: https://rotgar-com.cdn.ampproject.org/c/s/rotgar.com/pbn/

Естественно повышение скорости загрузки, не единственное для чего используется AMP-кеширование, вот еще три функции кеша:

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

В реалиях вот результат, которого можно добиться благодаря кешированию.

Меньше секунды на загрузку страницы. То что надо для новостного сайта при просмотре с телефона. Также несомненным плюсом является крайне маленькое потребление мобильного трафика, что значит, что качество сети почти не влияет на скорость загрузки сайта. Что касается провайдеров кеширования, то их только 2: Google и Bing, а самое интересное заключается в том, что как такового выбора вам не предоставлено. Кеш выбирает платформа, которая будет размещать и показывать ваш контент. Если это Google News, то и платформа будет Google. Начали делать активный упор на Bing News - значит Bing. Почему так? Потому что процесс показа вашего контента лежит на платформе, которой он отображается. За скорость загрузки контента уже будет отвечать условный Google на площадке News.

Добавить вашу страницу в AMP кеш можно и в ручную, но доступно это только с Google. Прочитать подробнее можно тут.

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

Чтобы разместить на своей странице блок с рекламой нужно выполнить действия описанные ниже:

Подключить в <head> компонент рекламы и скрипт аналитики;

Теперь подключаем рекламную сеть. На примере показано подключение рекламной сети “a9”.

Укажите размер рекламного блока, задав ширину и высоту в тег <amp-ad>.

Ну а далее уже технические настройки по рекламной сети.

Что нужно делать, чтобы не потерять, а может быть даже увеличивать заработок на своих страницах? Количество рекламных объявлений должно быть одинаковым. Просто используйте на AMP столько рекламных блоков, сколько используете на обычных страницах. И не забывайте проверять CSS блоков, чтобы верстка была в порядке, а блоки корректно отображались. А так же забудьте о тех баннерах, которые могут помешать людям изучать ваши страницы. Они просто вызовут негатив и не принесут вам ничего кроме оттока трафика.

Теперь вернемся к самому простому методу использования AMP страниц. Плагины для создания AMP-контента в CMS-системах. Вообще список поддерживаемых ресурсов достаточно солиден, но наc интересует только одна.

А именно Wordpress. Который занимает лидирующие позиции по всему миру для новостных сайтов и личных или корпоративных блогов. По данным W3Tech Популярность WP - 43% использования по всему миру относительно других CMS. То есть почти половина сайтов в мире используют Wordpress. Давайте установим официальный плагин вместе и посмотрим на его базовый функционал.

Переходим в раздел Плагины и ищем в поиске AMP. Синий логотип на искренне, именно тот плагин, который нам нужен.

Теперь перейдем к настройке плагина для дальнейшей работы. Выбираем режим шаблона:

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

Transitional - создает отдельную версию вашего сайта под AMP, что значительно экономит ваше время. Рекомендуемый нами вариант для использования.

Reader - стоит использовать если весь контент вашего сайта практически не совместим с AMP.

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

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

Исходный URL (оригинальный) - ваш URL издателя, выглядит следующим образом: https://rotgar.com/seo/amp/doc.html (просто пример URL)
URL AMP кеша. Как раз тот самый URL, который будет использоваться при кешировании страницы. Выглядит вот так: https://rotgar-com.cdn.ampproject.org/c/s/rotgar.com/seo/
Google AMP Viewer URL. Отображается при просмотре контента через поисковую систему. Вот пример: https://www.google.com/amp/www.rotgar.com/amp.doc.html

Теперь расскажем чуть подробнее о 2 виде URL. Потому что именно они и гарантируют вам ту самую производительность. Что касается AMP кеш URL, то тут все просто: Веб-мастеру нужно только сделать свой контент доступным по определенному URL-адресу, а затем кеш Google AMP обработает контент и начнет его показывать по новому URL-адресу, который отражает и преобразует оригинал. С другой стороны, использование кэша AMP с использованием исходного URL-адреса потребовало бы от веб-мастера изменить свои записи DNS или перенастроить свои серверы доменных имен. Этот вариант тоже возможен, но намного сложнее. Прибегать к нему без должных ресурсов и собственной команды не стоит. AMP Viewer URL ситуация обстоит чуть иначе, но если не погружаться глубоко в технические подробности, то необходимость дополнительного URL обозначена самой технологией, независим от того, где используется отображение контента будь то нативное приложение или веб-интерфейс.

Основным аналогом AMP является другая технология Google - Progressive Web Apps (PWA). Помогает вам создать из вашего сайта мобильное приложение и установить его на смартфон.

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

Конечно, данная статья не является конечным руководством пользователя. Ее задача дать вам понимание работы самой технологии на чуть более глубоком уровне для более практичного и удобного взаимодействия с исполнителями. Однако если у вас есть желание поэкспериментировать, то вы можете воспользоваться онлайн-тренажером и курсами по созданию AMP-страниц на сайте amp.dev (разработчики фреймворка).

Как делать AMP контент для блога или новостного сайта

Технология AMP и как ее использоваться для создания статей

Обзор структуры и особенностей AMP-страниц

Валидация страниц AMP

Кеширование AMP

Добавление блоков AMP Ads для монетизации

CMS и AMP

URL AMP

Аналог AMP