5EEDAED5-6AA4-4553-94A3-AEF2477EDF6F
В чём смысл?

В апреле 2015 Google запустил алгоритм Mobile Friendly. Сайты, заточенные под мобильные устройства, получили приоритет в мобильном поиске и соответствующую пометку на страницах выдачи. К этому времени корпорация завоевала 40% российского рынка, поэтому сложно не учитывать его трафик.

У владельцев сайтов, которые Google посчитал недостаточно удобными для мобильных устройств, появились вопросы:

  • Как понять, какие страницы и элементы сайта не адаптированы?
  • Какую версию выбрать: мобильную или адаптивную?
  • Как адаптировать сайт под мобильные устройства?

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

Краткая инструкция
  1. Получите первую информацию в Search Console из отчёта «Удобство просмотра на мобильных». Отчёт поможет понять, на каких страницах есть проблемы с адаптацией.
  2. Найдите технические проблемы в PageSpeed Insights и выберите способ адаптации, чтобы доработать сайт:
    1. мобильная версия,
    2. динамический показ,
    3. адаптивная версия.
  3. Мобильная версия и динамика дешевле, но хуже для SEO. Адаптив лучше для пользователей и SEO, но дороже.
  4. Поручите разработчикам внедрить рекомендации и настроить адаптивную версию для правильной индексации в поисковиках.
  5. Ждите индексации новой версии и проверяйте сайт на сервисах Search Console и Mobile-Friendly Test. Убедитесь, что поисковый робот Google получает доступ к CSS для правильного сканирования.
Где тестировать сайт?
Search Console

Чтобы разобраться, какие страницы сайта не оптимизированы, используйте Search Console. Зайдите в раздел «Поисковый трафик», в нём найдите вкладку «Удобство просмотра на мобильных устройствах».

search_console

Во вкладке видны страницы, где встречаются проблемы с просмотром на мобильных. Алгоритм Mobile Friendly работает постранично, поэтому одна страница может быть дружественной, по мнению поискового робота Googlebot, а другая — нет.

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

PageSpeed Insights

Проверить техническую часть сайта помогает PageSpeed Insights. Сервис показывает, как выглядят страницы на мобильных устройствах и десктопе, оценивает скорость загрузки и удобство просмотра на смартфонах. Откройте вкладку «Для мобильных» и выберите блок «Удобство для пользователей».

При 80 баллах и выше считайте страницу адаптивной.

pagespeed_insights

Нажмите ссылку «Открыть скриншот» и посмотрите, какой именно элемент не удовлетворяет критериям поисковика.

pagespeed_insights_2

Общие советы для адаптации сайта:

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

Подробные рекомендации читайте на Google Developers.

Mobile-Friendly Test

Сервис Mobile-Friendly Test проверяет, как поисковый робот Googlebot видит сайт. Этим он отличается от PageSpeed Insights, который оценивает страницы только с технической стороны. Поэтому важно открыть для индексации ресурсы, отвечающие за внешнее отображение сайта.

mobile_friendly_test

Сервис помогает понять:

  • как Googlebot видит страницу (также можно зайти в Search Console, открыть «Сканирование» и выбрать «Посмотреть как Googlebot»);
  • что мешает страницам получить статус оптимизированных под мобильные устройства;
  • какие ресурсы заблокированы в файле robots.txt для корректного сканирования.

Чтобы увидеть, какие ресурсы недоступны роботу для корректного сканирования, нажмите на ссылку «Показать ресурсы».

mobile_friendly_test_2

Проверьте сайт в разных сервисах и поймите, насколько он «мобильный». Если есть проблемы, выберите способ адаптации: динамический показ, мобильная или адаптивная версия.

Какой способ адаптации выбрать?

Чтобы страницы сайта подстраивались под размер экрана и корректно отображались на разных устройствах, адаптируйте сайт одним из трёх способов.

Мобильная версия

Как работает

У десктопной и мобильной версий отличаются URL-адреса и коды. Если пользователь заходит с компьютера, то видит полную версию сайта, если с планшета или смартфона — мобильную.

