Мобильная оптимизация сайта: зачем нужна и как обеспечить

Мобильная оптимизация: зачем она нужна и как ее обеспечить

Начиная с весны 2015 года Google представил свое новое детище — поисковый алгоритм «Mobile-friendly», призванный выявлять страницы, заточенные под смартфоны и формировать для них дополнительный рейтинг популярности, выводя на первые позиции сайты, с которыми по-настоящему удобно работать через телефоны.

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

Подробнее о алгоритме “Mobilefriendly

  • Google Mobile Friendly - анализирует выдачу только поисковой системы Google.
  • Google Mobile Friendly - меняет результаты исключительно мобильной выдачи Google. То есть сайты, на которые пользователи заходят через смартфоны, будут ранжироваться исходя из своей оптимизации под данные гаджеты.
  • Google Mobile Friendly - сервис оценивает отдельные страницы ресурса, а не весь сайт. Это значит, что оптимизировав под смартфоны хотя бы часть контента, вы уже принесете большую пользу всему сайту.

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

Критерии оценивания сайтов

Анализируя, насколько ресурс является дружественным для пользователей, посещающих его со смартфонов, новый алгоритм Google Mobile Friendly обращает внимание, в частности, на следующие ключевые моменты:

  • Размер шрифта и графики. Если страница будет отображаться так же, как на экране монитора ПК, то пользователь вряд ли сможет ознакомиться с содержимым сайта, поскольку оно будет слишком мелким, нечитабельным. Сайты, заточенные под телефоны, всю основную информацию дают крупным планом, а второстепенную либо убирают вообще, либо переносят на отдельные страницы.
  • Ширину страниц сайта. Неадаптированные под телефоны ресурсы имеют ширину, большую ширины экрана. Чтобы просматривать содержимое, приходится прокручивать страницу вправо/влево.
  • Размер активных элементов. На дружественном смартфону сайте не требуется увеличивать страницу, чтобы нажать на активную кнопку, баннер, ссылку.
  • Плагины. На смартфонах не считываются некоторые плагины, привычные для ПК. А потому в мобильных версиях сайтов необходимо использовать совместимое со смартфонами программное обеспечение.

Плюс, в качестве достаточно важного условия ранжирования сайтов выступает наличие у ресурса мобильной версии, проверенной ботом Google и установленной на смартфоне (совместимость пока только с Android). Если пользователь авторизован в системе Google, то в поисковой выдаче он увидит ссылку на соответствующее приложение. Перейдя по ней и запустив программу, человек увидит адаптированный под смартфон сайт.

Проверьте свой ресурс!

Хотите узнать, насколько приятен алгоритму Google Mobile Friendly будет ваш ресурс? Тогда воспользуйтесь специальными сервисами в панели для вебмастеров Гугл:

  • Mobile-Friendly Test. Дает возможность посмотреть на страницы сайта глазами поискового робота.

Mobile Friendly Test

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

Page Speed Insights

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

Способы адаптации сайта для мобильный устройств

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

Использование разных URL-адресов


Суть метода заключается в том, чтобы для каждого типа устройств (ПК и смартфонов) предусмотреть отдельные URL с отличными вариациями кодировки HTML. То есть в дополнение к уже имеющемуся ресурсу создается вспомогательный, заточенный под работу со смартфонами. Обычно для этого используется поддомен m.site.ru (или доменная зона .mobi).

Использование разных URL-адресов

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

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

Чтобы грамотно связать сайты, сделав их взаимозависимыми элементами:

  • В HTML-коде или в файле Sitemap.xml полноформатной версии сайта, необхлодимо к тегу «link» добавить атрибут rel=«alternate» с двумя значениями media (считывает разрешение экрана, определяя необходимость переключиться на вспомогательную версию) и href (ссылка на версию, заточенную под смартфон).
  • В коде оптимизированной версии к тегу «link» добавить атрибут rel=«canonical», ссылающийся на полноформатную версию сайта.

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

Более детально о процессе можно почитать в справочных материалах Google.

Динамический показ

Он предполагает, что для полноформатного и оптимизированного под смартфоны сайтов используется единый URL, но разные HTML-коды.

Динамический показ

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

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


Работает механизм следующим образом: при переходе на сайт браузер отправляет на сервер ресурса User-agent, информирующий о типе устройства, с которого осуществляется доступ к интернету. В ответ на это сервер посылает соответствующий формат HTML-кода и CSS, который браузер и открывает для пользователя.

Предоставлять корректную модификацию сайта важно также и поисковому роботу. При этом лучше использовать HTTP-заголовок «Vary», который даст понять роботу, что он имеет дело с оптимизированным для смартфонов контентом. Это позволит системе учесть ресурс при мобильном ранжировании, подняв его выше в списке.

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

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


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

Адаптивный дизайн с помощью css

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

Для реализации способа:

  • В мета-данные страниц сайта включается тег «meta name=«viewport»», дающий понять браузеру, что он имеет дело с сайтом гибкой структуры.
  • Для популярных CMS-сайтов используйте предлагающиеся платформами инструменты мобильной адаптации.
  • Работайте с пошаговыми инструкциями, рассказывающими, как создать сайт или лендинговую страницу с универсальной оптимизацией под пользовательские устройства.

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

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

Основные требования, предъявляемые к ресурсам, заточенным под смартфоны, аналогичны общим правилам сео-оптимизации сайтов. Это и создание уникального, информативного, качественного контента, и грамотная настройка параметров CMS, использование перелинковки и пр. При этом есть некоторые дополнительные моменты, игнорировать которые настоятельно не рекомендуется.

Правильно информируйте поискового робота

  • Обязательно дайте понять роботу, что ваш сайт поддерживает мобильную версию. Это обеспечит вам более приятное место в мобильной поисковой выдаче.
  • Позвольте поисковому роботу индексировать CSS, JavaScript и графические файлы сайта в Robots.txt. В противном случае даже при корректном отображении мобильной модификации, Гугл может не распознать дружественность ресурса к смартфонам. К слову, выявить ошибки в индексировании можно при помощи сервиса Robots.txt. и опции «Посмотреть как Googlebot».

Проверьте переадресацию

Если перелинковка между полноформатной версией сайта и мобильной выполнена некорректно, то пользователи смартфонов могут столкнуться с проблемой под названием «ошибка 404», когда нужная страница просто не будет открываться. Либо же посетители будут перенаправляться с нужной им страницы на какую-то другую.

При помощи опции «Search Console» от Google вы можете проанализировать механизм переадресации и внести корректировки.


Позаботьтесь о мультимедийном содержимом

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

Позаботьтесь о  мультимедийном содержимом

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

Уберите назойливые всплывающие окна

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

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

Сделайте более оперативной скорость загрузки


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

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

Подробнее о приемах можно узнать из раздела «Оптимизация контента» в справочном разделе Google.