Amp что это
Перейти к содержимому

Amp что это

А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 без этой схемы становится бессмысленным.

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

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

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

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

Ссылки 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.

UPD: мы потратили много времени на изучение и внедрение технологии, но в итоге решили, что нам AMP не нужен, поэтому на новом сайте (релиз был 1 ноября 2017), страниц с AMP уже нет. Можем поделиться подробностями, кому интересно (контакты на сайте).

Что такое Google AMP и как эта технология поможет контентным проектам

Редактор блога «Нетологии» Александр Марфицин рассказывает, что такое Google AMP, чем эта технология поможет издателям контентных проектов и как её правильно внедрить на сайт. Разобраться в этом помог Сергей Романов, SEO-специалист компании Promodo.

В октябре 2015 года Google объявил, что разработчикам стала доступна технология имплементации страниц сайта AMP, заточенных под мобильные устройства. Технология AMP (Accelerated Mobile Pages) призвана ускорить загрузку страниц на 15-85%.

Что такое AMP

Если рассматривать технологию AMP с точки зрения разработчика, то она состоит из трех компонентов:

  • AMP HTML – всё тот же HTML5, но с некоторыми модификациями. Часть стандартных тегов заменена на специально разработанные для AMP.
  • AMP JS – новая библиотека, дающая доступ к новым тегам и позволяющая оптимизировать скорость загрузки ресурсов.
  • Google AMP Cache – CDN-сеть на основе прокси-серверов, кэширующая AMP-страницы. Это ускоряет загрузку контента, скриптов и изображений на стороне пользователя, так как они «вытягиваются» из ближайшего источника с помощью HTTP 2.0.

Для обычного пользователя AMP выглядит как аналог Facebook Instant Articles от Google.

Как это выглядит на практике:

Что такое Google AMP и как эта технология поможет контентным проектам

Что такое Google AMP и как эта технология поможет контентным проектам

AMP меняет взаимодействия пользователя с издателями с помощью двух вещей:

  • Пользователь не переходит на сайт — он видит содержимое в поисковой выдаче Google;
  • Навигация по статьям выглядит как в слайдере-карусели – можно листать AMP страницы влево и вправо, переходя от одной новости к другой.

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

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

Кому нужен AMP

SEO-специалист компании Promodo Сергей Романов рассказал, каким проектам подойдёт AMP.

Сергей Романов

Сергей Романов,

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

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

Также я спросил у руководителя издания «Лайфхакер» Алексея Пономаря, насколько AMP может быть полезна цифровым медиа:

Алексей Пономарь

Алексей Пономарь,

Мы у себя на Lifehacker.ru не видим пока радикальный рост трафика на страницы с AMP. Пока очень рано говорить о потенциале. Технологически пока очень далеки от совершенства, набор предоставляемых платформой инструментов крайне скуп. В результате — очень высокий bounce rate посетителей, пришедших на AMP.

Что такое Google AMP и как эта технология поможет контентным проектам

Так выглядит оптимизированная под AMP статья на «Лайфхакере». Вёрстка упрощена, из контекстной рекламы работает только Google Adwords. Медийная реклама не отображается.

Что AMP, что Instant Articles якобы направлены на удобство читателя, но по факту являются еще одним средством принуждения сдавать свой контент напрямую платформе. Насколько готовы играть в это, в частности, большие медиа — увидим в ближайшие пару лет.

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

Что нужно учесть

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

  • В AMP разрешены только асинхронные скрипты – это ускоряет загрузку контента в разы.
  • Стили не могут быть указаны по месту применения, а выносятся в отдельный тег style amp-custom. Кроме того, они ограничены размером в 50 КБ.
  • Высота и ширина графических элементов (картинки и анимации) должны быть прописаны внутри HTML-документа.
  • Кастомные скрипты не поддерживаются. Нужно использовать библиотеку AMP JS.
  • Шрифты загружаются по ссылке или при помощи CSS @font-face.

