Как оптимизировать сайт под мобильную выдачу?

Валерия Полякова

Редактор-переводчик SEOnews

В апреле 2015 года Google запустил алгоритм mobile-friendly, а в феврале 2016 года Яндекс выкатил алгоритм «Владивосток», который расставил все точки над i в вопросе адаптации пользовательских сайтов под различные гаджеты.

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

Протестируйте свой сайт

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

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

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

Обновите ПО

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

Оптимизируйте используемую тему оформления для мобильных устройств

Тему необходимо найти в панели управления вашей CMS и затем посмотреть, есть ли в ее описании такие понятия, как mobile (мобильный) или responsive (адаптивный). Если в теме доступна демонстративная страница, ее нужно проверить на удобство просмотра с мобильных устройств. Быстродействие используемого шаблона можно проверить с помощью инструмента PageSpeed Insights.

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

Обсудите детали с разработчиком

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

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

Настройте конфигурацию сайта для устройств разных видов

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

• Адаптивный дизайн. В этом случае сервер отправляет один и тот же код HTML всем устройствам, но код отображается по-разному. Поисковики рекомендуют использовать этот вариант.
• Динамический показ. Здесь для разных устройств используется один URL, но разные варианты кода HTML. Система будет руководствоваться доступной информацией о браузере пользователя при выборе нужного варианта.
• Разные URL. Для разных устройств используются разные варианты кода и разные URL. Система определяет тип устройства, а затем перенаправляет на нужную страницу с помощью переадресации HTTP и HTTP-заголовка Vary.

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

Сообщите поисковику

Первое, что советует сделать Google – это сделать адаптивный дизайн сайта. Второй способ – это разные сайты для десктопов и мобильных устройств. В этом случае следует обязательно прописать атрибут rel=”alternate”, который будет отсылать к мобильной версии сайта. Так Google поймет, что есть две версии одного и того же сайта – мобильная и обычная. Для мобильной версии сайта следует прописать атрибут rel=”canonical”, который будет отсылать на обычную версию сайта.

Яндекс же рекомендует для начала проверить сайт на дружественность к мобильным устройствам в новом Вебмастере. Проверка ресурса может послужить для Яндекса подсказкой, что у сайта есть мобильная версия. Как именно она должна выглядеть, можно узнать здесь. Также необходимо использовать мета-тег meta name="viewport" content="width=device-width, initial-scale=1", чтобы указать область просмотра контента.

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

Этот вопрос мучает большинство владельцев сайтов, задумавшихся о мобильной версии ресурса. Чтобы помочь роботу правильно определить мобильную версию сайта, Яндекс, к примеру, рекомендует указывать на страницах URL мобильной версии. Например, с помощью элемента link:

link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html"

Артур Смирнов, Head of Mobile, Adventum:

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

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

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

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

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

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