Практические рекомендации по SEO под мобильные устройства
28 февраля 2019

Практические рекомендации по SEO под мобильные устройства

Адаптивность сайта влияет на ранжирование страниц в мобильной и десктопной поисковой выдаче.

Но как правильно оптимизировать сайт для соответствия требованиям поисковой системы?

Далее приведены практические советы по оптимизации сайта и ответы на вопросы.

Практические советы по SEO под мобильные устройства


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

После улучшения мобилопригодности улучшаются поведенческие факторы страницы и сайта.

1 — Используйте HTTP/2


HTTP/2.0 является улучшенной версией протокола HTTP.

При использовании протокола HTTP/2 уменьшается объем передаваемых данных и скорость загрузки страниц возрастает.

В результате протокол HTTP/2 косвенно влияет на позиции сайта.

В HTTP/2.0 есть ряд улучшений:

  • Поддерживается мультиплексирование. Использование мультиплексирования позволяет загружать статические элементы параллельно, как результат повышается скорость загрузки страницы;
  • Заголовки передаются в сжатом виде. Уменьшается лаг при открытии страницы и уменьшается объем передаваемых данных;
  • Приоритизация позволяет выстроить загрузку страницы сайта так, чтобы основное содержание загружалось в самом начале;
  • HTTP2 является бинарным протоколом, что повышает скорость работы на мобильном устройстве и сервере сайта.

Использование протокола HTTP2

2 — Создайте адаптивную версию сайта


Сайт переписывать нет необходимости. Используя CSS и JS разработайте адаптивный шаблон для сайта.

Итак, у сайта будет два CSS стиля:

  • Полная версия сайта;
  • Мобильная версия.

Верстка страницы в адаптивном стиле:

Верстка страницы в адаптивном стиле

3 — Откройте CSS и JS для индексации


При анализе страниц поисковые системы анализируют CSS, JS и прочие файлы, поэтому подобные файлы должны быть открыты для индексации в robots.txt и отдавать верный код ответа.

Анализ проводится для создания рендера страницы.

Процесс обработки страницы в виде инфографики представлен далее:

Процесс попадания сайтов в поисковую выдачу

Часто поисковые оптимизаторы закрывают подобные файлы от индексации. Причины разные. К примеру, специалист может использовать данные файлы для скрытия коммерческих блоков от поисковых систем. Такие конструкции следует вынести в отдельные файлы и закрыть доступ именно к ним.

Ссылки на стили и скрипты, которые отвечают за мобилопригодность обязательно должны быть открыты к индексации.

4 — Удалите элементы, которые не поддерживаются мобильными браузерами


Если на сайте есть подобные элементы, то удалите их с адаптивной версии сайта.

Удалите следующие элементы:

  • Всплывающие окна, которые препятствуют доступу к странице, включая всплывающие окна с предложениями установить приложение или открыть полную версию сайта;
  • Вставки с Silverlight и подобными технологиями.

Поисковая система распознает на страницах всплывающие элементы.

Санкции за popup

Если элемент перекрывает главный контент, то позиции страницы могут быть понижены в поисковой выдаче. Санкции могут быть применены за использование подобных элементов.

Санкции за popup

5 — Настройте перелинковку, если для мобильной и десктопной версии используются разные хосты


Адаптивный дизайн сайта является наилучшим решением. Но если создать адаптивный стиль нельзя, то есть смысл создать версию мобильного сайта на отдельном хосте.

Если на сайте используется отдельный адрес для мобильной версии, следует настроить перелинковку.

Перелинковка для мобильной и десктопной версии сайта

Добавить разметку следует не только на мобильной, но и на полной версии сайта.

На мобильной версии сайта следует указать:

<link rel="alternate" href="desktop">

В полной версии сайта следует указать:

<link rel="alternate" href="mobile">

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

Если на сайте используется адаптивный дизайн, разметка не требуется.

6 — Замените механизм загрузки дополнительного контента с AJAX на CSS


Поисковая система считает мобильную версию страницы основной версией. И если на мобильной версии контент не выводится, то краулер может не индексировать часть содержания.

