Недавно поймал себя на мысли, что я единственный человек за обеденным столом, который во время ожидания заказа не пользуется смартфоном. Нет, это не очередная статья в духе «куда катится мир», — просто иллюстрация того, что мобильный поиск уже сейчас «двигает» интернет. Это не тренд, как любят писать SEO-аналитики, это реальность. Только очень богатый бизнес может пренебречь сайтом, оптимизированным для мобильных устройств. Или очень глупый.

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

1. Зачем вам мобильный сайт

Вы еще сомневатетесь в необходимости сайта, оптимизированного для мобильных платформ? Зря, и вот почему:

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

2. Архитектуры для создания мобильного сайта

Google рекомендует использовать адаптивный дизайн, но это не всегда возможно с технической стороны или же из-за уникальности определенного ресурса (особенно при наличии интерактивных элементов).

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

Типы мобильных сайтов

Каждый из этих подходов имеет свои сильные и слабые стороны. О них — далее.

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

Responsive design базируется на использовании CSS3 Media Queries и применении гибкого макета на основе сетки. Это позволяет автоматически изменять отображение сайта в зависимости от типа устройства и расширения экрана. Данный подход не требует использования 301-го редиректа или перенаправлений на другую страницу.

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

Плюсы и минусы адаптивного дизайна с точки зрения SEO:

За и против адаптивного дизайна

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

2.2. Динамическая подстановка контента

При динамическом обновлении контента сервер, проанализировав устройство, с котрого поступил запрос, возвращает разные страницы на один URL. Это происходит без перезагрузки открытой страницы. Пользователям мобильных устройств отдается адаптированная версия контента, которая находится по тому же адресу, что и версия для ПК. Хорошим примером такой структуры является сайт CNN.

Динамическая подстановка контента (CNN) Динамическая подстановка контента (CNN)

Преимущества и недостатки архитектуры на базе динамической подстановки контента для SEO:

За и против динамического обновления контента

Такой подход к архитектуре сайте позволяет создавать страницы с разным контентом для определенных устройств. Поскольку все эти страницы имеют одинаковый URL-адрес, нет проблем с дублированием и «раздроблением» ссылочной массы. Правда, поддержка и наполнения такого сайта стоит дороже, чем в случае с responsive design.

2.3. Параллельный мобильный сайт

Для мобильных устройств создается отдельный сайт с уникальной структурой URL (m.yoursite.com). При переходе на версию сайта, которая не предусмотрена для вашего устройства, осуществляется 301-ый редирект на корректную версию. Так, если со смартфона вы попытаетесь открыть адрес http://yoursite.com, вас автоматически перенаправит на http://m.yoursite.com.

Яркий тому пример — сайт ebay:

Отдельный мобильный сайт ebay Отдельный мобильный сайт ebay

Для SEO такой подход означает следующее:

За и против отдельного мобильного сайта

Создание отдельного сайта для мобильных устройств во многом похоже на динамическую подстановку контента: вы создаете страницы и контент для конкретных девайсов. Это отличная почва для CRO. Впрочем, у таких мобильных сайтов есть свои недостатки: «раздробление» ссылочной массы и вероятность дублирования контента.

3. SEO-аудит сайтов для мобильных платформ

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

3.1. Посещения

Ищем обзоры в Google Analytics:

Google Analytics: обзор

По аналитике видно:

  • сколько именно трафика мы получаем с мобильных устройств;
  • тенденции посещения сайта с планшетов и смартфонов;
  • основные поведенческие показатели (bounce rate, количество просмотренных страниц, конверсии и т.п. ).

3.2. Устройства

Далее следует определить, с каких именно устройств пользователи посещают ваш сайт (и какое у этих устройств расширение экрана):

Google Analytics: устройства

3.3. Отображение на разных устройствах

Но правильно ли контент отображается на каждом из девайсов? Для этого можно воспользоваться эмуляторами мобильных устройств, например, Mobile Phone Emulator или Opera Mobile Emulator:

Эмулятор мобильных устройств

3.4. Индексация поисковыми ботами

В Google Webmaster Tools (Сканирование → Ошибки сканирования) можно посмотреть, какие страницы выдают ошибки при сканировании ботом для мобильных устройств.

Google Analytics: смартфоны

Также в GWT стоит проверить, корректно ли роботы анализируют ваш сайт (Сканирование → Простмотреть как Googlebot)

Google Analytics: посмотреть как GoogleBot

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

PageSpeed Insights

3.5. Выбор архитектуры для создания мобильного сайта

А теперь самое главное: определите, подходит ли сайту его нынешняя архитектура. Тут следует учитывать не только полученную аналитику, но и специфику самого сайта и его аудитории. Алгоритм в помощь:

Выбор архитектуры для создания мобильного сайта

4. Советы по SEO-оптимизации мобильного сайта

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

Для адаптивной структуры:

  • убедитесь, что боты поисковых систем имеют доступ к изображениям, CSS-стилям и js (не закрывайте их через robots.txt);
  • используйте те CMS или фреймворки (например, Foundetion), которые обеспечат легкое внедрение адаптивного дизайна;
  • придерживайтесь рекомендаций Google по работе с responsive design;
  • т.к. одна и та же страница актуальна и для ПК, и мобильных устройств, необходимо исключить все элементы, которые могут отображаться некорректно и/или увеличивать время загрузки страницы.

Для сайтов с динамической подстановкой контента:

  • используйте перенаправления в зависимости от типа user agent для вывода контента на одном URL для декстопов и мобильных устройств;
  • убедитесь, что страницы корректно определяют тип устройства, а сервер возвращает контент правильной версии (см. пункт 3.4 данной статьи).

Для отдельных мобильных сайтов:

  • реализуйте структуру мобильного сайта на поддомене m., которая отвечает структуре сайта для ПК. Например, мобильная версия для URL http://yoursite.com/products должна иметь вид http://m.yoursite.com/products;
  • убедитесь, что при доступе к версии сайта, которая предназначена для другого типа устройств, срабатывает 301-ый редирект на корректную версию страницы. Например, пользователь с мобильного устройства, который пытается зайти на страницу http://yoursite.com/products, должен увидеть http://m.yoursite.com/products;
  • разместите тег на всех страницах десктопной версии сайта с ссылкой на соответствующую страницу мобильной версии. На страницах мобильной версии должен выводится на корректную страницу версии для ПК;

Мобильный сайт vs. десктоп

  • разместите ссылку с каждой страницы мобильной версии сайта на соответствующую страницу для ПК (и наборот);
  • Создайте Mobile XML sitemap для смартфонов и добавьте ее в Google Webmaster Tools через «Сканирование → Файлы Sitemap»;
  • включите в Google Analytics опцию отслеживания данных по всем субдоменам.

Адаптация сайта для мобильных устройств — непростой процесс, который требует дополнительных инвестиций. Но он необходим. Игнорировать огромный рынок мобильного поиска в 2014 году попросту губительно.

А вы уже сделали мобильную версию сайта? Какую архитектуру для этого выбрали и почему? Делитесь своим опытом с «мобильного SEO-фронта» в комментариях!