AMP страницы для Google и Яндекс Турбо: все, что нужно знать

В этой статье мы рассмотрим, что такое AMP страницы в поисковой системе Google, а также дадим короткую сводку о том, как работают турбо страницы Яндекс.

Что такое AMP страницы?

В конце января 2016 года в Google Search Console появилась новая опция, позволяющая ускорить мобильные страницы AMP. До этого момента появлялось мало информации об подобном ускорении. Это очень доступная платформа для создания быстро загружаемых мобильных веб-сайтов. Инициатива с открытым исходным кодом направлена ​​на то, чтобы программисты могли легко увеличить скорость (и, следовательно, удобство для пользователей) читателей на мобильных устройствах, не жертвуя при этом рекламным доходом, на который они могут рассчитывать.

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

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

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

Как работают AMP страницы Google?

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

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

По сути, основа для создания мобильных веб-сайтов, AMP состоит из трех основных частей:

• AMP HTML: данный язык разметки имеет некоторые пользовательские теги и свойства, а также множество ограничений. Но если вы знаете простой HTML, не составит труда настроить существующие страницы на AMP HTML. Для получения дополнительной информации о том, чем он отличается от базового HTML, проверьте список обязательных элементов бренда AMP Project, которые должны содержать страницу AMP HTML.
• AMP JS: JavaScript-фреймворк для мобильных сайтов. В большинстве случаев он управляет поддержкой ресурсов и асинхронной загрузкой. Обратите внимание, что сторонняя поддержка JavaScript не разрешена для AMP.
• AMP CDN: дополнительная сеть доставки контента будет принимать страницы с поддержкой AMP, кэшировать их и автоматически оптимизировать производительность.

AMP страница: как сделать?

1. Вначале вы должны сохранить как минимум две версии любой страницы: оригинальную версию страницы сайта, которую обычно видят пользователи, и версию AMP этой страницы.
2. Поскольку AMP не допускает использование таких элементов, как сторонние формы и элементы JavaScript, у вас, вероятно, не будет ведущих форм, комментариев на странице и некоторых других элементов, которые используются на ресурсе в стандартной реализации.
3. Также весьма вероятно, что придется переписать шаблон сайта, чтобы учесть ограничения. Например, все CSS в AMP должны быть в строке и иметь размер менее 50 КБ. Из-за интенсивности загрузки пользовательских шрифтов они должны загружаться с использованием специального расширения шрифта.
4. К мультимедиа нужно относиться особенно внимательно. Например, изображения должны использовать пользовательский элемент amp-img и иметь четкую ширину и высоту. (При преобразовании старого сайта в шаблон AMP это может стать серьезной проблемой, если атрибуты width и height больше не используются). Кроме того, если ваши изображения представляют собой анимированные GIF-элементы, необходимо использовать отдельный расширенный компонент amp-anim.
5. Как и в ситуации с изображениями, существует специальный тег, который необходимо использовать для встраивания локально размещенных видео через HTML5, называемый видеоусилителем. Тем не менее, при встраивании видео на YouTube, который составляет большую часть веб-видео, есть отдельный расширенный компонент amp-youtube.
6. Существует также поддержка таких вещей, как слайд-шоу через amp-carousel и лайтбоксы изображений через amp-image-lightbox, а также социальные сети в Twitter, Instagram, Facebook, Pinterest и Vine через их собственные расширенные компоненты.

Эти теги и расширенные компоненты не сложны в использовании. Они требуют лишь небольшого планирования в дизайне сайта.

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

<link rel = “amphtml” href = “http://www.example.com/blog-post/amp/“>

На сайте AMP Discovery также упоминается, что для некоторых платформ с поддержкой AMP требуются метаданные Schema.org для определения типа содержимого страницы. (В настоящее время «article», «recipe», «review» и «video» перечислены как примеры типов страниц на GitHub.)

Более того, это также означает, что метаданные Schema.org необходимы для того, чтобы ваш контент мог отображаться в выдаче в Поиске Google.

Так что, если вы пытаетесь получить будущие преимущества от Google с помощью AMP, убедитесь, что вы провели все работы по ресурсу!

Как заработать на рекламе AMP?

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

Цель проекта «Ускоренные мобильные страницы AMP» – обеспечить эффективную монетизацию рекламы в мобильной сети с помощью ориентированного на пользователя подхода. В этом контексте цель состоит в том, чтобы обеспечить поддержку широкого спектра рекламных форматов, рекламных сетей и технологий на ускоренных мобильных веб-сайтах.

В результате многие из самых популярных рекламных сетей сейчас используют расширенный компонент amp-ad (с большей совместимостью).

Если ваша монетизация более сложна – с использованием платных сетей или подписок – документация доступна для реализации в AMP с использованием расширения «AMP Access».

Есть ли у AMP аналитика?

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

1. Элемент Amp-Pixel: это простой тег, который можно использовать для подсчета просмотров страниц, как в случае обычного пикселя отслеживания, с использованием запроса GET. Через него можно передать много переменных, таких как DOCUMENT_REFERRER и Title.

1. Компонент Extended Amp-Analytics: он немного более продвинутый, чем пиксель. Для реализации вы, вероятно, будете использовать аналитику на своем сайте, поскольку она обеспечивает более высокий уровень конфигурации для аналитических взаимодействий.

Как будет выглядеть AMP в Google?

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

AMP-страницы в результатах поиска Google

Содержимое AMP может появляться в результатах поиска Google в виде карусели или результатов с расширенными элементами. Карусель – это контейнер для многих результатов с расширенными элементами одного типа. В рамках одной карусели вы также можете просматривать рецепты, статьи и визуальные материалы с различных веб-сайтов (например, самые важные статьи). Результат с расширенными элементами включает в себя стиль, изображения и другие функции.

Яндекс Турбо – оперативный ответ ПС Google

Поисковая система Яндекс не заставила себя долго ждать и уже в ноябре 2017 года объявила о запуске Турбо-страниц. Цель проекта аналогична, что и в случае с AMP. Быстрая скорость загрузки, снижение нагрузки на хостинг, доступность 24/7 (даже, если нет ответа от основного сайта), значок ракеты – основные преимущества. Помимо них стоит упомянуть и о недостатках: однотипность сайтов, отсутствие возможности оформления заказа. Создание Турбо страниц Яндекс – хороший вариант для информационных статейных ресурсов.

Вывод

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

Вікторія Драч

Главный редактор.