Скрытие контента на странице допускается при условии, если контент загружается при открытии документа и далее скрывается посредством стилей.

Контент на странице скрыт

Поисковой системой Google допускается скрытие контента с использованием стилей:

On the mobile version of the page it can be that you have these kind of tabs and folders and things like that, which we will still treat as normal content on the page. Even if it is hidden on the initial view.

7 — Оптимизируйте скорость загрузки страницы


Google оценивает скорость загрузки сайта. Рекомендуемый ориентир по скорости загрузки страницы на мобильных устройствах составляет 1 секунду.

Это сложно реализовать. Но есть бесплатные инструменты, которые могут помочь достичь амбициозной цели.

Прежде всего, следует использовать инструмент от Google. Ссылка на инструмент — PageSpeed Insights.

Инструмент позволяет провести оценку скорости загрузки сайта и выдает бесплатные рекомендации, которые следует использовать, чтобы ускорить процесс загрузки страницы.

Google PageSpeed Insights

Далее следует проверить сайт посредством WebPageTest.org, выбрав мобильный браузер из меню, так как по умолчанию инструмент будет использовать для оценки скорости загрузки сайта обычный браузер.

Скорость загрузки в Webpagetest

Дополнительный инструмент для анализа скорости загрузки от Google называется Test My Site.

Ссылка на сервис — Test My Site.

Анализ через TestMySite

8 — Оптимизируйте параметры текста


Сделать текст более читаемым на мобильном устройстве можно используя следующие рекомендации:

  • Используйте размер шрифта 14 пикселей, лучше 15 или 16;
  • Используйте короткие абзацы, 1-2 приложения в абзаце;
  • Разбавляйте текст графическими элементами;
  • Сделайте контраст между текстом и фоном, пользователи используют телефоны на улице, что может затруднять чтение низкоконтрастного текста на солнце;
  • Сделайте интерлиньяж между параграфами в 50 — 60 символов.

Адаптивный дизайн сайта

9 — Используйте Viewport Content


Если на сайте используется адаптивный дизайн, следует добавить мета-тег viewport.

Тег изменяет размер страницы сайта в зависимости от размера устройства пользователя.

Google рекомендует прописать мета-тег так:

<meta name=viewport content= width="device-width initial-scale=1">

Использование в адаптивной верстке viewport

10 — Оптимизируйте первый экран


Выполните 2 простых улучшения:

  • Используйте много контрпространства. Контрпространством называется пространство между текстом, кнопками и элементами дизайна;
  • Минимизируйте контент, расположенный до заголовка текста.

Если у пользователя возникнут проблемы с чтением контента или с поиском того, что ему нужно, то у сайта будет низкий Dwell Time. Реализация подобных улучшений позволит задержать пользователя на сайте.

Рекомендованный материл в блоге MegaIndex по теме Dwell Time по ссылке далее — Фактор ранжирования Dwell Time — что это и как его оптимизировать для роста позиций в выдаче?

Использование на сайте контрпространства является одним из простых способов улучшить Dwell Time и уменьшить показатель отказов.

Контрпространство в дизайне

11 — Оптимизируйте длину сниппетов


Оптимизация тегов заголовка и описания улучшает показатель переходов из поисковой выдачи на страницу.

Средние значения для выдачи на десктопе:

  • Title: 70 символов;
  • Description: 155 символов.

Средние значения по выдаче на мобильных устройствах:

  • Title: 78 символов;
  • Description: 155 символов.

Рекомендованный материал в блоге MegaIndex по теме улучшения сниппетов по ссылке далее — Как увеличить количество переходов на сайт из поисковой выдачи — Создание эффективных сниппетов.

12 — Используйте Accelerated Mobile Pages


Если с внедрением адаптивного дизайна есть сложности, то следует использовать Accelerated Mobile Pages.

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

Ссылка на проект AMP — AMP Project.

Технология AMP разрабатывается и поддерживается Google.

Google показывает в поисковой выдаче маленький значок рядом AMP страницами, который может повысить кликабельность сайта:

Поисковая выдача AMP страниц

