что такое amp сайт

АMP. Что это и с чем его едят?

Общая информация

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

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

Google находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то в Гугле, браузер на фоне подгружает информацию из CDN Гугла, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.

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

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

Области применения: новостные сайты и порталы; каталоги (без использования фильтров); легковесная мобильная версия сайта (если удовлетворяет функционал); страницы-зацепки, чтобы заинтересовать пользователя и заманить на основной сайт.

Далее расскажу об основных особенностях AMP.

Отсутствие кастомных скриптов

Первое и самое главное отличие от стандартных сайтов — это невозможность вставки «обычных» скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.

Решение — использование доступных компонентов и iframe.

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

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

Все доступные виды компонентов с примерами использования можно найти на этом сайте.

Отсутствие обычных тегов в документе.

В коде страницы не должно быть 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-версия страницы, она должна содержать ссылку:

А на AMP-странице — присутствовать обратная ссылка:

Css 50 кб

Css стили пишутся inline, и их размер не должен превышать 50кб.

Заключение

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

Часть функционала мне удалось реализовать на сайте нашей IT-компании Wellsoft, в разделе новостей (адаптивное изображение, форма, текст, структурированные данные; кроме того, если появится такая возможность, эта статья попадет в галерею “Top stories”).

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

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

Источник

AMP сайты — попасть в ловушку и выиграть

Яндекс и Google не жалея сил развивают собственные экосистемы, поглощая старый добрый web турбо-страницами и AMP-сайтами. От этого не выигрывают:

информационные ресурсы, которые зарабатывать на рекламе;

коммерческие сайты, т.к. поисковая выдача сведена к поисковым сервисам и агрегаторам;

социальные сети (тот же Дзен с вчера анонсированными прямыми эфирами).

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

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайтОфис Google в Калифорнии

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

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

Уже в 2015 году Google активно улучшал поисковую выдачу на мобильных устройствах. С помощью алгоритма Mobile-friendly пользователи попадали из поисковой выдачи на сайты, адаптированные к мобильным устройствам. Нововведение не осталось незамеченным для мобильных пользователей и отразилось на улучшении поведенческих факторов, прямо влияющих на позиции сайта в поисковике.

В октябре того же года Google анонсировал проект ускоренных мобильных страниц AMP (Accelerated Mobile Pages). AMP — мгновенно загружаемые на мобильных устройствах страницы, позволяющие не тратить время на ожидание долгой загрузки сайта, что особенно актуально при медленном интернете.

Мгновенная загрузка страниц стала возможной благодаря новой технологии, включающей 3 компонента:

Библиотека ресурсов AMP бесплатна и поддерживается всеми браузерами. На сегодня экосистема AMP включает более 25 миллионов сайтов и становятся более востребованной среди самых различных форматов: реклама, электронная торговля, услуги, малый бизнес и т.д.

Чем сайт AMP отличается от остальных

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

Скорость загрузки первых.

Более мощный функционал вторых.

Приоритет AMP-вебсайтов в мобильной выдаче Гугла перед обычными страницами.

Способность AMP страниц быстро решать задачу пользователей.

Стандартный сайт, разработанный по стандартам AMP, демонстрирует отличные показатели по времени загрузки:

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

А время загрузки первой части контента составляет 1,6 сек на недорогом смартфоне в сети 4G с медленным подключением к интернету. Сам по себе результат просто фантастический.

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

Примеры AMP сайтов

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

Зачем Google создал AMP

Согласно исследованию Kissmetrics, 47% пользователей не готовы ждать загрузки сайта более 2 секунд, 40% посетителей покидают сайт, если загрузка длится более 3 секунд.

Согласно тому же исследованию, первые 10 секунд являются самыми важными в посещении пользователя. Из графика ниже следует, что если вам удается убедить посетителя остаться на сайте полминуты, то существенно вырастают шансы удержать пользователя на 2 минуты и даже больше — что само по себе сопоставимо с вечностью в онлайне.

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайтГрафик, показывающий вероятность ухода посетителя с сайта в зависимости от проведенного на сайте времени.

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

