Наш подписчик Алексей Гончаров в комментарии к статье «Что выбрать: приложение, адаптивный сайт или мобильную версию?» предложил еще один вариант адаптации сайта под мобильные устройства – мобильные шаблоны. Он обещал сам написать статью на эту тему и действительно написал. А мы, убедившись в её актуальности, публикуем.
В предыдущей статье речь шла о 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'
Небольшие советы:
- Мобильные шаблоны обязательно делайте «резиновыми». В них же постарайтесь использовать адаптивность, чтобы оптимизировать страницы для портретного и альбомного просмотра. Что касается шаблона для ПК – выбор за вами!
- Проверяйте, удобно ли просматривать страницу на мобильных устройствах. Для этого можно воспользоваться специальным инструментом от Google.
- Для разделения имен шаблонов используйте следующую схему:
страница.html – для ПК
cтраница_m.html – для мобильного
страница_t.html – для планшета (опционально)
На этом все. Надеюсь, что данная статья поможет вам работать с мобильными пользователями, при этом оставаясь на вершине поиска.
