Продвигаем бизнес в Интернете с 2001 года
Google ранжирует сайты с мобильной версией лучше. Рассказали, как создать для сайта Accelerated Mobile Pages.
Продвижение сайта в Google невозможно без учета нового подхода к ранжированию сайтов — Mobile First Indexing. Google планирует понижать в поисковой выдаче сайты, у которых нет мобильной версии. Для удобства пользователей и ускорения загрузки страниц Google предлагает использовать технологию Accelerated Mobile Pages (AMP) — ускоренную мобильную версию сайта.
Когда появилась. В 2015 г. поисковая система Google анонсировала новую технологию AMP. Ее создали для мгновенной загрузки сайтов в мобильном интернете. Заметим, что для пользователей, у которых медленный интернет, AMP — не единственное решение. При низкой скорости соединения пользователь может просто отключить подгрузку JavaScript-файлов и загружать чистый html для ускорения загрузки страниц. Но в таком случае реклама на сайтах не будет показываться. Для рекламодателей и поисковой системы Google создание AMP страниц более интересно, потому что в AMP предусмотрен рекламный блок (amp-ad).
К началу 2018 года использование AMP страниц стало строго рекомендованным. Google добавляет специальный значок к каждой AMP странице и показывает их в поисковой выдаче выше. Если на вашем сайте нет адаптивного дизайна под все виды устройств, создайте AMP страницы для эффективного продвижения под Гугл.
Что входит в AMP. Технология AMP базируется на AMP-HTML, AMP JS и Google AMP Cache. AMP-HTML — формат для ускоренной загрузки. Он похож на обычный HTML формат, но в нем используются специальные теги amp, а ряд обычных тегов запрещен. AMP JS — собственная библиотека JavaScript. Другие библиотеки не поддерживаются. С помощью AMP Cache содержание страницы кэшируется в Гугл и при запросе пользователя показывается ранее загруженная версия.
Для кого подойдет. Технология AMP подходит не для всех типов сайтов. Лучше всего ее применять для раскрутки ресурсов, на которых для пользователя главное — содержание страниц, контент. Суть самой технологии заключается в быстром предоставлении статического контента, поэтому применяйте его для:
AMP не подходит для сайтов, у которых есть обязательные динамические блоки. Технология не поддерживает JavaScript, поэтому «скриптовый» функционал сайта не работает: онлайн-платежи, анимация, push-уведомления, действия по клику, фильтрация и пр. Часть недоступного функционала можно реализовать через фрейм iframe или специальные AMP компоненты.
Перед созданием обратите внимание, что контент на основном сайте и AMP-страницах должен совпадать. Продвинуть сайт в Гугл при несовпадении контента будет невозможно, потому что поисковик ввел штрафные санкции за это.
Если сайт создан на CMS, используйте специальные плагины: для WordPress — AMP от издателей Automattic и Kaludi, для Joomla — JAmp, для Drupal — Token и Chaos Tools. Для сайтов на html воспользуйтесь нашей инструкцией.
Создайте файл с расширением html и скопируйте в него исходный код, который предоставляет Google. Его можно найти на ресурсах, посвященных AMP. Код похож на обычный, но имеет несколько отличий:
Изображения замедляют скорость загрузки и работы сайта, если они не оптимизированы. Google требует прописывать изображения через тег <amp-img> и загружать сразу требуемый размер, а не форматировать его с помощью браузера.
Отдельные требования выдвигаются к логотипам на сайте. Используйте логотип только растровом формате: jpg, png, gif. Не вставляйте иконки. Лучший вариант логотипа — полное название бренда на светлом фоне. Рекомендуемый размер 60 х 600px. Ширину можно изменять, высоту — нет.
Кроме изображений, в AMP страницах используйте аудио и видео. Прописывайте все через теги amp: <amp-img>, <amp-video>, <amp-audio>. Для анимированных изображений используйте <amp-anim>. Для аудио и анимации подключите специальные скрипты.
Обязательно используйте микроразметку для продвижения в Google посредством технологии AMP. Google разработал отдельные стандарты структурирования данных для: статей, музыки, курсов, книг, рецептов, подкастов, видео, обзоров, вакансий и др. AMP поддерживает Open Graph Protocol, Twitter Card, но рекомендует использовать Schema.org. Тогда Google будет показывать сайт в карусели новостей и со структурированным сниппетом. Проверьте корректность микроразметки с помощью Search.google.com/structured-data/testing-tool. Вставьте в окно фрагмент кода или адрес страницы.
Все оформление сайта должно быть прописано через стили в теге <head>. Общий вес CSS-стилей не должен превышать 50 КБ. Ссылки на сторонние стили запрещены, за исключением ссылок на используемые шрифты. Google разрешает использовать на AMP страницах шрифты с ресурсов Fast.fonts.net и Fonts.googleapis.com.
Прописывайте стили через <style amp-custom>. Указывайте все стили для каждой страницы. Сразу прописывайте точные размеры и данные. В AMP запрещено использовать следующие элементы:
Проверьте, корректно ли работает AMP страница. Для этого воспользуйтесь одним из трех способов:
Для индексации роботом Google вставьте ссылки на обычную и AMP страницы для связи.
|
Обычная страница |
<link rel=”amphtml” href=”site.ru/url/to/amp/***.html” |
|
AMP-страница |
<link rel=”canonical” href=”site.ru/url/to/full/***.html” |
Если на сайте вместо двух страниц используется одна с AMP кодом, добавьте ссылку на саму себя.
Учитывайте особенности продвижения в Google — поисковик делает упор на мобильных версиях сайта. Сайты, которые имеют только десктопные версии, хуже ранжируются и показываются ниже в гугл выдаче. Создавайте AMP страницы, чтобы корректно и быстро показываться на мобильных устройствах.
Технология AMP состоит из AMP HTML, AMP JS и Google AMP Cache. Для подробного изучения технологии воспользуйтесь информацией на ресурсах Ampbyexample.com, Ampproject.org, Developers.google.com.
Посредством AMP страниц рекомендуем продвигать информационные и контент-проекты. Если на сайте много динамических элементов, AMP не подойдет. В AMP есть компоненты, которые могут заменить часть динамического функционала, но полноценного веб-приложения все равно не будет.
Создавайте AMP страницы так же, как html-документы. Следуйте рекомендациям Google при работе с изображениями. Обязательно применяйте микроразметку.
После создания проверьте с помощью одного из инструментов Search.google.com/test/amp, консоли разработчика в Chrome или validator.ampproject.org.
Свяжите обычные и AMP страницы двухсторонними ссылками. Если страница одна с кодом AMP, она должна ссылаться сама на себя.
Подробнее об этом и о многом другом мы расскажем 25-26 апреля на интенсивном курсе . За два дня вы узнаете, как улучшить сайт, чтобы его чаще находили, но не нарушить правил поисковиков и не попасть под санкции. Приходите!
Материал подготовила Светлана Сирвида-Льорентэ.
Вам будет интересно
Доставляем экспертный контент
Мы делимся с подписчиками экспертным контентом: отправляем полезные статьи, советы от специалистов, приглашаем на вебинары. Подпишитесь, чтобы узнать больше о продвижении бизнеса в Интернете, наших мероприятиях и репортажах с крупных отраслевых событий. Выберите наиболее удобную платформу для вас и наслаждайтесь контентом!
Нажимая на кнопку «Подписаться», я даю согласие на обработку персональных данных и соглашаюсь c политикой конфиденциальности
Мы отправили вам проверочое письмо — пожалуйста, подтвердите адрес электронной почты, перейдя по ссылке внутри письма.
Пожалуйста, попробуйте еще раз