Влияние на поиск

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

Трудозатраты

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

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

Как работает

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

Влияние на поиск

Google ранжирует страницы в зависимости от контента по разным вариантам поиска (веб и мобильном). Поисковый робот Googlebot может получать неполную версию страницы и ранжировать ее хуже адаптивных сайтов конкурентов.

Трудозатраты

Разработать версии дизайна и вёрстки под разные устройства. Мобильная версия требует больше времени специалистов.

Адаптивная версия

Как работает

При адаптивной версии сервер отправляет один и тот же HTML-код всем устройствам, но этот код отображается по-разному в зависимости от размера экрана.

Влияние на поиск

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

Трудозатраты

Инвестировать в продуманное проектирование, дизайн и вёрстку под разные разрешения, тщательное тестирование.

Что выбрать

Адаптивную версию. Она лучше для SEO и проще в администрировании — никогда не запутаетесь в контенте, а пользователи точно увидят версию сайта под их устройство.

Как происходит внедрение?

Чтобы сделать сайт «мобильным» с технической стороны, воспользуйтесь инструкцией для специалиста. Рекомендации подойдут в качестве руководства подрядчику.

Мобильная версия

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

Указать соотношение адресов полной и мобильной версии сайта.

Вариант 1: добавление атрибутов в HTML-код.

В <head> обычной версии сайта для каждой страницы добавляется <link rel=»alternate» media=»only screen and (max-width: 640px)» href=»http://m.example.ru/url» > — ссылка на ту же страницу, но в мобильной версии сайта.

В <head> страницы для мобильных устройств (http://m.example.ru/url) добавляется: <link rel=»canonical» href=»http://www.example.ru/url» > — ссылка на канонический адрес (версия страницы обычной версии сайта).

Вариант 2: добавление атрибутов с помощью файлов Sitemap.

Пример:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
  <loc>http://www.example.ru/url/</loc>
  <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.ru/url" />
</url>
</urlset>

Решение через sitemap.xml не очень удобное — нужно настраивать регулярное автообновление файла, что не всегда возможно. Обратите внимание: если используете атрибуты rel=»alternate» и rel=»canonical», то каждой обычной странице должна соответствовать только одна аналогичная мобильная версия и наоборот.

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

При динамическом показе для мобильных устройств используют разные коды, но один URL. Выбор кода обусловлен агентом пользователя. Для поискового робота настройте HTTP-заголовок Vary, чтобы предупреждать об изменениях в зависимости от агента пользователя. Это нежелательный вариант для SEO, потому что есть вероятность ошибки при определении агента. Иногда часть контента в мобильной версии скрыта, поэтому в мобильном поиске будут ранжироваться страницы с урезанным контентом.

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

При адаптивной версии для всех устройств используют один код с корректировкой по размеру экрана. Алгоритмы Google автоматически распознают такую конфигурацию, если все агенты пользователя Googlebot могут сканировать страницу и её ресурсы (CSS, JavaScript и изображения). Чтобы сообщить об адаптации страницы к любым устройствам, в заголовок документа добавьте метатег:

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

Он содержит инструкции для браузера по корректировке размеров и масштабированию страницы по ширине экрана устройства.

Плюсы адаптивной версии для SEO

Поисковые системы точнее индексируют параметры страницы, а не регистрируют разные версии одной страницы.

  • Не нужно настраивать переадресацию, что сокращает время загрузки. Также с переадресацией (с применением агентов пользователя) часто возникают ошибки.
  • Экономия ресурсов при сканировании сайта поисковым роботом. Он может исследовать страницу с адаптивным дизайном за один раз. Важно помнить, что при сканировании сайтов есть квоты на количество индексируемых документов.
Что почитать на тему?
  1. Cервисы для диагностики:
  2. Советы поисковиков:
Читайте также
Что к чему в брендинге: ответы на вопросы клиента
Ульяна Кожевникова
Недлинные тексты о пяти стратегиях.
Саша Майер
Специализированные термины из собственной вики по брендингу
Ульяна Кожевникова