Поисковая оптимизация мобильных сайтов для других устройств

Планшетные ПК

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

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

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

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

Заказать адаптацию сайтов под мобильные устройства

Отображение контента для определенного гаджета

Ваш интернет-портал может предлагать различным типам устройств содержимое, которое отличается кодом HTML, CSS, JavaScript и т.п. Если такие страницы имеют одинаковый URL, то технология носит название «динамического показа», а также каждая веб-страница может быть зарегистрирована под своим адресом. 

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

• Использовать динамический показ, который будет предоставлять один URL сайта, но выбирать HTML-код и прочие адаптивные параметры, наиболее подходящие для определенного гаджета, определяемого по User Agent. В предыдущих статьях уже говорилось, что в таком случае следует применить заголовок Vary.

• Создать специальные сайты на других URL для планшетников. Необходимо открыть доступ роботу поисковой системы Google для сканирования домена и применить часть тега «rel="canonical"» для всех страниц веб-сайта, чтобы сообщить о наличии соответствующего адреса для компьютерной версии.

Мобильные устройства среднего класса

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

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

Чтобы сервер отправлял основной URL для отображения содержимого ресурса среднеклассовым сотовым телефонам, следует применить ту же конфигурацию, что и для смарт - HTTP-заголовок Vary: User-Agent. Не менее важно ознакомиться, предупредить или устранить возможные неполадки в определении User Agents.

Разные URL

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

Свой URL для каждой категории приборов с выходом в сеть Интернет. 

Если вы создали разные версии одного сайта, подходящие для платформ различного типа, то скорее всего вы выбрали такие виды доменных имен:

• http://www.example.com/page-1 – для стационарных ПК;
• http://m.example.com/page-1 – для смартфонов;
• http://phone.example.com/page-1 – для телефонов среднего класса.

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

• ПК: <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />, а также <link rel="alternate" media="handheld" href="http://phone.example.com/page-1" />;
• Смартфон: <link rel="canonical" href="http://www.example.com/page-1" />;
• Мобильный телефон среднего класса: <link rel="canonical" href="http://www.example.com/page-1" />.

Разные URL для стационарных ПК и гаджетов

Данная технология веб-разработки обусловливает отображение содержимого сайта, находящегося на одном URL для ПК, а на других гаджетах, с учетом среднеклассовых мобильных телефонов, будет отображаться контент, находящийся на другом URL. К примеру:

• Пользователи ПК увидят страницу, расположенную в домене http://www.example.com/page-1;
• Браузеры мобильных телефонов перейдут по адресу http://m.example.com/page-1.

В таком случае части тега для компьютерной верстки будут иметь следующий вид: <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" /> и <link rel="alternate" media="handheld" href="http://m.example.com/page-1" />. 

Для кода мобильной версии сайта необходимо использовать атрибут <link rel="canonical" href="http://www.example.com/page-1" />.

Фрагмент тега rel="canonical" должен быть внесен на все страницы веб-сайта, которые предназначаются для смарт- и обычных мобильников.

Главный сервер обязательно должен включать в свой код HTTP-заголовок Vary:  User-Agent. Это позволяет роботу кэш и поисковой системы определять лучший вариант отображения содержимого веб-сайта, исходя из данных User Agent. Поисковики для мобильных браузеров также учитывают эти данные. 

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

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

• Юзеры ПК и смартфонов перейдут по адресу: http://www.example.com/page-1;
• Владельцы мобильных телефонов – http://m.example.com/page-1.

Тогда фрагменты для основного сайта будут выглядеть, как <link rel="alternate" media="handheld" href="http://m.example.com/page-1" />, а для адаптации сайта под мобильные - <link rel="canonical" href="http://www.example.com/page-1" />.

Перенаправление по адресу и HTTP-заголовок Vary

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

Что касается фалов Sitemap для адаптивных URL и версий сайта для среднеклассовых мобильных устройств, следуйте стандартных параметрам настройки.