Обсудим ваш проект?
Отправить заявку
Интернет-маркетинг,
который даёт результат
Россия: 8 (800) 775-63-20
Отправить заявку

Мобильная версия сайта на поддомене: особенности и этапы создания


Просмотров:
1244
Время на прочтение:
Статья обновлена:
20 Февраля 2020
Информация о статье
Просмотров: 1244
Время на прочтение:
Статья обновлена: 20.02.2020
Дарья Иванова, редактор
Станислав Мозгель, руководитель отдела разработки
Дарья Иванова, редактор
Станислав Мозгель, руководитель отдела разработки

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

Преимущества и недостатки мобильной версии сайта на поддомене

Основная и мобильная версии сайта размещаются в разных местах. Так, основной сайт имеет домен верхнего уровня (site.com), а мобильный находится на поддомене (m.site.com). Как только пользователь заходит на сайт, сервер определяет используемое устройство и перенаправляет пользователя на необходимую страницу путем переадресации HTTP и HTTP-заголовка Vary.

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

Используя адаптивную верстку, вы не сможете должным образом оптимизировать сайт для мобайла. Если вы остановите свой выбор на поддомене, то исключите из страниц ненужные JS-скрипты и иные данные. Дело в том, что крупные сайты со сложной структурой и «тяжелым» контентом не так уж просто адаптировать для мобильных устройств. Логичнее урезать некоторые данные и поместить их на отдельный поддомен.

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

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

Основным же недостатком этого метода считается сложность продвижения сразу двух версий сайта. У владельца площадки точно прибавится как затрат, так и работ. Изменения, которые вы будете вносить на основной домен, никак не отобразятся на мобильной версии. Наполнять и оптимизировать ее придется отдельно.

Чтобы избежать аффилиации (дублирования контента), на страницах мобильной версии укажите канонические ссылки на страницы основного домена. Используйте тег rel=«canonical». При этом на основном домене следует разместить ссылку на альтернативную версию страницы. Для этого используется тег rel="alternate".

Этапы создания мобильной версии сайта на поддомене

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

1. Выбор адреса поддомена мобильной версии

Специалисты Яндекса рекомендуют использовать букву “m” в качестве названия. Таким образом, вы получите адрес m.site.com, где site.com — домен продвигаемого ресурса. Так вы упростите индексирование поисковика роботом. К тому же пользователям привычнее воспринимать версию для смартфонов именно на таких поддоменах.

Важно, чтобы поддомен находился на домене основного сайта. Например, делать адрес m.twosite.com при домене site.com нельзя. В таком случае робот не поймет, к какому именно сайту относится мобильная версия. Вы не закроете дублирование контента с помощью тегов, и сайты будут конкурировать между собой.

2. Связь мобильной и основной версий

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

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.site.ru/">.

Это подскажет краулеру, где найти версию для мобайла. При этом на поддомене атрибут rel=”canonical” будет игнорироваться. Если же он уже прописан, то хуже точно не станет.

В зависимости от параметра user agent вам нужно настроить перенаправление с основной версии сайта на мобильную.

3. Индексирование

Мобильный сайт на поддомене должен быть доступен для индексации как основному, так и мобильному роботу. Добавьте поддомен в панель Яндекс.Вебмастера в качестве отдельного сайта. Подтвердите права и пропишите путь к sitemap.xml. Для мобильного поддомена формируется sitemap.xml и собственный robots.txt.

Если контент сайта для мобайла отличается от контента для основного ресурса, то в Host у robots.txt прописывается мобильный поддомен. Если же контент одинаковый, то указать можно и основной адрес. Однако нужно помнить, что в такой ситуации в мобильном поиске показываться будет адрес основного сайта.

4. Технические правки

Необходимо, чтобы на мобильной версии сайта метатеги title, h1, keywords и description точно соответствовали метатегам версии для десктопа. При смене метатега на site.com смена метатегов на m.site.com произойдет автоматически.

В десктопный шаблон сайта в блок <head></head> нужно включить следующий тег:

<meta name="viewport" content="width=device-width">.

В мобильную версию в такой же блок нужно включить тег:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">.

Вы можете настроить автоматический редирект пользователей мобайла на мобильный поддомен. В соответствии со справкой Google нужно настроить постраничный 302 редирект. Получается, если человек заходит со смартфона на site.com, то его автоматически отсылает на m.site.com. Помимо этого, следует задавать правила переадресации таким образом, чтобы пользователи при желании могли их обходить, то есть просматривать на мобильных устройствах сайт для ПК.

Оптимизация мобильной версии сайта на поддомене

Тему оптимизации мы подробно раскрыли в статье «Оптимизация сайта для мобильных устройств: рекомендации от Google». Здесь обратим ваше внимание на те моменты, которые касаются именно работы с поддоменами.

Мобильную версию сайта следует включить в Google Search Console и Яндекс.Вебмастер. Для этого задайте стандартные настройки:

  • определение региона сайта,
  • загрузка карты xml,
  • определение основного зеркала (с https или без него).

Установите такие же счетчики Google Analytics или Метрики, что и на версии для десктопа. Сделайте небольшой SEO-аудит мобильного поддомена и выявите основные ошибки. Проверьте скорость работы сайта. Так вы поэтапно оптимизируйте новую версию ресурса.

Поможем с сайтами на Битрикс!
Разрабатываем, развиваем и обеспечиваем бесперебойность работы сайтов на Bitrix. Работаем с сайтами любой технической сложности и бизнес-логики. В течение 2 часов реагируем на любые ваши задачи в тикетной системе. В команде 6 программистов и 3 технических менеджера.