Как за 4 шага внедрить AMP на сайте

1. Проверяем, есть ли готовое решение

Да – используем его, контролируя валидность на выходе. Есть решения для популярных CMS: WordPress, Drupal, Joomla.

Нет – внедряем AMP вручную. О том, как это сделать, рассказано в следующей главе.

2. Проверяем, нужна ли формы для сбора лидов

Да – используем «костыль», позволяющий вставить кастомный js-код через amp-iframe. Подробнее об этом можно прочесть тут.

Нет – пропускаем шаг.

3. Проверяем, какой способ отслеживания страниц подходит

AMP-pixel отслеживает статистику просмотров страницы по GET-запросу. Подходит для выгрузки данных в сторонние или кастомные сервисы аналитики.

AMP Analytics передаёт данные в Google Analytics и отслеживает активность пользователей прямо на сайте.

4. Проверяем валидность кода страниц в инструменте AMP Test в Google Search Console.

Как внедрить AMP вручную

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

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

2. Масштабируем эти шаблоны при помощи автоматического алгоритма или вручную.

3. Настраиваем аналитику с помощью внедрения отслеживающего пикселя или разновидности кода Google Analytics.

4. Тестируем валидность при помощи AMP Test. Обратите внимание, на amp-страницу указывает специальный тег в коде основной страницы сайта.

Резюме

1. Google AMP ускоряет загрузку контента для пользователей, особенно с мобильных устройств.

2. AMP стоит внедрять контентным проектам: блогам, медиа, другим цифровым изданиям. Интернет-магазинам внедрять AMP не нужно.

Зачем вам нужен AMP Google? И нужен ли?

В начале прошлого года Гугл начал активную работу по улучшению своей поисковой выдачи на мобильных устройствах. Первым «звоночком» был алгоритм mobile-friendly. Суть – если человек зашел в поиск с мобильного телефона, так давайте покажем ему на первых позициях те сайты, которые удобнее на этом самом мобильнике смотреть (естественно, при прочих равных).

Вообще, подход вполне логичный – если из пользователей вашего сайта многие открывают его со смартфонов или планшетов, то сделать сайт адаптивным (читай «удобным») для мобильных устройств – хорошее проявление заботы о своих пользователях, а соответственно, и о поведенческих факторах своего сайта. Гугл лишь подтолкнул процесс «мобилизации» сайтов.

В продолжение mobile-friendly в октябре 2015 Гугл анонсировал новый проект, призванный сделать жизнь «мобильных» пользователей еще слаще )) Речь идет о технологии AMP, Accelerated Mobile Pages – Ускоренные страницы для мобильных устройств. Мы не будем вдаваться в технические тонкости, а попробуем ответить понятным языком на основные вопросы: как это выглядит, кому и зачем это нужно, как внедрить на свой сайт.

Замечание: все скриншоты в статье сделаны с планшета (с мобильного устройства).

Как выглядит AMP Google

Вообще, страница сайта, использующая технологию AMP, внешне мало чем отличается от обычной страницы. Вот пример AMP-страницы:
http://m.lenta.ru/news/2016/01/16/falcon/amp/

Ничего особого в ней нет. Более интересно, как Гугл решил выводить AMP-страницы в своей мобильной поисковой выдаче. Смотрите, если мы ищем какие-то новости в Гугле, например, «новости дня», то под строкой поиска видим блок «Главные новости» с карточками:

Щелкаем по какой-либо карточке, и страница выбранного сайта открывается в новой вкладке. Зачастую, особенно если скорость интернет соединения не слишком высока, в течение 4-7 секунд мы наблюдаем такую картину:

Что придумали в Google – с внедрением AMP в поиск блок «Главные новости» изменится (обратите внимание на значок AMP):

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

Обратите внимание на 4 момента (отмечены на скриншоте):

1. Физически мы не переходим на другой сайт, а остаемся в Гугле, который подгружает нам содержимое выбранной страницы.