Люди предпочитают контролировать свою жизнь сами, а не отдавать ее на произвол компьютерам. В своей книге “Проектирование юзабилити” Якоб Нильсен рассказывает о 3 важнейших ограничениях во времени, которые происходят в интервале между действием пользователя и ответом на него машины.

Аналитический сервис Tagman провел исследование, в котором изучил влияние скорости загрузки на конверсию, результаты на графике:

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайтЗависимость конверсии (ось y) от времени загрузки страницы (ось x)

Примечательно, что каждая последующая задержка загрузки на одну секунду является причиной падения конверсии на 7%.

Похожие исследования проводил Amazon: каждая задержка в 100 миллисекунд снижает конверсию на 1%.

Возвращаясь к Гуглу, отметим, что скорость загрузки стала фактором ранжирования сайтов в поисковой выдаче. Иными словами, медленные сайты не будут показаны в топе поисковика. Google хочет показывать выше те сайты, которые имеют лучшие пользовательские характеристики.

Очевидно, что сайт с хорошей скоростью загрузки влияет на положительное впечатление от пользования поиском самого Гугла и служит фактором лояльности к Гуглу. Учитывая экспансию американского поисковика в Азии и в бывшем СССР, не кажется удивительным устремления Гугла увеличить аудиторию и повысить вовлеченность западной аудитории.

Как выглядит AMP в поисковой выдаче

AMP-страницы имеют приоритетный значок (“молния”) в поисковой выдаче для мобильных устройств:

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайтВид сниппета сайта с версией AMP и обычного сайта

В 2017-ом году, портал 9to5Google проводил опрос, результаты которого показали, что больше половины пользователей предпочтут кликнуть по ссылке с иконкой молнии, нежели на обычный сайт.

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайтИтоги опроса по кликабельности сниппета

Какие результаты дает внедрение AMP

Увеличение скорости загрузки — не самоцель. Внедряя новую технологию, мы должны быть уверены, к какому эффекту приведет нововведение.

Компания Stone Temple Consulting провела исследование

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

На примере медийного сайта компании Thrillist (в формат AMP переведены 90% страниц) зафиксирован рост трафика из поисковиков на 70% — половина этого роста приходится на AMP.

Другой пример, на этот раз анонимная компания, крупный медиа-проект, у которого в AMP переведены 95% страниц, заметили рост трафика из органики на 67% по одному сайту и 30% по другому. В обоих случаях рассматривался период 4 недели. В отношении медийного сайта AMP явно сказались в лучшую сторону.

Что касается коммерческих сайтов, то на примере интернет-магазина Myntra (аналог Ламоды в Индии) получен результат в виде падения отказов на 40% и увеличения общих показателей эффективности (автор исследования не указывает конкретные данные). Надо сказать, что от внедрения до получения первых результатов прошло всего 11 дней.

падение отказов на 10%;

увеличение просмотров страниц на 6%;

увеличение продолжительности посещения на 13%.

Больше информации по этому кейсу в исследовании на английском языке. Мы же можем сделать вывод, повторив уже сказанное командой Event Ticket Center “Big win” (“Большая победа”).

Будущее AMP — какое оно?

По заявлению представителя Гугла Ричарда Жангра, AMP — “это не про новости или статьи, мы видим внедрение формата по всему спектру веб-приложений, от интернет-магазинов до посадочных страниц для рекламы”.

По крайней мере, AMP станут “будущим для SEO”, как выразился Дэниел Бордман, руководитель отдела SEO в компании Hoppa. Дальше можно ожидать, что Google будет активнее продвигать свой формат мобильных страниц. И если есть, чему поучиться из всей истории Гугла, то это тому, что нужно следовать за предложениями поискового гиганта, нежели оставаться за линией кильватера без позиций и трафика.

Критика AMP

Из проблем AMP-страниц, выделяемых вебмастерами, чаще всего приводят:

пропадающие ссылки (и доход от рекламы);

меньше возможностей для аналитики и больше работы;

меньше контроля над своим контентом и дизайном.

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

Вывод

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

AMP — новый способ сделать жизнь пользователей проще и понятнее.

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

Источник

Нужны ли AMP вашему сайту: подробное руководство по технологии

Увеличение скорости работы сайта на мобильных устройствах остается одним из ключевых SEO-трендов, перешедших из 2018 в 2019 год. Для этого есть три весомые причины:

