КАК ПРОДВИНУТЬ САЙТ В GOOGLE
Продвижение сайта в 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-страницу
Перед созданием обратите внимание, что контент на основном сайте и 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.