Далеко не каждый сайт удобно просматривать на мобильном устройстве. Доля запросов со смартфонов при этом растет, а по последней статистике от Google и вовсе составляет 57 % в сравнении с ПК. Если вы все еще не настроили оптимизацию сайта для мобильных устройств, поисковик сделает это за вас. Так, еще в 2015 году был запущен механизм, понижающий в мобильном индексе сайты, которые не адаптированы под смартфоны и планшеты. А в 2018 году был запущен индекс Mobile-first, ранжирующий площадки на базе контента в мобайле. Причем используется он даже для поиска с ПК. Это значит, что далекие от идеала мобильные версии сайтов попросту падают в выдаче. Чтобы этого не произошло, вам нужно срочно узнать (и применить в деле!) основные правила Google в области мобильного SEO.
Список главных рекомендаций
Google советует проверять сайт на уровень оптимизации в Search Console. Так вы выясните, насколько страницы сайта удобны для пользователей смартфонов. Помимо проверки, в этом инструменте следует обеспечить выполнение еще 5 функций.
Оптимизация скорости загрузки
Google еще в 2018 году обозначил скорость загрузки сайта важнейшим фактором ранжирования. Причем решающее значение тут имеют даже сотые доли секунды. Исследования доказывают: пользователи хотят видеть ответ как можно скорее. Тем более, если это пользователи мобильных устройств, которые зачастую пользуются голосовым поиском. В этом случае скорость загрузки страниц особенно важна (подробнее об этом читайте в статье «Оптимизация сайта под голосовой поиск»).
Алгоритм не учитывает технические факторы, которые могут замедлять страницу. Однако главным сигналом ранжирования все еще остается пользовательский интент и релевантность страницы интенту. Следовательно, если качественная страница обладает высокой релевантностью мобильному запросу, но при этом медленно загружается, то она все равно займет высокие позиции в выдаче. Поэтому при оптимизации для смартфонов необходимо оценивать картину в общем, а не заострять внимание на отдельном факторе ранжирования.
Google-бот
Для грамотного ранжирования Google-бот должен определить, насколько ваш сайт «мобилопригоден». Если боту закрыт доступ в robots.txt, Google попросту не определит статус сайта. Естественно, позиции в выдаче изменятся не в лучшую сторону. Откройте Google-боту доступ к вашему сайту в параметрах файла robots.txt.
Адаптивный дизайн
Адаптировать дизайн сайта для мобильной версии — наилучшее решение, которое советует сам Google. Так, версии как для смартфонов, так и для ПК будут демонстрировать одинаковый контент, и не возникнет проблем с настройкой тегов rel=canonical, грамотностью определения типа устройства, дублированным контентом и т.д.
Однако бывают ситуации, когда адаптивный дизайн лишний. Речь идет о продающих лендингах. В этом случае вы рискуете понизить конверсию продаж, поскольку адаптированная версия лендинга будет попросту плохо продавать. Связано это с тем, что мобильный лендинг должен быть минималистичным и удобным для пользователя, чего не обеспечишь простой кастомизацией. Придется делать мобильный лендинг отдельно от основной версии сайта.
Search Console
Перейдем к главной рекомендации Google. Проверка в Search Console — это простой способ обнаружения недостатков мобильной версии вашего сайта. Проверить страницу несложно: вам нужно лишь прописать ее URL в строке инструмента. Само изучение страницы займет несколько секунд. Все перенаправления, имеющиеся на сайте, также будут изучены.
По итогам проверки вам будут доступны данные о том, как выглядит страница на смартфоне и какие проблемы возникнут при ее показе. Большинство проблем, как правило, связано со слишком мелким или слишком крупным шрифтом, а также с Flash-элементами, которые не принимает большая часть смартфонов.
Если Search Console не будет иметь доступа к странице, то перед вами появится соответствующее уведомление об ошибке. Если же на странице имеются непрогружаемые ресурсы, то вы увидите предупреждение. В качестве решения Google предлагает перезапустить тест, исправить URL, проверить сайт на открытие его анонимными пользователями и проверить доступ в robots.txt.
Блокировка лишних элементов
Google должен дать пользователю доступ к контенту. Не мешайте ему это сделать. На ранжирование отрицательно влияют различные поп-апы, реклама и иные интерактивные элементы, перекрывающие контент или усложняющие взаимодействие человека со страницей. Несколько лет назад Google представил обновление, призванное понизить в поиске те сайты, контент на которых закрывается появляющимися окошками.
Допустимы для Google следующие виды интерактивных элементов:
Допустимые для Google виды интеравктивных элементов
На первой картинке видно, что это всплывающее окно не полностью перекрывает доступ к контенту. Также окно обязательно должно содержать кнопку закрытия. Допустимо использовать поле для ввода данных и небольшой рекламный блок с кнопкой закрытия.
А вот что запрещено:
Запрещенные рекламные блоки
Это крупные раздражающие рекламные блоки, реклама на весь экран, незакрываемые поп-апы и прочее.
Форматирование текста
Предположим, вы хорошо поработали над мобильной страничкой. Она быстро загружается, отлично оптимизирована под смартфон или планшет, содержит релевантный контент и т.д. Однако сайт все равно получает невысокие позиции в выдаче. Причиной этого может быть неудобство чтения текста.
Пользователи мобильных устройств привыкли изучать текст в самых разных условиях: на ходу, при неправильном свете, на небольшом дисплее и т.д. А потому нужно обеспечить пользователю максимальный комфорт:
- крупный шрифт — минимум 15-16px;
- небольшие абзацы по 1-2 предложения;
- длина строки до 59 знаков;
- четко отображаемый текст (нет фоновой картинки, цвет шрифта высоко контрастен фону).
Соблюдайте также основные требования, касающиеся дизайна мобильных страниц. Обратите внимание на следующие моменты:
- Использование пустого пространства. Так вы повысите комфортность взаимодействия пользователя со страницей, ведь ему удобнее нажимать пальцем по нужным местам.
- Уменьшение заглавных картинок. Как мы уже говорили, пользователи мобильных устройств хотят получить ответ немедленно. А потому заглавная картинка на весь дисплей — не очень хорошее решение.
- Наличие социальных кнопок. Копировать и вставлять ссылки на смартфоне несколько сложнее, чем в браузере на компьютере. сли вы желаете добиться полноценной социальной огласки для контента, то упростите каждое действие пользователя.
Все представленные рекомендации помогут вам обеспечить наилучшее взаимодействие с потенциальным клиентом.
Вопреки популярному мнению, создание и использование AMP-страниц — далеко не главная рекомендация от Гугл. Есть мнение, что такие страницы лучше ранжируются, однако сам AMP-формат сильно ограничивает функционал страницы, а ссылки на эти страницы ведут на домен google.com, а не на сайт.
Частые ошибки
Какие ошибки может выявить Search Console при проверке мобильной версии вашего сайта? В Google Справочнике описаны 6 основных проблем.
Отсутствует viewport
Ошибка тут следующая: в коде страницы не прописано свойство viewport, которое сообщает браузеру о правильности изменения масштабов элементов страницы согласно размерам дисплея устройства. Чтобы сайт правильно демонстрировался на экранах разных размеров, настройте область просмотра согласно метатегу viewport. Если вы хотите изучить проблему подробнее, то сделать это можно в блоке «Основы адаптивного веб-дизайна» в Google Справочнике.
Экран не вмещает контент
В отчете прописываются страницы, на которых для изучения картинок и текста нужно использовать прокрутку горизонтального типа. Эта трудность возникает, когда размеры в стилях CSS задаются с помощью абсолютных значений или применяются в виде картинок, необходимых для какой-то ширины окна браузера. Вы сами увидите, что данные ширины и позиционирования элементов CSS относительны, а картинки масштабируются. Также не забудьте проверить открыты ли нужные стили CSS для Googlebot.
Неподходящие плагины
На страницах могут присутствовать плагины, не соответствующие большинству мобильных браузеров. К примеру, это плагины Flash. Вам нужно обеспечить на своей странице только актуальные программные модули с широкой поддержкой, например, HTML5. Правила по анимации на веб-страницах также можно найти в справочнике Google.
Значение device-width в метатеге viewport
Адаптация сайта для экранов различных размеров может быть невозможна, поскольку в ее коде прописано свойство viewport с фиксированной шириной. В такой ситуации рекомендуется применять адаптивный дизайн с настройкой масштабирования страниц согласно размерам экрана.
Близкое расположение интерактивных элементов
В отчете перечислены страницы, элементы навигации на которых располагаются слишком близко друг к другу. Из-за этого пользователю порой трудно прикоснуться к одному элементу так, чтобы не задеть другие. Вы должны заботиться об оптимальных размерах кнопок, ссылок и прочих элементов, а также расстояний между ними, чтобы обладателям смартфонов было удобно взаимодействовать с вашим сайтом.
Мелкий шрифт
Google предоставит вам информацию о том, на каких страницах шрифт слишком мелкий. На них пользователям приходится выполнять жесты увеличения масштаба, чтобы увидеть написанное. После настройки области просмотра потребуется определить размеры шрифтов, чтобы они демонстрировались максимально корректно и удобно.