2. Оказывается, это слайдер. Мы можем листать влево и вправо, тем самым быстро переключаясь между контентом остальных AMP-страниц блока «Главные новости».

3. По этой кнопке можем вернуться на страницу поиска.

4. И это самое важное – контент AMP-страницы отображается здесь буквально за доли секунды.

Выглядит заманчиво. Теперь ложка дегтя:

Пока такой слайдер с AMP-страницами выводится только в англоязычном google.com, в русскоязычной версии его нет. Ждемс..

Те, кто хочет уже сейчас «потрогать» руками русскоязычную выдачу с AMP-страницами, держите инструкцию:

  • С планшета или смартфона заходим на адрес http://g.co/ampdemo. Откроется поиск Гугла, но с уже включенной поддержкой AMP.
  • Вбиваем в поисковой строке запрос «новости дня» (или просто «новости») – профит! В блоке «Главные новости» видим карточки с пометкой «AMP», щелкаем, наслаждаемся ))

Еще один нюанс: Если Гугл не нашел достаточное число AMP-страниц, релевантных введенному запросу, то такие карточки показаны не будут. Например, по запросу «новости спорта» ничего подобного пока нет.

Кому нужны AMP-страницы

Полезность AMP-страниц можно рассмотреть с двух точек зрения:

1. Если смотреть с точки зрения пользователя, то такое «быстрое» отображение контента прямо в поисковой выдаче (без дополнительных ожиданий и переходов на сайты) очень удобно для людей, привыкших получать информацию преимущественно с мобильного устройства. А число таких людей с каждым днем только растет.

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

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

Рассчитайте стоимость добавления и настройки облегченных мобильных страниц для Яндекса и/или Google. Запросить расчет ».

Как устроен AMP

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

По сути, AMP – это лишь еще один набор скриптов и правил для отображения веб-страниц. Например, в разработке сайтов давно используется готовый набор скриптов (так называемая «библиотека») с названием jQuery – благодаря ей, верстальщику не надо каждый раз заново программировать слайдеры или, скажем, модальные окошки. Верстальщик просто берет готовый код из библиотеки и настраивает его параметры под конкретный сайт.

Но проект AMP имеет несколько отличий от существующих библиотек:

1. В нем оставлен только тот код, который нужен для быстрого отображения контента (подгрузка картинок по мере прокрутки страницы, слайдеры, загрузка сообщений из соц. сетей, модальные окна). Как говорится, ничего лишнего.

2. Код написан так, чтобы быть максимально быстрым (используются только асинхронные скрипты, если вам это о чем-то скажет).

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

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

Впрочем, для отображения контента этого вполне достаточно. Вот еще один пример AMP-страницы:
https://www.washingtonpost.com/amphtml/lifestyle/style/six-ways-the-martian-subverts-expectations/2015/10/05/6bba4d42-6873-11e5-8325-a42b5a459b1e_story.html
На ней есть все, что нужно на странице новостного издания, открытой с мобильника – картинки, текст, видео, кнопки соц.сетей, реклама (нужна, конечно, не пользователям, но владельцам сайта), выпадающее меню.

И еще одна важная особенность проекта AMP:
При индексации AMP-страниц Гугл запоминает (кэширует) их содержимое на своих серверах. Поэтому, когда в поисковой выдаче Гугла вы щелкаете по карточке AMP-страницы:

то Гугл «подтягивает» ее не с сервера Lenta.ru (что может занять немало времени, если вы, например, находитесь в этот момент в Австралии), а отображает сохраненный контент со своего ближайшего к вам сервера.
Так Tefal Гугл думает о нас и старается выдать пользователю контент максимально быстро.

AMP – третий в списке

Обратите внимание, что AMP – это не замена обычным html-страницам или мобильным версиям сайта, это лишь дополнение. Давайте рассмотрим на примере.

