3 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Для чего нужны amp страницы

Главное об AMP в 2019: AMP-страницы становятся лучше

В статье:

AMP-страницы — стоит ли внедрять на сайт

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

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

За счет чего AMP быстрее

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

AMP-страница

Яндекс внедрил свои Турбо-страницы на десктопы, но от Google информации о таких планах не было.

Нужны ли AMP на сайте? Исследование трафика

Компании Stone Temple и WompMobile провели исследование траффиковости AMP-страниц. Они проанализировали около 9 млн AMP-страниц и данные 26 доменов, которые стали пользоваться AMP. Результаты замеряли дважды: за 30 дней до внедрения технологии и спустя 30 дней.

Исследование показало, что страницы с AMP получают больше трафика, кликов и показов. Изменения трафика коснулись 77% от общего числа сайтов — 22 из 26 ресурсов. Число показов выросло у 23 доменов.

Больше всего вырос трафик у коммерческих проектов — на 32,1%. Информационные показали рост на 13,7%.

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

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

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

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

Недостатки AMP-страниц от Google

О недостатках технологии мы писали в статье «Почему вам не нужны Турбо-страницы Яндекс и Google AMP: 5 причин». Такие страницы не позволяют реализовать особенные дизайнерские решения, воплощать выверенные этапы конверсионной воронки продаж и свободно размещать рекламные блоки. Из-за этого многие веб-мастеры советуют использовать технологию для контентных страниц, где это не будет минусом. Одним из недостатков мы упомянули отображение URL, но сейчас ситуация меняется.

Проблема с URL

В январе 2018 года команда оптимизаторов опубликовала петицию — Открытое письмо о Google AMP, в котором высказала претензии и опасения по поводу монополизации поисковиком трафика:

Читать еще:  Как отвлечься от безответной любви

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

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

URL AMP-страницы

Адрес этой страницы — https://www.google.com/amp/s/lifehacker.ru/kak-varit-gorox, у пользователя это выглядит, как будто он смотрит страницы, принадлежащие Google. Аналитика владельцев сайта при этом засчитывает посещения, веб-мастеры не теряют трафик, но пользователям это может быть неудобно. Они привыкли смотреть на панель навигации в браузере, чтобы видеть, на каком сайте находятся, запомнить сайт, чтобы вернуться в следующий раз. AMP-страницы вносят путаницу.

Для отображения адреса появилось техническое решение — у страниц в формате AMP появилась небольшая плашка с указанием домена сайта, на котором находится пользователь. Адрес ссылки при этом остался прежним и начинался с www.google.com/amp…, но пользователи могли видеть, какой ресурс читают. По тапу на значок информации выходит адрес первоначальной ссылки в мобильной версии и дополнительная информация об AMP.

Плашка с адресом и URL

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

Указание домена на плашке не решает проблему с отображением реального адреса страницы и занимает место на экране, поэтому нужно было что-то другое.

Реальные URL у AMP-страниц: как это работает

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

В Chrome внедрили поддержку стандарта Signed HTTP Exchanges, он отвечает за то, чтобы мобильные браузеры могли отображать домены сайтов, а не Google AMP URL. Позже эта технология появится для других браузеров и Microsoft Edge. Для подключения функции издателям нужно внедрить Signed Exchanges согласно руководству Serve AMP using Signed Exchanges.

Из CDN новую технологию поддерживает Cloudflare, они запустили функцию «AMP Real URL», пользователи Cloudflare смогут включить ее за один клик. Технология использует веб-упаковку, позволяющую кэш-памяти хранить копию страницы AMP и быстро предоставлять ее конечному пользователю, а также содержать криптографическое доказательство того, откуда изначально появилась страница.

Пример отображения URL на AMP-странице

Благодаря этому страница также хранится в кэше, но URL сайта отображается в навигационной панели браузера. После включения функции платформа будет сохранять исходные URL и подписывать все AMP-страницы, которые отправляет в Google AMP Cache. Пока это работает только для Chrome на Android. Подробнее о том, как работает технология, описали сотрудники Cloudflare Габби Фишер и Эвери Харниш.

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

AMP-страницы

