Продвигаем бизнес в Интернете с 2001 года

Как продвинуть сайт в Google

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

Последнее обновление: 02 октября 2019 года
9417

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

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

Продвижение сайта в Google
#SEO, #Google
Что такое алгоритм Е-E-A-T и как делать контент, который полюбит Google?
#SEO, #контент-маркетинг, #Google
Кейс «МТС Банк»: увеличили видимость и трафик с помощью информационного блога
#SEO, #Google, #Яндекс
Как закрыть сайт от индексации в robots.txt
#SEO, #Яндекс, #Google
Что такое SEO
#SEO, #Яндекс, #Google
Оптимизация сайта. Обзор методов и способов
#SEO, #Яндекс, #Google
Хотите обсудить ваш проект?
Напишите нам о своих бизнес-задачах, и мы предложим проверенные решения.
Отправить заявку

Доставляем экспертный контент

Мы делимся с подписчиками экспертным контентом: отправляем полезные статьи, советы от специалистов, приглашаем на вебинары. Подпишитесь, чтобы узнать больше о продвижении бизнеса в Интернете, наших мероприятиях и репортажах с крупных отраслевых событий. Выберите наиболее удобную платформу для вас и наслаждайтесь контентом!

Нажимая на кнопку «Подписаться», я даю согласие на обработку персональных данных и соглашаюсь c политикой конфиденциальности

Спасибо за подписку!

Мы отправили вам проверочое письмо — пожалуйста, подтвердите адрес электронной почты, перейдя по ссылке внутри письма.

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

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