Возьмем новостной портал lenta.ru и вот такую статью:
https://lenta.ru/news/2016/01/16/falcon/

Это стандартная страница сайта с контентом, выпадающим меню, дополнительными статьями по теме, поиском, кнопкой «Наверх», блоками рекламы, кнопками соц. сетей, различными системами статистики и пр. и пр.

И если на планшете это обилие информации еще воспринимается нормально, то на экране телефона вряд ли все это понадобится (и уж явно не поместится).

Поэтому для мобильных устройств у lenta.ru давно есть мобильная версия сайта, где меньше дополнительного контента (и чуть меньше рекламы):
http://m.lenta.ru/news/2016/01/16/falcon/

Теперь же у lenta.ru появилась 3-я версия этой же страницы в формате AMP:
http://m.lenta.ru/news/2016/01/16/falcon/amp/

Здесь еще меньше каких-либо дополнительных скриптов (рекламы вообще нет, хотя ее и можно вставить в AMP), только контент.

Как же эти 3 версии одной страницы сосуществуют вместе?

Исходной страницей является http://lenta.ru/news/2016/01/16/falcon/. Именно эта страница участвует в основной поисковой выдаче. На основной странице размещаем максимум функционала, информации и прочих «плюшек» для пользователей (не забываем рекламу, монетизироваться как-то нужно).

В «подвале» этой страницы есть ссылка на мобильную версию, и кроме того, при заходе с мобильника на основную страницу происходит автоматическое перенаправление на мобильную версию. Поэтому в поисковой выдаче Гугла на мобильных устройствах будет показана именно ссылка на мобильную версию. В мобильной версии уменьшаем число дополнительного контента и рекламы, что вызвано меньшим размером экрана и более медленным интернетом.

На AMP-версию указывает тег <link rel=»amphtml»> в коде основной страницы:
<link href=»http://m.lenta.ru/news/2016/01/16/falcon/amp/» rel=»amphtml» />

При индексации основной страницы Гугл «увидит» эту ссылку и проиндексирует указанную AMP-страницу, чтобы затем показывать именно ее в своем новостном слайдере AMP-страниц на первой странице мобильной поисковой выдачи (в случае релевантности поисковому запросу).

Таким образом, lenta.ru выдает 3 разных версии одной и той же страницы под разные типы целевой аудитории (версии различны по функционалу, неизменным остается только основной контент).

Важно: На всех трех страницах указан тег <link rel=»canonical»> с адресом основной страницы, чтобы избежать дублирования контента:
<link href=»http://lenta.ru/news/2016/01/16/falcon/» rel=»canonical» />

Внедряем AMP на сайт

Создать AMP-версию своего сайта не так уж и сложно (при наличии грамотного специалиста). Нужно создать отдельный шаблон для сайта с использованием необходимых тегов из спецификации AMP. Затем либо вручную делать AMP-версию каждой новой страницы по готовому шаблону. Либо настроить автоматическую генерацию AMP-страницы средствами своей CMS.

Тем, чьи сайты сделаны на WordPress, повезло, в последнюю версию этой системы поддержка AMP-шаблонов уже встроена.

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

Если вы хотите добавить AMP-версию для своего сайта, но затрудняетесь это сделать – пишите, мы постараемся вам помочь. А может, ваш сайт вообще не адаптирован под мобильные? Тогда тем более пишите, посоветуем, что можно сделать.

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

Активно поддерживается пока только Гуглом. В русскоязычную версию выдачи Гугла AMP-страницы еще не входят (хотя это лишь вопрос времени). А вот отношение Яндекса к AMP-страницам не известно.

Вывод: пока не понятно, «выстрелит» или нет. Но поддержка со стороны не самого последнего поисковика позволяет думать, что все же «выстрелит». Время покажет. Но если AMP подходит вашему сайту, есть время и ресурсы, почему бы и не подготовить сани летом сайт заранее ))

Добавить комментарий

Ваш адрес email не будет опубликован.