И вот Google дает нам готовый инструмент для создания идеального web-ресурса — быстрого, адаптивного, отвечающего требованиям самой поисковой системы и пользователей — AMP. Рассмотрим, что это за технология и какая может быть отдача от ее внедрения.

AMP (Accelerated Mobile Pages) — это технология ускоренных мобильных страниц, активно продвигаемая самой ПС Google. С помощью этой технологии создаются быстрые динамические страницы — шаблонные и ограниченные с технической стороны, но гибкие и разнообразные с точки зрения дизайна и функционала.

Для кого актуально

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

Примеры сайтов на AMP

Как работает AMP

Страницы AMP построены с помощью трех основных технологий:

AMP HTML

Это HTML-разметка с ограничениями, расширениями, а также особенными web-компонентами, регламентированными в спецификации. Вот несколько примеров:

Тег в html

Тег-аналог в AMP HTML

При этом следует учитывать, что многие компоненты не имеют аналогов и не могут быть использованы в коде AMP (также описано в спецификации). Код страницы AMP легко узнать по значку ⚡ (молния) в теге :

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

Библиотека AMP JS

AMP Cache

Позволяет загружать страницы AMP из поиска практически мгновенно за счет использования CDN (сети доставки контента) Google.

Именно благодаря набору ограничений библиотеки и компонентов сделанный с помощью AMP сайт гарантированно будет быстрым и легким.

Сравнение скорости загрузки и функционала AMP и адаптивной версии на конкретном примере

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

Страницы для сравнения:

По данным сервиса Google PageSpeed Insights адаптивная версия имеет низкую скорость загрузки:

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

На полную загрузку страницы при просмотре с мобильного устройства уходит 9.5 секунд, а достаточное количество контента (т.е. первый экран и основной контент страницы) начинает отображаться только через 2.8 секунды после открытия страницы. Вспомним, что половина пользователей покинет страницу после трех секунд ожидания загрузки: можно сделать вывод, что такая низкая скорость может серьезно отразиться на показателе отказов и конверсии.

AMP-страница сайта отличается очень высоким показателем скорости:

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

Первый экран и основной контент страницы загружается за 1 секунду — это очень хороший результат, а через 3,9 секунды AMP полностью готова к взаимодействию с пользователем (удовлетворительный результат). В среднем ускоренная мобильная страница оказалась быстрее в 2,5 раза своей адаптивной версии и оценивается поисковой системой Google как страница с высокой скоростью загрузки (95 пунктов из 100 в сервисе Google PageSpeed Insights), что дает ей преимущество при ранжировании согласно Mobile-first indexing.

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

А что с визуальной составляющей и функционалом

А теперь сравним дизайн, функционал и удобство обеих версий страницы для пользователя.

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

Нужен ли AMP вашему сайту

Оценить актуальность технологии для вашего сайта помогут ответы на следующие вопросы:

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

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

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

К примеру, вот результаты внедрения AMP из кейса сайта-агрегатора бронирования авиаперелётов и отелей wego.com:

Технология позволила улучшить скорость загрузки сайта в 10 раз, увеличить конверсию по партнерским программам на 95% и на 49% улучшить конверсию из мобильного поиска. Суммарно CTR рекламы на мобильных устройствах выросла в 3 раза.

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

Например, по коммерческому запросу «купить телевизор в москве» в ТОП-5 мобильной выдачи Google представлена 1 ускоренная мобильная страница:

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

А вот пример для сайта кулинарной тематики: по запросу «Блины на кефире» в топ-5 представлено 5 AMP-страниц, первые две из которых отображаются в поиске с помощью разметки вида «Карусель рецептов».

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайтчто такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

что такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайтчто такое amp сайт. Смотреть фото что такое amp сайт. Смотреть картинку что такое amp сайт. Картинка про что такое amp сайт. Фото что такое amp сайт

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

К практике: как внедрить AMP

Для популярных CMS (Bitrix, WordPress, Drupal, Joomla и др.) имеются готовые решения, позволяющие быстро внедрить AMP на сайт. Следует отметить, что большинство плагинов платные и достаточно ограничены в своих возможностях, так что перед выбором и покупкой стоит взвесить все «за» и «против». Возможно, лучше создать свою AMP-версию с нуля.

