Адаптация сайта под мобильные устройства
Как не потерять ТОП и заработать еще больше?

Наш подписчик Алексей Гончаров в комментарии к статье «Что выбрать: приложение, адаптивный сайт или мобильную версию?» предложил еще один вариант адаптации сайта под мобильные устройства – мобильные шаблоны. Он обещал сам написать статью на эту тему и действительно написал. А мы, убедившись в её актуальности, публикуем.

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

Мобильные шаблоны

Нашей основной задачей является демонстрация мобильной версии страницы, без замены ее URL-адреса. С точки зрения SEO такое продвижение весьма выгодно, так как страница будет отображаться одинаково высоко как в поиске с ПК, так и в мобильном поиске. Напомним, что компания Google ввела алгоритм Mobile-Friendly, который понижает позиции не дружественных к мобильным устройствам страниц в мобильном поиске. А с помощью метода, о котором поговорим сегодня, ваши позиции в мобильном поиске будут как минимум не ниже, а то и выше.

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

Из всего вышесказанного следует вывод: надо определять «мобильность» пользователя в момент запроса. Мы создаем 2 шаблона для страницы: мобильный и шаблон для ПК. Далее мы ищем любое упоминание о «мобильности» пользователя в HTTP_USER_AGENT и, если мы нашли его, показать мобильный шаблон, если нет – шаблон для ПК.

При данном подходе мы достигаем сразу нескольких важных преимуществ:

• один URL-адрес страницы, который гораздо проще продвигать;
• оптимизированные под мобильных пользователей и пользователей с ПК страницы.

Просто и эффективно, не правда ли? Как это ни странно, данных метод легче и быстрее в реализации, чем адаптивность.

Как искать упоминания о мобильности?

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

Достаточно такого списка выражений:

'up.browser', 'up.link', 'mmp', 'symbian', 'smartphone', 'midp', 'wap', 'phone', 'windows ce', 'pda', 'mobile', 'mini', 'palm', 'netfront', 'opera mobi', 'iphone', 'android', 'xda', 'tablet', 'ipad', 'playbook'

А как же планшеты?

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

Для определения с планшета можно воспользоваться следующим списком выражений (не забудьте убрать их из списка для телефона):

'tablet', 'ipad', 'playbook'

Небольшие советы:

1. Мобильные шаблоны обязательно делайте «резиновыми». В них же постарайтесь использовать адаптивность, чтобы оптимизировать страницы для портретного и альбомного просмотра. Что касается шаблона для ПК – выбор за вами!
2. Проверяйте, удобно ли просматривать страницу на мобильных устройствах. Для этого можно воспользоваться специальным инструментом от Google.
3. Для разделения имен шаблонов используйте следующую схему:

   страница.html – для ПК
   cтраница_m.html – для мобильного
   страница_t.html – для планшета (опционально)

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

---

---

Правила комментирования блога