Mobile-first индекс в Google: что случилось и как дальше жить?

О важности адаптации сайта под мобильные устройства говорят уже давно, но после заявления Google о переходе на mobile-first индекс в 2018 году, обсуждение этого вопроса переходит на новый уровень.

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

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

В течение нескольких месяцев алгоритм еще будет тестироваться в ограниченном режиме, после чего запущен на глобальном уровне. Так что самое время к этому подготовиться.

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

Проверьте все ли хорошо (и что пошло не так)

Чтобы найти решение проблемы, необходимо сначала понять в чем ее суть. Для этого можно воспользоваться специальными инструментами, которые анализируют сайт на соответствие требованиям mobile-friendly.

Рекомендую обратить внимание на такие сервисы как:

• GTmetrix.com – проверка скорости загрузки;
• Varvy Mobile SEO – комплексный анализ адаптации под мобильные;
• Iloveadaptive.ru – проверка отображения сайта на смартфонах и планшетах.

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

Кстати, в Google Search Console есть специальный раздел (Поисковый трафик – Удобство просмотра на мобильных устройствах), в котором отображается информация по этому параметру алгоритмами поиска:

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

Переведите сайт на адаптивный дизайн

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

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

Пример как выглядит на экране мобильного адаптивная и неадаптивная версия одного и того же сайта:

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

Улучшайте скорость загрузки

В контексте оптимизации под мобильные устройства это один из наиболее важных моментов, так как пользователи смартфонов часто используют их на ходу и при подключении к 3G-сетям, так что терпения у них еще меньше чем у десктопной аудитории.

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

Проверить скорость конкретного сайта и получить рекомендации по ускорении его загрузки можно с помощью уже упомянутого в начале статьи GTMetrix.com и инструмента PageSpeed Insights от Google.

Основные причины медленной работы большинства сайтов:

• неоптимизированные файлы изображений большого объема;
• подключение большого количества CSS и JavaScript-кода;
• некорректная работа скриптов, которая замедляет сайт в целом;
• большое количество запросов к базе данных из-за проблем с оптимизацией самого движка и т. п.

Решить проблему можно путем уменьшения изображений через графические редакторы (с минимальным изменением качества), оптимизацией кода и исправлением ошибок в нем, включение gzip-сжатия на стороне сервера, уменьшения запросов к базе данных.

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

Проверьте соответствие контента в версии для PC и мобильных

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

В таком случае может встретиться ситуация, когда контент для PC-версии и мобильных отличается, например, отсутствуют какие-то блоки и прочие элементы страницы. С вводом mobile-first индекса при ранжировании в поиске на ПК не будут учитываться эти “скрытые” блоки, т.к. индекс формируется из мобильных версий, где этих блоков нет.

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

Откажитесь от проблемных технологий

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

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

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

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

Оптимизируйте архитектуру и доработайте юзабилити

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

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

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

Сенсорное управление отличается от навигации при помощи мышки, и это нужно учитывать. В данном случае прекрасно работает правило – чем проще, тем лучше.

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

К другим вопросам юзабилити, над которыми стоит поработать, относятся:

• Всплывающие окна и прочие попапы. От них нужно отказаться или найти адекватную альтернативу. На небольшом экране смартфона они могут перекрывать большую часть контента, что негативно влияет на пользовательский опыт;
• Расстояние между элементами интерфейса. Учитывайте тот факт, что удобное расположение элементов на десктопе может оказаться совершенно неудобным для использования на мобильных. Кнопки, баннеры и прочие составляющие интерфейса не должны «налезать» друг на друга. Убедитесь что это действительно так;
• Читабельность шрифтов. Они могут оказаться слишком мелкими, недостаточно контрастными или их цвет может сливаться с цветом основного фона. Этот момент тоже стоит проверить.

Таким образом, мы получаем ряд основоположных принципов, соответствие которым делает сайт по-настоящему mobile friendly, а значит и никаких изменений в алгоритмах можно будет не опасаться.

Время меняться

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

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

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

А как вы считаете, какие еще изменения стоит внедрить на сайте, чтобы улучшить качество его оптимизации под мобильные? Поделитесь своим мнением в комментариях!