Источник

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

Ускоренные мобильные страницы или AMP — технология, которая обеспечивает удобное получение информации в интернете с экранов смартфонов и планшетов. Как работает AMP? Как создать и кастомизировать ускоренные мобильные страницы? Какими инструментами могут воспользоваться владельцы сайтов на популярных CMS, включая WordPress, Joomla!, Drupal, OpenCart? С какими подводными камнями сталкиваются вебмастера при внедрении AMP, и как решить проблемы? Ответы на эти и другие вопросы в руководстве.

Что такое AMP и как они работают

AMP — акроним, который образован из первых букв английских слов accelerated mobile pages. По-русски это ускоренные мобильные страницы. Термином обозначают технологию отображения страниц сайта для мобильных пользователей, которая обеспечивает максимальную скорость загрузки сайта.

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

AMP — это платформа с открытым кодом. Поэтому каждый желающий может использовать ускоренные мобильные страницы бесплатно.

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

Ускоренные страницы состоят из HTML-разметки со специальными тегами и библиотеки JavaScript. Для создания AMP можно использовать ограниченный набор тегов и скриптов. Это уменьшает функциональность и внешнюю привлекательность страниц, но резко увеличивает скорость их загрузки. Также ускорению загрузки способствует предварительное кэширование.

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

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

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

В отличие от Google, «Яндекс» не поддерживает технологию AMP.

Пока еще крупнейший поисковик рунета не считает ускоренные мобильные страницы дублями. Это объясняется тем, что AMP ссылаются на канонические страницы с помощью атрибута rel=»canonical».

Тем не менее «Яндекс» индексирует AMP и даже включает их в выдачу. Один из участников популярного SEO-форума рассказал, что поисковик включил ускоренные страницы в выдачу вместо основных. На жалобу техподдержка ответила, что робот не считает атрибут rel=»canonical» строгой директивой. Поэтому AMP оказались в выдаче вместо основных страниц сайта. Топикстартеру пришлось запрещать «Яндексу» индексировать ускоренные страницы в файле robots.txt.

Стоит ли использовать ускоренные мобильные страницы

Чтобы ответить на этот вопрос, нужно уделить внимание преимуществам, недостаткам и результатам внедрения AMP.

Преимущества AMP

Главное преимущество AMP — высокая скорость загрузки. В таблице результаты тестирования базовой и ускоренной версии страницы с помощью нескольких сервисов.

PageSpeed Insights от Google

62 балла для мобильных, 77 баллов для десктопов.

88 баллов для мобильных, 94 балла для десктопов.

Инструмент проверки скорости загрузки от Pingdom

Время загрузки 5,94 секунды, размер страницы 3,5 Мбайт.

Время загрузки 2,46 секунды, размер страницы 381,4 Кбайт.

Инструмент проверки скорости загрузки от GTmetrix

Скорость загрузки 18,6 секунды, размер страницы 3,49 Мбайт.

Время загрузки 3,4 секунды, размер страницы 314 Кбайт.

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

Низкая скорость загрузки негативно влияет на пользовательский опыт. Более половины посетителей не ждет отображения контента более 3 секунд.

Быстрая загрузка критически важна для пользователей с мобильными устройствами. Именно поэтому Google предварительно кэширует AMP и выступает в роли CDN для людей, которые пользуются медленным интернетом.

Google учитывает скорость загрузки страниц при ранжировании сайтов. Это важно в контексте тестирования mobile-first индекса. Обеспечивает ли AMP дополнительные преимущества в рейтинге?

В середине 2016 года на саммите Search Engine Journal в Чикаго представитель Google Гарри Ильес заявил, что ускоренные мобильные страницы не входят в число факторов ранжирования. Но специалист не смог однозначно сказать, что AMP не будет фактором ранжирования в будущем.

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

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

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

Недостатки ускоренных мобильных страниц

У AMP много недостатков. Вот основные:

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

Результаты внедрения AMP

Сначала личный опыт. Внедрил ускоренные страницы на экспериментальной площадке на WordPress в ноябре 2016 года. Проблем с «Яндексом» нет. Эта поисковая система видит AMP, но не включает их в индекс.

