Разработка мобильной версии сайта WordPress для органического продвижение в Google

Google рекомендует использовать адаптивный дизайн для сайта, поскольку все устройства будут получать один код, но он будет виден по-разному (т. е. адаптироваться) к размеру экрана. Кроме того, в приоритетах поисковой системы – получение пользователями релевантного контента, который удобен к просмотру.

Разработка мобильной версии под Google
Что же такое удобно для пользователя?

  • область просмотра в границах экрана;
  • отсутствие масштабирования и избежание прокрутки;
  • легко читаемые размеры шрифтов;
  • крупные и не мешающие друг другу ссылки (интерактивные элементы).

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


Какие самые распространенные ошибки?

Отсутствие метатег viewport – он важен для правильной обработки браузером размеров и масштабов страницы для отображения на разных расширениях экрана. Он размещается в head на каждой странице сайта.
Чтобы решить проблему, нужно добавить такую строчку:
<meta name="viewport" content="width=device-width, initial-scale=1"/ >

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

Слишком маленькое расстояние между интерактивными элементами – проблема вызвана расположением ссылок слишком близко друг к другу, когда пальцем нельзя нажать так, чтобы не зацепить другой.
Чтобы решить проблему, нужно установить минимальную ширину и высоту не менее 48 пикселей. Можно и мельче, но тогда margin: 30px для таких элементов обязателен.

Также, рекомендуем сразу (без предупреждений) добавить микроразметку OpenGraph, а для многоязычного сайта прописать тег hreflang. При наличии плагинов мультиязычности Polylanf или WPML - тег hreflang будет добавлен автоматически, а если вы используете языковые версии на поддоменах без плагина мультиязычности - то нужно будет добавлять через плагин Hreflang Manager.

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

Версия для печатиВерсия для печати