8(800)200-4428
(звонок бесплатный) пн.-пт. с 10:00 до 19:00
Обратный звонок
Главная Блог AMP страницы что это такое и зачем?
7913
02.03.2017
Время чтения: 5 минут
Поделиться

AMP страницы что это такое и зачем?

Валерий Середов

Еще в 2015 году Google представила новую возможность для оптимизации и ускорения загрузки страниц на мобильных устройствах. Речь идёт о специальной библиотеки AMP HTML.

Запуск данного продукты произошел в феврале 2016 года.

Пример AMP страницы

Зачем это нужно?

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

Пример выдачи с AMP страницей

Функциональность AMP

  • AMP HTML - стандартный код c рядом ограничений, для стабильной работы на всех устройствах. Включает в себя дополнительные теги:
    • amp-ad – отвечает за рекламу.
    • amp-img – альтернатива тега img.
    • amp-pixel – счетчик посещений.
    • amp-video – альтернатива тега HTML5 video.
  • AMP JS 
  • AMP CDN

Компоненты, подключаемые при помощи расширений (отдельных js-библиотек)

  • amp-anim Анимированное изображение (GIF)
  • amp-audio Замена HTML5-тегу audio
  • amp-carousel Обыкновенная карусель — отображение превью картинок, выстроенных по горизонтали
  • amp-fit-text Автоматическое уменьшение или увеличение размера шрифта текста, для того чтобы он поместился в ограниченную область
  • amp-iframeЗамена iframe amp-image-lightbox Лайтбокс. Полноразмерный просмотр большого изображения при клике на превью или ссылку
  • amp-instagram Отображает пост в инстаграме
  • amp-lightbox Еще один лайтбокс
  • amp-twitter Отображает твит
  • amp-youtube Отображает видео с Ютуба
  • amp-carousel поддержка прокрутки

Как начать работать с AMP

  • Если у вас популярная CMS (система управлением сайта) то скорей всего уже выпустили плагин для неё и вам нужно просто его установить. 
  • Если у вас самописная CMS то придется писать дополнение самому. 

Кому подходит и не подходит AMP страницы?

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

Нужно ли делать все страницы сайта с AMP?

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

Прочие вопросы

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

AMP страницы работаю без XML карты

  • В AMP страницах есть прямые ссылки на сайт

AMP страница с прямой ссылкой на сайт

  • В поиске по картинкам AMP страницы так же участвуют

Как это отражается на практике для сайтов которые внедрили себе AMP.

Данное исследование происходит через год после того как ряд западных изданий внедрили у себя данную технологию.
The Daily Dot, Gizmodo, the Miami Herald, Slate, and Wired и остальные издания , видели улучшения в некоторых показателях.
  • 90 процентов трафика AMP к Daily Dot от новых посетителей. 
  • Более 80 процентов трафика AMP к Gizmodo от новых посетителей, в то время как они составляют менее 50 процентов всех мобильных сессий. Кроме того , количество показов на просмотр страниц , указанная на странице AMP Gizmodo на 50 процентов выше , чем на страницы , не являющейся АМФ. 
  • Люди , перешедшие на AMP страницы из поиска на Miami Herald проводят на 10% больше времени, чем люди которые перешли прост она мобильную версию сайта. 
  • Slate увидел рост на 44 процента аудитории за счет новых посетителей из поиска Google. А количество сеансов на одного уникального пользователя возросло на 73 процента. 
  • CTR по объявлениям на страницах AMP на 63 процентов выше , чем на не-Amp страниц, а из результатов поиска CTR возрос на на 25 процентов выше.
  •  Издание Verge сообщило о приросте в 14 процентов своего трафика. 
Однако The Wall Street Journal - показала в своем отчет, что AMP страницы не принесли им желаемого результата, доходы упали с AMP страниц, так как нет возможности реализовать все рекламные блоки на AMP страницах.

SEO и AMP

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

Выдача с AMP страницами без карусели

Как избежать дублей в индексе

Google

Необходимо использовать тег rel="canonical"и тогда в индексе будет участвовать только основная страница а не дубль.

Однако Джон Мюллер говорит если вы укажите AMP страницу как канонической то Google будет оценивать качество сайта по ней.
 

Яндекс

Поскольку наличие страниц AMP никак не влияет. И робот в большинстве случаев следует атрибуту rel="canonical" тега ).

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

Подводим итоги

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

Полезные ссылки

Подпишитесь на нашу рассылку