Google быстро индексирует AMP. Информация о них появилась в разделе Search Console «Вид в поиске – Ускоренные мобильные страницы» в течение нескольких дней после внедрения на сайте.

Практически сразу после индексации Google направляет на AMP трафик. По состоянию на конец февраля 2017 года приблизительно каждый третий посетитель из Google попадает на ускоренную, а не на основную версию страницы. Вот интересная статистика:

На примере конкретного ресурса без претензии на репрезентативность видно, что Google охотно направляет на AMP посетителей. На ускоренные страницы из поисковой системы пришли 32,84 % от общего числа пользователей или 62 % мобильных пользователей. Оставшиеся 38 % владельцев смартфонов и планшетов попали на базовые страницы с адаптивной версткой.

Вот данные, на которые стоит обратить внимание:

После реализации AMP скачкообразного изменения трафика из Google не было. Сохранилась динамика умеренного роста посещаемости. На посещаемость из «Яндекса» и других источников ускоренные страницы также не повлияли.

Одного ресурса со средней посещаемостью из Google около 100 уников в сутки недостаточно, чтобы оценивать результаты использования AMP. Поэтому стоит обратиться к чужому опыту. Вот интересные данные:

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

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

Как установить AMP на WordPress

Пользователям WordPress повезло: ускоренные мобильные страницы можно реализовать буквально в течение минуты. Для этого установите и активируйте плагин AMP.

Созданные с помощью плагина страницы проходят проверку в валидаторе AMP.

Плагин AMP не имеет настроек. Чтобы расширить функциональность и улучшить внешний вид ускоренных страниц, воспользуйтесь надстройкой AMP for WP. После установки и активации плагина перейдите в меню настройки ускоренных страниц в административной панели.

В разделе General при необходимости загрузите логотип сайта. Рекомендованный размер изображения — 190×36. С помощью кнопки Custom Logo Size вы можете указать произвольный размер логотипа.

С помощью кнопки Front Page вы можете указать произвольную страницу в качестве главной на AMP-версии сайта.

Обратите внимание на функцию AMP on Pages. Базовый плагин создает только ускоренные версии страниц записей. Если вам необходимы AMP-версии статических страниц, переключите кнопку в положение On.

В разделе Analytics подключите отслеживание посещений AMP с помощью Google Analytics. Для этого укажите Google Analytics ID.

С помощью кнопки Use Google Tag Manager можно подключить Google Analytics с помощью диспетчера тегов Google.

В разделе Design вы можете изменить внешний вид ускоренных страниц. С помощью кнопки Launch Post Builder запустите drag-and-drop редактор дизайна. Добавляйте и удаляйте элементы страницы, выберите цветовую схему, цвет заголовка и фона.

Меню Design Selector позволяет выбрать готовые варианты дизайна. В поле Custom CSS можно добавить пользовательские стили.

В разделе SEO можно настроить отображение на ускоренных страницах метаданных из плагина Yoast SEO, добавить в хедер произвольный HTML-код, а также настроить индексирование страниц архивов и категорий. Если вы не пользуетесь плагином Yoast SEO, оставьте настройки по умолчанию.

В разделе Menu настройте отображение меню на ускоренных страницах сайта. Для этого перейдите по предложенной ссылке.

В разделе Advertisement настройте отображение объявлений AdSense. Плагин предлагает четыре варианта размещения рекламы: над шапкой на всех страницах, под футером на всех страницах, а также над и под контентом на страницах публикаций.

Чтобы разместить объявление под контентом на страницах публикаций, включите кнопку AD #4. Выберите размер объявления. Создайте объявление в аккаунте AdSense и добавьте идентификаторы пользователя и рекламного блока в предложенные поля. Данные возьмите из кода созданного объявления.

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

Блоки рекомендуемого контента приносят доход при переходах посетителей по рекламным ссылкам, а также стимулируют внутренние переходы на сайте. При выборе размера 300×600 блок выглядит так (см. иллюстрацию).

В разделе Single настройте внешний вид и функциональность страницы записи. Вы можете включить прикрепленные к нижней части экрана социальные иконки, ссылки на предыдущую и следующую публикацию, а также настроить блок похожих записей.