AMP-страницы – это технология Google для отображения контента сайтов на мобильных устройствах, позволяющая максимально ускорить загрузку (меньше одной секунды) и сократить объем данных в 10 раз. Название составлено из первых букв английской фразы accelerated mobile pages, то есть «ускоренные мобильные страницы». В выдаче поисковика отмечаются особым значком.

Читать еще:  Как называли в детстве Данилу мастера

История

Технология анонсирована компанией Google в октябре 2015 года как проект, созданный с целью повышения производительности мобильного интернета. После запуска тестировалась в основном новостными ресурсами. Широкое использование на других сайтах началось с февраля 2016 года.

AMP – платформа с открытым кодом, которую может бесплатно использовать любой желающий. Технология активно поддерживается WordPress.com, Twitter, Pinterest, Tumblr, LinkedIn и другими интернет-гигантами. Социальные сети ссылаются на ускоренные мобильные страницы AMP в своих приложениях. Другие поисковые системы (Bing, Baidu, Yahoo Japan и т. д.) поддерживают контент такого формата и добавляют ссылки в мобильную выдачу.

Технология

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

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

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

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

Чтобы документ попал в Top stories Google, необходимо наличие структурированных данных:

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

При клике по ссылке в выдаче открывается контент, но видно, что нет перехода на сам сайт: в адресной строке отображается Google.

Формат «карусели» сохраняется. Можно переходить на другие документы, не возвращаясь на поиск, а пользуясь горизонтальной прокруткой.

Однако контент доступен не только с кэшированной версии поисковика. Можно просматривать его непосредственно с сервера владельца сайта, зайдя по прямой ссылке с суффиксом /amp/.

Статистика

Даже если пользователь посетил только AMP-версию страницу, но не перешел на сам сайт, можно отслеживать статистику.

Для сбора статистики есть два варианта:

  • тег amp-pixel, отслеживающий просмотры с помощью GET-запросов;
  • Amp-analytics – расширенный компонент, позволяющий подключить Google Analytics.

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

Преимущества и недостатки AMP

  • Применение технологии существенно ускоряет скорость загрузки, что критично для пользователей с низкой скоростью интернета. То есть появляется возможность заметно уменьшить количество отказов.
  • Скорость загрузки является одним из факторов, влияющих на ранжирование, поэтому возможно косвенное влияние на позиции всего сайта.

Но в то же время:

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

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

Кому подключать AMP

AMP-страницы используются в первую очередь новостными и информационными сайтами. Но в зарубежном сегменте отмечают, что внедрение технологии для E-commerce не только возможно, но и необходимо, приводит к реальному повышению конверсии. Например, для сайта AliExpress была увеличена конверсия на 4 %. Коммерческий гигант eBay также отмечает преимущества применения Accelerated Mobile Pages. В российском сегменте пока не наблюдается кейсов об успешном применении в E-commerce.

Как реализовать AMP

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

Читать еще:  Как установить MIUI 9
  • , а на ускоренной
  • .

    Генерацию документов по шаблону можно сделать автоматической, доработав используемую CMS.

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

    • WordPress – плагин и надстройка;
    • Joomla – плагин wbAMP или JAmp;
    • Drupal – модуль (для него нужны плагины Token и Chaos Tools), тема, библиотека;
    • OpenCart – модуль;
    • Magento – плагин;
    • PrestaShop – модуль.

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

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

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

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

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

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

    Функциональность 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 является открытым исходным кодом и до сих пор развивается.
    • Google говорит что наличие AMP страницы не отразится на ранжирование, просто у данных страниц будет значок.
    • Пока AMP страницы не поддерживаются везде, но в скором времени будут работать во всех регионах.
    • Если у вас есть AMP страница и приложение, то предпочтение будет отдаваться AMP странице а не приложению.
    • AMP страницы работаю без XML карты
    • В AMP страницах есть прямые ссылки на сайт

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

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

    SEO и AMP

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

    Google

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

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

    Яндекс

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

    Источники:

    http://pr-cy.ru/news/p/7438-amp-stranitsy-stanovyatsya-luchshe-glavnoe-ob-amp-v-2019
    http://wiki.rookee.ru/amp-stranicy/
    http://seoxl.ru/blog/amp/

  • Ссылка на основную публикацию
    Статьи c упоминанием слов:

    Adblock
    detector