Связаться с нами

Здравствуйте, мы принимаем звонки по будням, 10:00—19:00

Центральный офис в Москве
+7 495 269-06-30
офис в Санкт-Петербурге
+7 812 425-32-54
Заказать звонок
Ru

Продвижение сайта в Google с помощью AMP

Google ранжирует сайты с мобильной версией лучше. Рассказали, как создать для сайта Accelerated Mobile Pages.

18 апреля 2018 года
1014

Продвижение сайта в 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-страницу 

Перед созданием обратите внимание, что контент на основном сайте и 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 страницы для связи.

Обычная страница

<link rel=”amphtml” href=”site.ru/url/to/amp/***.html”

AMP-страница

<link rel=”canonical” href=”site.ru/url/to/full/***.html”



Если на сайте вместо двух страниц используется одна с 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 апреля на интенсивном курсе Поисковый маркетинг. За два дня вы узнаете, как улучшить сайт, чтобы его чаще находили, но не нарушить правил поисковиков и не попасть под санкции. Приходите!

Материал подготовила Светлана Сирвида-Льорентэ.

SEO, Google

Вам будет интересно

Следите за нашими новостями
Подпишитесь на рассылку, и мы будем приглашать вас на наши мероприятия и делиться советами экспертов компании. Рассылка «Практика интернет-маркетинга» выходит дважды в месяц, в ней мы публикуем статьи о продвижении брендов в Интернете, делимся репортажами с крупных отраслевых событий и отвечаем на вопросы читателей.
Спасибо

Для завершения подписки вам необходимо перейти по ссылке,
присланной по указанному адресу email.

Произошла ошибка

Пожалуйста, попробуйте еще раз

Соглашение на обработку персональных данных

Настоящим в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» от 27.07.2006 года Вы подтверждаете свое согласие на сбор, хранение и обработку компанией «Ашманов и партнеры» персональных данных, указанных путем заполнения веб-форм на сайте ashmanov.com и его поддоменов *.ashmanov.com.

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

В случае необходимости предоставления Ваших персональных данных правообладателю, дистрибьютору или реселлеру программного обеспечения в целях регистрации программного обеспечения на Ваше имя, Вы даёте согласие на передачу Ваших персональных данных. Компания «Ашманов и партнеры» гарантирует, что правообладатель, дистрибьютор или реселлер программного обеспечения осуществляет защиту персональных данных на условиях, аналогичных изложенным в Соглашении на обработку персональных данных.

Настоящее согласие распространяется на следующие Ваши персональные данные: фамилия, имя и отчество, адрес электронной почты, контактный телефон, платёжные реквизиты.

Персональные данные хранятся и обрабатываются до завершения всех необходимых процедур либо до ликвидации Компании. Вы можете в любой момент отозвать настоящее согласие, направив письменное уведомление на адрес: 121357, Москва, ул. Верейская, д.29, стр. 134, Бизнес-центр «Верейская плаза 3», офис «Ашманов и партнеры» с пометкой «Отзыв согласия на обработку персональных данных». Вы также можете отказаться от получения электронных сообщений, используя ссылку «Отписаться», расположенную в конце каждого письма.

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

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