В разделе Social Share подключите кнопки шеринга социальных сетей. В разделе Structured Data загрузите изображение для микроразметки ускоренных страниц. Google может использовать его при формировании поисковой выдачи. Также укажите размер изображений, которые будут использоваться в сниппетах при публикации ссылок на ускоренные страницы в социальных сетях.

В разделе Notification можно настроить отображение уведомлений. Например, вы можете сообщить посетителям об использовании cookies. В разделе Translation Panel переведите меню страниц на русский язык.

В разделе Disqus Comments можно подключить на ускоренных страницах систему комментирования Disqus. Для этого переключите кнопку Disqus Comments Support в положение On, укажите URL ресурса в системе Disqus и путь к файлу комментариев на сервере.

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

В разделе Advance Settings можно включить ускоренную версию главной страницы, а также страниц рубрик и архивов. За эту функцию отвечают кнопки Homepage Support и Archive Page Support соответственно.

С помощью кнопки Non-AMP Homepage link in Header and Logo можно включить ссылку на полную версию главной страницы в названии сайта и логотипе. Используйте эту возможность, чтобы перенаправлять посетителей ускоренных страниц на базовую версию сайта.

Кнопка Mobile Redirection включает автоматическое перенаправление всех мобильных пользователей с адаптивной версии сайта на AMP.

Не перенаправляйте всех пользователей на AMP. В ускоренных страницах нуждаются не все посетители сайта. Редирект вынудит владельцев смартфонов и планшетов пользоваться сокращенными версиями страниц с ограниченной функциональностью. Это может привести к падению эффективности сайта.

Более того, если Google видит только десктопную версию сайта и AMP, для mobile-first индекса он выбирает версию для стационарных ПК. Это может привести к потере трафика из-за отсутствия адаптации ресурса к мобильным устройствам.

Обязательно включите ссылку на полную версию страниц в футере с помощью кнопки Link to Non-AMP in footer. Это поможет пользователям переходить на базовые страницы с нормальной функциональностью.

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

В разделе Fix AMP Errors можно подключить платную поддержку. Разработчики плагина помогут разобраться с настройками и избавиться от уведомлений об ошибках в Search Console.

Блок Import/Export позволяет перенести настройки ускоренных страниц с одного сайта на другой.

Итак, на сайтах под управлением WordPress можно реализовать ускоренные страницы в течение нескольких минут. Чуть больше времени вы потратите на настройку внешнего вида и функциональности с помощью плагина AMP for WP.

AMP для Drupal

Чтобы внедрить ускоренные мобильные страницы на сайтах под управлением Drupal, воспользуйтесь следующими инструментами:

Для работы модуля AMP необходимы плагины Token и Chaos Tools. Если вы планируете показывать на ускоренных страницах объявления AdSense, установите расширение Google AdSense Integration.

На странице настроек модуля AMP на вкладке AMP Configuration подключите отображение ускоренных версий для публикаций и страниц. Выберите тему, которая будет использована для создания AMP. Укажите Google Analytics ID для отслеживания посещений страниц. Также вы можете использовать для учета просмотров AMP-пиксель.

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

После настройки проверьте отображение ускоренных версий страниц. Для этого к URL добавьте значение «?amp». Например, ускоренная версия страницы http://primer-saita.ru/node/1 будет доступна по адресу http://primer-saita.ru/node/1?amp.

AMP для Joomla!

Чтобы внедрить ускоренные страницы на сайтах под управлением CMS Joomla!, воспользуйтесь расширением wbAMP. Полная версия этого плагина обойдется вам в 44 доллара США в год. Сборка для сообщества доступна бесплатно.

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

Оставьте дефолтное значение суффикса для URL AMP. В этом случае для просмотра ускоренных страниц достаточно добавить значение amp. Например, ускоренную версию страницы http://primer-saita.ru/koshki можно будет найти по адресу http://primer-saita.ru/koshki/amp.

Также на странице основных настроек укажите информацию о сайте и данные издателя. Выберите подходящий тип микроразметки: NewsArticle для новостных заметок и BlogPosting для публикаций в блоге.

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