При открытии страницы, в строке браузера будет выводиться адрес Google. Если на подобные страницы будет размещена внешняя ссылка, то вес будет перетекать к доменному имени google.com.

Пример URL для сайта indexoid.com:

http://google.com/amp/s/indexoid.com

AMP URL при открытии сайта

Вопросы и ответы


Что лучше: мобильная или адаптивная версия сайта?


Не рекомендуется использовать отдельную мобильную версию сайта:

Версия сайта для мобильных устройств

При использовании адаптивной версии сайта проще клеить поведенческие факторы. В целях поисковой оптимизации следует использовать адаптивную версию сайта.

Как проверить сайт на адаптивность?


По заявлениям Google, mobile-friendly дизайн повышает удовлетворенность пользователей сайтами и результатами поиска, так как полные версии сайтов было не удобно просматривать и использовать на мобильных устройствах.

Итак, адаптация сайта под мобильные устройства проводится для повышения позиций в Google. Но как провести проверку выполненной работы?

Google разработал специальный инструмент, чтобы помочь оптимизаторам с выполнением проверки сайтов на адаптивность. Инструмент называется Mobile-Friendly Test.

Ссылка на инструмент — Mobile-Friendly Test.

Google Mobile-Friendly тест пример

Есть инструмент и в Google Search Console. Ссылка на инструмент — Удобство для мобильных.

Удобство для мобильных

Аналогичный инструмент есть в панели веб-мастера в Yandex. Инструмент называется Проверка мобильных страниц.

Ссылка на инструмент — Проверка мобильных страниц.

Yandex Mobile-Friendly тест пример

Почему адаптивность сайта стала фактором ранжирования?


В алгоритме ранжирования поисковых систем отсутствуют лишние элементы. Ничего не внедряется просто так. Любые гипотезы проверяются на практике.

Фактор адаптивности сайта к мобильным устройствам был внедрен по причине роста аудитории на мобильных устройствах в большинстве стран мира.

Использование мобильной и десктопной версии сайта

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

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

По данным Google, на мобильных устройствах выполняется свыше 27,8 миллиарда запросов, что больше, нежели на компьютерах.

Динамика роста мобильных и десктопных устройств

Следует заметить 3 аспекта:

  • Мобилопригодность влияет на формирование результатов поисковой выдачи;
  • Влияние распространяется на результаты поиска на всех языках и по всему миру;
  • Поисковый алгоритм оценивает страницу, а не весь сайт в целом.

Что такое мобильные устройства в понимании Google?


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

Согласно пониманию Google, мобильными устройствами следует считать и другие типы устройств.

Google:

when we speak of mobile devices, we generally do not include tablets in the definition

Под мобильными устройствами имеются виду смартфоны

Основная идея здесь заключается в оптимизации сайта под любые устройства.

Адаптивный дизайн сайта - пример

Как называются алгоритмы?


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

Алгоритм ранжирования от Google, который оценивает сайт на предмет адаптивности к мобильным устройствам, в среде поисковых оптимизаторов называется Mobilegeddon.

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

Заявление от Yandex:

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

Есть ли подтверждения на практике?


Сразу после внедрения алгоритма поисковой системой Google было проведено пару исследований.

Специалисты из Search Metrics обнаружили, что в среднем показатель потери позиций для не адаптированных сайтов составил 0,21.

Специалисты Bright Edge исходя из анализа 20,000 страниц обнаружили, что 21% не адаптированных страниц был понижен в поисковой выдаче в рамках топ-30 результатов.

Есть ли влияние на десктопную поисковую выдачу?


Да, адаптивность сайта является фактором ранжирования при формировании поисковой выдачи на любых устройствах.

Еще не следует забывать про поведенческие факторы. Если сайт интересен для целевой аудитории, то трафик улучшает поведенческие факторы страницы и сайта. Значит, также есть опосредованное влияние на результаты обычной поисковой выдачи.

Влияние адаптивной версии сайта на поисковую выдачу

Выводы


