Google ранжирует сайты с мобильной версией лучше. Рассказали, как создать для сайта Accelerated Mobile Pages.
18 апреля 2018 года
1990
Продвижение сайта в Google невозможно без учета нового подхода к ранжированию сайтов — Mobile First Indexing. Google планирует понижать в поисковой выдаче сайты, у которых нет мобильной версии. Для удобства пользователей и ускорения загрузки страниц Google предлагает использовать технологию Accelerated Mobile Pages (AMP) — ускоренную мобильную версию сайта.
Что такое 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 воспользуйтесь нашей инструкцией.
1. Создайте AMP HTML страницу
Создайте файл с расширением html и скопируйте в него исходный код, который предоставляет Google. Его можно найти на ресурсах, посвященных AMP. Код похож на обычный, но имеет несколько отличий:
расширенный код в заголовке <head>;
теги <body> и <head> являются обязательными;
в нем должна быть подключена библиотека AMP JS.
2. Вставьте изображения
Изображения замедляют скорость загрузки и работы сайта, если они не оптимизированы. Google требует прописывать изображения через тег <amp-img> и загружать сразу требуемый размер, а не форматировать его с помощью браузера.
Отдельные требования выдвигаются к логотипам на сайте. Используйте логотип только растровом формате: jpg, png, gif. Не вставляйте иконки. Лучший вариант логотипа — полное название бренда на светлом фоне. Рекомендуемый размер 60 х 600px. Ширину можно изменять, высоту — нет.
Кроме изображений, в AMP страницах используйте аудио и видео. Прописывайте все через теги amp: <amp-img>, <amp-video>, <amp-audio>. Для анимированных изображений используйте <amp-anim>. Для аудио и анимации подключите специальные скрипты.
3. Структурируйте данные
Обязательно используйте микроразметку для продвижения в Google посредством технологии AMP. Google разработал отдельные стандарты структурирования данных для: статей, музыки, курсов, книг, рецептов, подкастов, видео, обзоров, вакансий и др. AMP поддерживает Open Graph Protocol, Twitter Card, но рекомендует использовать Schema.org. Тогда Google будет показывать сайт в карусели новостей и со структурированным сниппетом. Проверьте корректность микроразметки с помощью Search.google.com/structured-data/testing-tool. Вставьте в окно фрагмент кода или адрес страницы.
4. Настройте стили
Все оформление сайта должно быть прописано через стили в теге <head>. Общий вес CSS-стилей не должен превышать 50 КБ. Ссылки на сторонние стили запрещены, за исключением ссылок на используемые шрифты. Google разрешает использовать на AMP страницах шрифты с ресурсов Fast.fonts.net и Fonts.googleapis.com.
Прописывайте стили через <style amp-custom>. Указывайте все стили для каждой страницы. Сразу прописывайте точные размеры и данные. В AMP запрещено использовать следующие элементы:
классификатор “!important”;
универсальный селектор *;
:not();
названия классов, начинающихся с amp;
свойства “behavior”, “moz-binding”.
5. Проверьте валидность
Проверьте, корректно ли работает AMP страница. Для этого воспользуйтесь одним из трех способов:
проверьте с помощью инструмента Search.google.com/test/amp;
откройте в браузере и допишите в конец URL #development1, затем проверьте через Chrome DevTools;
на сайте валидатора validator.ampproject.org.
Если страница не прошла проверку, проверьте ее на наличие типовых ошибок:
проблемы с тегами: отсутствуют, используются запрещенные, прописан не тот текст внутри;
отсутствие обязательного атрибута или неверное значение;
использование запрещенного атрибута;
отсутствие обязательного текста;
отсутствие URL, недействительный URL или указание неверного протокола;
взаимоисключающие атрибуты;
размер таблицы стилей превышает 50 КБ;
ошибки в синтаксисе CSS;
неподходящий дизайн-макет страницы;
разные единицы измерения, например, px и em.
6. Подготовьте данные для поисковиков
Для индексации роботом Google вставьте ссылки на обычную и AMP страницы для связи.
Если на сайте вместо двух страниц используется одна с AMP кодом, добавьте ссылку на саму себя.
7. Опубликуйте в Интернете.
Запомните
Учитывайте особенности продвижения в 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, она должна ссылаться сама на себя.
Для сайтов с CMS используйте специальными плагины. Для WordPress — AMP от издателей Automattic и Kaludi, для Joomla — JAmp, для Drupal — Token и Chaos Tools.
Подробнее об этом и о многом другом мы расскажем 25-26 апреля на интенсивном курсе . За два дня вы узнаете, как улучшить сайт, чтобы его чаще находили, но не нарушить правил поисковиков и не попасть под санкции. Приходите!
Подпишитесь на рассылку, и мы будем приглашать вас на наши мероприятия и делиться
советами экспертов компании. Рассылка «Практика интернет-маркетинга» выходит дважды в месяц,
в ней мы публикуем статьи о продвижении брендов в Интернете, делимся репортажами
с крупных отраслевых событий и отвечаем на вопросы читателей.
Спасибо
Для завершения подписки вам необходимо перейти по ссылке, присланной по указанному адресу email.
Произошла ошибка
Пожалуйста, попробуйте еще раз
Подпишитесь на рассылку
и мы будем делиться советами экспертов и приглашать на наши мероприятия.
Отправить заявку
Спасибо
Менеджер свяжется c вами в ближайшее время
Спасибо
Менеджер свяжется с вами в ближайшее время.
Оставьте ваш номерИ мы перезвоним в удобное для вас время.
