AMP и мобильные страницы. В чем разница? [digital note #27]

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

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

Некоторое время назад, Google ввел “мобильные” ярлыки в результатах мобильного поиска. Такие ярлыки добавлялись к сайтам, которые гарантировали хороший мобильный опыт за счет отзывчивости. Вскоре от ярлыка отказались. Причина - 85% всех страниц сейчас соответствует критерию мобильного ярлыка.

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

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

Что такое мобильные страницы?

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

Что такое ускоренные мобильные страницы (AMP)?

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

Как сайт может стать адаптированным под мобильные устройства?

Это возможно при добавлении медиа-запросов. Они позволяют контенту правильно отображаться на различных устройствах без его изменения. Это метод CSS представленный в CSS3. Медиа-запросы позволяют веб-странице использовать разные правила CSS-стилей, основываясь на таких характеристиках как ширина, высота и цвет. Медиа-запросы, это логические выражения, которые либо верны, либо ошибочны.

Пример:

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

Как сайт может стать AMP-совместимым?

Достичь этого можно следуя инструкциям https://www.ampproject.org/docs/get_started/create.html, но при этом AMP-страницы также должны быть отзывчивыми и адаптированными под мобильные устройства.

Существуют ли проблемы дублирования контента на адаптивных сайтах?

Таких проблем на адаптивных сайтах не возникает.

Существуют ли проблемы дублирования контента на AMP-сайтах?

Адаптивная страница является той же страницей сайта, но она поддается другой верстке. Страницы будут отображаться согласно требованиям устройства, с которого на них зашли. AM-страницы открываются из AMP-кэша Google. У таких страниц меняется URL. Поэтому с вопросом дублирования контента нужно разбираться. Google AMP-кэш это прокси-сеть доставки контента. Он выбирает AMP HTML-страницы, кэширует их и автоматически улучшает их производительность.

Как можно решить вопрос дублирования контента на AMP-страницах?

Если сайт AMP-совместим и на нем есть как обычные, так и AMP версии страниц, добавьте следующие ссылки:

На обычную страницу добавьте ссылку на ее AMP-версию, чтобы дать о ней знать Google и другим платформам:

Как проверить AMP-совместимые страницы?

Можно проверить здесь https://validator.ampproject.org/.

Как проверить мобильную адаптивность?

Проверка доступны по ссылке https://testmysite.thinkwithgoogle.com/intl/en-in

Является ли адаптивность под мобильные устройства фактором ранжирования?

Да. Это является фактором ранжирования с 2015 года и AM-страницы также должны быть адаптивными.

Является ли AMP фактором ранжирования?

Нет. AMP до сих пор не является фактором ранжирования Google.

Чем отличаются AMP и адаптивные страницы и как отображаются в результатах поиска?

Некоторое время адаптивным сайтам в поиске Google присваивали соответствующие ярлычки. Вскоре их отменили, но адаптивность осталась фактором, влияющим на ранжирование. Google представила AMP в топе новостей в виде карусели. AM-страницы отмечены соответствующим ярлыком в поиске.  

А что с размером страницы и временем загрузки?

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

Пример результатов тестирования адаптивной и AM-страниц:

Тест адаптивной страницы

Тест AM-страницы:

Предоставляются ли отчеты об адаптивных и АМ-страницах в Google Console и Analytics?

Да, информацию об адаптивных страницах можно посмотреть в разделе Поисковый трафик. Вопросы, относящиеся к АМ-страницам в Google Console находятся в Search Appearance. К таким страницам также можно подключить Google Analytics.

В Google сообщают, что АМ-страницы далеко вышли за новостной формат и используются в электронной коммерции, на сайтах о путешествиях, с рецептами и т.п. В связи с тем, что количество мобильных пользователей неукротимо растет, AM-страницы становятся все более необходимыми.

Ссылка на источник.