Инструкция по оптимизации мобильного сайта

Google настоятельно настаивает использовать адаптивный дизайн тогда, когда это целесообразно для пользователя, в то время как Bing призывает вебмастеров всегда создавать отдельные мобильные версии сайтов.

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

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

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

Если вы считаете, что не является он решением и для вашего сайта, то знайте, что вы в этом убеждении не одиноки. В Великобритании 13 из 14 компаний разделяют ваше мнение – то есть, предоставляют мобильным пользователям отдельную версию десктопного сайта. В случае с США ситуация примерно та же – 70% сайтов, входящих в топ-100,000 ресурсов перенаправляют мобильных пользователей на страницы, созданные специально для просмотра с мобильных устройств.

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

Информационная архитектура

Информационная архитектура – первое, о чем нужно подумать при создании мобильной версии сайта. Главное преимущесто мобильно сайта (перед тем, что выстроен с помощью адаптивного дизайна) - вы можете сделать его абсолютно непохожим на десктопную версию. Теперь задайте себе несколько вопросов, и постарайтесь на них ответить:

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

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

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

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

• Имя: Мобильный трафик – без планшетных устройств
• Include: «Мобильные устройства (включая планшеты)», Содержит «Да»
• Exclude: «Разрешение экрана», Поиск (1\d|[7-9])\d\d+x.*

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

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

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

Учтена ли специфика мобильных устройств?

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

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

Что насчет пользователей планшетных устройств?

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

Разумеется, десктопная версия не подойдет, в случае ориентации именно на аудиторию пользователей планшетов. В этом случае вам, возможно, даже понадобится создать отдельный третий поддомен (t.domain.ru).

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

Javascript редиректы использовать нельзя, лучше серверную переадресацию (редирект 301 или 302). Использование Javascript снижает скорость загрузки страницы (странице нужно загрузить и проанализировать сценарий), и, к тому же, страницы с Javascript переадресацией имеют меньше шансов на добавление в кэш. Не забывайте и о десктопных пользователях: убедитесь, что пользователь ПК, введя адрес мобильной версии сайта, будет перенаправлен на десктопную версию.

• В инструкциях от Google сказано, что допускаются как 301, так и 302 редиректы
• Используя технологию определения пользовательского агента, остерегайтесь клоакинга
• Не стоит переадресовывать все десктопные страницы на домашнюю страницу адаптивной версии сайта. Старайтесь перенаправлять пользователей на те мобильные страницы, содержание которых соответствует содержанию изначально запрошенных десктопных страниц. То есть, если пользователь мобильного телефона попытался перейти на десктопную страницу с вашей контактной информацией, перенаправьте его на мобильную страницу с теми же данными. Если для каких-то десктопных страниц у вас нет соответствующей мобильной версии, перенаправляйте пользователей на страницу с объяснением этого факта, извинениями и предложением просмотреть запрошенную страницу в компьютерной версии
• Выстраивайте URL-структуру по типу «зеркала» (чтобы www.site.ru/hello перенаправлял пользователя на m.site.ru/hello, а не на m.site.ru/xi3l3kxd). Это не всегда возможно. Речь идет о сайтах, не для каждой десктопной страницы которых существует соответствующая мобильная версия.
• Включите ссылку для просмотра десктопного сайта в мобильную версию и наоборот. Используйте Cookies, чтобы убедиться, что если пользователь кликает по такой ссылке, определитель пользовательского агента отключается и не перенаправляет пользователя на ту же версию, с которой он пришел (если только он сам не хочет вернуться, кликнув на «просмотреть мобильную версию»).
• Во избежание появления дублированного контента, вам нужно использовать специальный атрибут rel='canonical'. Этот пункт будет раскрыт подробнее чуть позже.