Поисковая оптимизация сайта состоит из комплекса внешних и внутренних работ над сайтом. Комплекс мер по адаптации сайта к мобильным устройствам входит в комплекс работ по внутренней оптимизации и является задачей с высоким приоритетом, в случае если трафик из поисковой выдачи для мобильных устройств занимает значимую долю.

Итак, выводы в сжатой форме:

  • Поисковые системы используют мобилопригодность страницы как фактор ранжирования при формировании результатов поисковой выдачи;
  • Мобилопригодность страницы является одним из многих факторов ранжирования;
  • Следует проводить мониторинг позиций как для десктопной, так и для мобильной поисковой выдачи;
  • Сайты следует адаптировать под мобильные устройства. На адаптированных страницах не должно быть горизонтальной прокрутки. На сайте не должно быть элементов, которые не поддерживаются многими браузерами: Java-апплеты, Silverlight-плагины и прочее;
  • На обеих версиях следует использовать одинаковый текстовый и графический контент;
  • Делать сайт адаптивным следует ради пользователей, которые все активнее потребляют контент с мобильных устройств. Способы описаны выше.

Кстати, используя MegaIndex можно провести базовый SEO аудит сайт. Приложение находится в стадии разработки и предоставляется на бесплатной основе. Ссылка на сервис — MegaIndex Аудит.

Остались ли у вас вопросы, мнения, комментарии по теме мобилопригодности сайта?

Обсуждение

12:57 1 марта 2019
Art.Bodnaruk
Если уже используется мобильная, а не адаптивная версия сайта, что лучше использовать для улучшения поведенческих факторов? Да и вообще дальнейшей оптимизации.
13:49 1 марта 2019
mordekai74
Адаптив лучше. Имхо. При мобильной версии придется избавляться от дублей, устанавливать каноничные страницы и т.д. и т.п. Мобильная версия - это второй сайт с индентичным контентом. Адаптив - один и тот же сайт.
17:07 1 марта 2019
Дмитрий Угниченко
Да, адаптивная версия лучше.
17:08 1 марта 2019
Дмитрий Угниченко
Если сайт настроен и есть трафик, то далее следует создать адаптивный стиль для основной версии сайта. После тестирования, с мобильных версию поставить 301-ый редирект на адаптивную.
13:08 1 марта 2019
stanislav_441
Большое спасибо, очень интересная статья! И читается легко.
https://testmysite.withgoogle.com - есть ли смысл пользоваться этим инструментом?
P. S. Можно ли сделать оповещения на почту об ответах на комментарии? Было бы очень удобно.
17:08 1 марта 2019
Дмитрий Угниченко
Да, смысл определенно есть, поскольку инструмент позволяет добиться реального повышение скорости загрузки. Вполне реальное выполнить все рекомендации и получить наивысшую оценку.
13:20 1 марта 2019
smertin88
Если по 4 пункту(рекламный блок превышает 50% первого экрана) сайт уже получил понижение в выдачи, то как вернуть позиции и выйти из под санкций?
P.S.: Рекламный блок снят неделю назад.
17:07 1 марта 2019
Дмитрий Угниченко
Есть смысл в переиндексации сайта. Попробуйте переиндексацировать страницы и сделать новый рендер через Search Console.
10:16 2 марта 2019
smertin88
Это понятно, сделали. Как быстро вообще можно из под него выйти и возможно ли вообще?
12:30 4 марта 2019
Дмитрий Угниченко
Я на своих сайтах с подобными санкциями не сталкивался.
13:25 1 марта 2019
Art.Bodnaruk
Ещё интересны улучшения по протоколу HTTP/2.0. Есть какие-то подтверждения касательно увеличения скорости загрузки и стоит ли в первую очередь заниматься этим?
17:08 1 марта 2019
Дмитрий Угниченко
Да. Замеры на скорость открытия страницы показывают повышение скорости загрузки. С приоритетами следует определяться исходя из полноты знаний о проекте.
09:16 15 марта 2019
aryaankhan424
If the site is configured and there is traffic, then you should create an adaptive style for the main version of the site.
Для добавления комментария, пожалуйста, авторизуйтесь