Заполните раздел «Правило для com_content». Если вы планируете показывать ускоренные страницы только для публикаций, в поле «Представление» укажите значение Article. В поле «Категории» выберите категории, публикации в которых будут иметь AMP-версии. В полях ID, ID номер материала и «Задача» укажите значение «*». В этом случае AMP будут созданы для всех публикаций в выбранных категориях.

Другие настройки в бесплатной версии плагина недоступны.

Существует еще один коммерческий инструмент для создания ускоренных страниц на сайтах под управлением Joomla!: плагин JAmp. Он стоит 39 евро. На тестовом сайте плагина можно увидеть, как инструмент трансформирует стандартную страницу в ускоренную.

В отличие от WordPress и Drupal, для Joomla! нет полностью бесплатного инструмента для создания AMP.

AMP для интернет-магазинов

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

Авторы проекта AMP утверждают, что онлайн-магазины могут и должны использовать ускоренные страницы. Главный аргумент в пользу внедрения технологии на ecommerce-ресурсах — повышение скорости загрузки мобильных страниц положительно влияет на конверсию. Кстати, eBay экспериментирует с AMP с середины 2016 года.

AMP для OpenCart

Чтобы создать ускоренные страницы для сайта под управлением OpenCart, воспользуйтесь модулем Accelerated Mobile Pages. Это платное решение. Тестовую версию ускоренных мобильных страниц, созданных с помощью модуля, можно посмотреть по ссылке.

Также вы можете испытать модуль AMP for Product Pages. Это бесплатное решение. Надстройка создает AMP только для страниц товаров. Для работы AMP for Product Pages нужен модуль SEO Friendly URLS.

Я не могу рекомендовать бесплатный модуль AMP for Product Pages, так как за полтора рабочих дня не смог заставить его работать на тестовом ресурсе. После установки и активации программы на OpenCart версии 2.3.0.2 ускоренные страницы на сайте не появляются. Надстройка добавляет в хедер страниц ссылку на AMP-версию. При переходе по ссылке появляется ошибка 404.

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

Возможно, проблема связана с отсутствием реального опыта администрирования сайтов под управлением ОС OpenCart. Пользователи профильного форума отзываются о модуле AMP for Product Pages преимущественно позитивно.

AMP для Magento

Если ваш интернет-магазин работает на платформе Magento, воспользуйтесь платным плагином Accelerated Mobile Pages. Модуль создает AMP для главной, страниц категорий и товаров.

Демонстрационная версия ускоренных страниц сайта на Magento доступна по ссылке.

AMP для PrestaShop

Ускоренные страницы для магазина на платформе PrestaShop можно создать с помощью платного модуля PrestaShop AMP. Он генерирует ускоренные версии главной, страниц категорий и карточек товаров.

Внедрять или нет

Если у вас контент-проект, который работает на WordPress, реализовать ускоренные страницы можно быстро и без затрат. Вы потратите минуту на установку базового плагина и полчаса на установку и настройку дополнительного плагина.

Для сайтов под управлением Drupal также есть бесплатное решение, которое можно быстро установить и настроить. А вот для Joomla! и движков для интернет-магазинов плагины для создания AMP придется покупать.

Есть ли смысл использовать AMP, если их функциональность и внешний вид уступают стандартным страницам, а явных преимуществ в ранжировании пока нет?

«Яндекс» не поддерживает технологию и иногда неправильно индексирует ускоренные страницы. Google может передумать и закрыть проект.

Но почему-то кажется, что Google не передумает, а «Яндекс» будет вынужден играть по правилам глобального лидера поискового рынка. Логика простая: доля мобильного трафика растет и будет расти. Люди будут выходить в интернет не только с помощью телефонов и часов. На очереди кофеварки и стиральные машины. Поэтому технологии отображения контента на экранах мобильных устройств будут развиваться.

Кстати, несколько лет назад владельцы сайтов скептически относились к необходимости адаптации сайта под мобильный трафик. Сегодня мобильная версия или адаптивная верстка — обязательное условие эффективной работы онлайн-ресурса. Очень вероятно, что в обозримом будущем технология AMP станет одним из базовых условий эффективности сайтов.

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *