Гид по SEO для мобильных сайтов: инфографика

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

Если вы хотите узнать, следует ли работать с мобильным трафиком в вашем ecommerce-проекте, следуйте рекомендациям из очередного выпуска «На Пальцах»:

А для снятия всех вопросов о том, что стоит делать в мобильном SEO, мы подготовили инфографику. 

Переходим к просмотру.

Три метода создания сайтов для мобильных устройств

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

NB: Google не отдает предпочтения каким-либо форматам URL, если страницы и все ресурсы на них доступны всем агентам пользователя Googlebot. Убедитесь, что поисковые системы (например, Google) правильно интерпретируют конфигурацию вашего сайта для мобильных устройств.

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

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

Чтобы сообщить браузеру, что ваша страница адаптируется к любым устройствам, добавьте в заголовок документа такой мета-тег: meta name="viewport" content="width=device-width, initial-scale=1.0".

Преимущества адаптивного дизайна

1. Google рекомендует использовать адаптивный дизайн по следующим причинам:
2. Пользователям удобнее делиться вашим контентом, если для него используется единый URL.
3. В этом случае алгоритмы Google точнее индексируют параметры страницы, а не регистрируют разные версии одной страницы.
4. Создание одной адаптивной страницы занимает меньше времени, чем создание нескольких вариантов одного содержания.
5. Снижается вероятность типичных ошибок, характерных для мобильных сайтов.
6. Не требует переадресации, что сокращает время загрузки. Кроме того, при переадресации с применением агентов пользователя часто возникают ошибки, что вряд ли понравится посетителям.
7. Экономия ресурсов при сканировании сайта роботом Googlebot. Агент пользователя Googlebot может просканировать страницу с адаптивным дизайном за один раз. В противном случае пришлось бы выполнять сканирование всех версий контента. Такое повышение эффективности сканирования позволяет Google точнее индексировать содержание вашего сайта и отражать его в поиске.

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

Динамический — это конфигурация, при которой сервер отправляет в ответ на запрос определенного URL различные варианты кода HTML и CSS. При выборе нужного варианта система ориентируется на агент пользователя. При этом не всегда очевидно, что мобильные устройства получают другой код (мобильный контент может быть «скрыт»). Поэтому рекомендуется, чтобы сервер предлагал системе выполнить сканирование также с помощью робота Googlebot для смартфонов. Для этого можно воспользоваться HTTP-заголовком Vary.

Разные URL

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

Рекомендации для Мобильного SEO

Не блокируйте Javascript, CSS и графические файлы

Рекомендуемые действия

1. Убедитесь, что Googlebot может сканировать JavaScript, CSS и графические файлы. Для этого в Инструментах Google для веб-мастеров есть функция «Просмотреть как Googlebot».
2. Проверьте свой файл robots.txt в Инструментах Google для веб-мастеров.
3. Проверьте свой мобильный сайт с помощью специального теста, чтобы узнать, насколько он удобен для пользователей телефонов.
4. Если у вас есть отдельные мобильные версии страниц, проверьте их наряду с URL для обычных компьютеров, чтобы убедиться, что переадресация выполняется без ошибок.

Избегайте невоспроизводимого контента

Рекомендуемые действия:

1. Чтобы посетителям было удобно просматривать сайт, применяйте для анимации HTML5.
2. Во встраиваемых видео используйте форматы, которые поддерживаются на всех устройствах.
3. Добавьте расшифровку видео. Тогда ваш сайт будет удобен для тех, кто использует вспомогательные технологии просмотра или браузеры, не поддерживающие ваш формат видео.

Ошибочные редиректы и перекрестные ссылки

Рекомендуемые действия

1. Используйте Инструменты для веб-мастеров для поиска ошибок URL и их исправления.
2. Настройте сервер так, чтобы пользователи смартфонов перенаправлялись на соответствующие страницы мобильного сайта.
3. Если у страницы нет мобильной версии, не настраивайте перенаправление. Пусть пользователи просматривают обычную страницу. В таком случае ошибок не будет.

Используйте 404

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

Межстраничные объявления с рекламой приложений

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

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

Медленная загрузка страниц

Рекомендуемые действия:

1. С помощью инструмента Google PageSpeed Insights узнайте, какие элементы вашей страницы могут замедлять загрузку страниц (эти данные приведены в разделе «Скорость»).
2. Постарайтесь устранить неполадки с пометкой «Исправьте обязательно».

Используйте «Rel=Alternate Media»

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

Используйте «Vary: User-Agent» HTTP Заголовок

Если редиректы сайта базируются на типе устройства или просто показывают другой контент (динамические ответы сервера), всегда устанавливайте HTTP заголовок возврата сервера «Vary: User-Agent».

Используйте «Rel=Canonical»

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

Используйте «Rel=next/prev»

Если сайт содержит пагинацию, вы должны также добавить атрибуты «Rel=next» и «Rel=prev». Как бы то ни было, помните, если количество объектов на одной странице разное на мобильной и на десктопной версии, вы не можете использовать «Rel=alternate» для кластеризации соответствующих страниц, так как контент не совпадает.

Дизайн сайта для мобильной версии

Мобильные девайсы упрощают пути создания сайтов. «Above the fold» (верхняя половина первой страницы сайта) больше не имеет смысла в мире, где мы все бесконечно прокручиваем.

Дизайн для большого пальца

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

Не используйте флеш

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

Не используйте Pop-Up окна (блокировщики)

Пользователи могут испытывать сложности с их закрытием на мобильном устройстве. Это может привести к высокому показателю отказов.

Оптимизируйте мета-теги

Запомните, что вы работаете с меньшим экраном и меньшим пространством, когда пользователь совершает поиск с мобильного девайса. Когда создаете Titles, URL и Descriptions, будьте так лаконичны, как только это возможно (без ущерба качеству информации).

Используйте Schema.org

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

Оптимизируйте под локальный поиск

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

Мобильная карта сайта

Создайте XML карту сайта для вашей мобильной версии и отправьте её в Google и Bing. Отделяйте мобильные страницы от десктопных.

Ключевые факты алгоритма mobile-friendly

• Google любит сайты mobile-friendly :);
• в настоящее время по всему миру используется 4 миллиарда мобильных устройств;
• 1,8 миллиардов из них — смартфоны;
• 50% локального поиска осуществляется с мобильных устройств;
• ⅓ от 700 миллионов пользователей Facebook используют Facebook Mobile;
• ½ из 175 миллионов пользователей Twitter используют мобильную версию Twitter Mobile;
• 86% пользователей мобильного интернета используют свои гаджеты при просмотре телевизора;
• отсутствие отклика от кликабельных элементов на странице может привести к сокращению конверсий на 7%.