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

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

 

Используем информацию от Google: https://developers.google.com/webmasters/mobile-sites/?hl=ru-RU&utm_source=MFT&utm_medium=incoming-link&utm_campaign=MFT

 

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

 

  1. Выполнить проверку отображения сайта в мобильных устройствах
  2. Выбрать подходящий вариант
  3. Проверить корректность внедрения

 

Для того, чтобы выполнить проверку нужно воспользоваться ресурсом от Google:

https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru

 

Данный ресурс даст вам возможность определиться с тем, как Вы будете оптимизировать сайт:

 

 

Справка Google предлагает нам несколько основных вариантов https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/?hl=ru

 

  1. Адаптивный Дизайн
  2. Динамический показ
  3. Разные URL

 

1.   Адаптация дизайна сайта для мобильных устройств.

 

Подробнее - https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design?hl=ru

 

Варианты решения:

 

  • Если сайт разработан на CMS - можно выбрать из списка Вашу CMS и работать с рекомендациями по конкретной системе управления контентом:

 

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

 

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

 

Для того, чтобы проверить, какие рекомендации необходимо выполнить, проверяем сайт в сервисе от Google - https://developers.google.com/speed/pagespeed/insights/

 

Данная проверка не привязывается к GoogleBot, а дает общие рекомендации для оптимизации сайта для моб. устройств:

 

После проверки определенной страницы, вы получаете рекомендации:

 

Либо:

 

 

Также, эту информацию можно получить в инструментах для Веб-мастеров во вкладке “Совместимость с мобильными устройствами”

 

 

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

  • Используйте удобочитаемые размеры шрифтов
  • Настройте область просмотра
  • Адаптируйте размер контента для области просмотра
  • Увеличьте размер активных элементов на странице

 

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

Пример ТЗ.

 

Внимание! ТЗ может отличаться, в зависимости от того, какие рекомендации конкретно для Вашего проекта дал инструмент.

 

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

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

 

  • Также вариантом может быть простое редактирование шаблона сайта, например для настройки области просмотра.

 

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

 

Подробнее - https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/dynamic-serving?hl=ru

 

Динамичный показ подразумевает отправку сервером различных CSS и HTML ориентируясь на агент пользователя.

 

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

 

3. Разные УРЛы

 

Подробнее - https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls?hl=ru

 

Отдельно для мобильного сайта может быть сделан поддомен, который будет отображаться, например, с буквой M в начале, например: https://m.vk.com/

Подписаться Подписаться Подписаться