Что лучше выбрать с точки зрения SEO: адаптивную вёрстку или мобильный сайт

Мобильных пользователей с каждым годом всё больше: в 2023 году 54 % всего трафика приходится на мобильные устройства. Оптимизировать сайт под них можно по‑разному: с помощью адаптации дизайна или создания отдельной мобильной версии.

Вместе с Юлией Потаповой, Head of SEO в «Подружке» и автором канала «SEO_feya и факторы ранжирования», разобрались, какой способ лучше с точки зрения поисковой оптимизации.

Что такое мобильная версия сайта

Это отдельная от основной версия. Как правило, адрес мобильной версии выглядит так: m.mysite.com. Она может иметь другой дизайн, структуру и функциональность, чем основная версия сайта.

Так выглядит десктопная версия сайта «Подружки»:

Так — мобильная. Посмотрите, что изменилось: блок «Умные рекомендации» стал меньше, разделы сайта представлены в виде иконок, будто сторис в соцсети.

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

Плюсы мобильной версии:

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

• В мобильную версию можно добавить дополнительный функционал, нерелевантный для десктопной версии.

• У пользователя остается возможность перейти на полную версию, если ему так удобнее (конечно, если вы добавите такую кнопку).

Минусы мобильной версии:

• Большие расходы на разработку и поддержку. Это самый дорогой способ адаптации под мобильные — по сути, вам нужно делать целый отдельный сайт.

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

• Придётся оптимизировать и администрировать версии отдельно, а значит, тратить больше ресурсов, настраивать редиректы и так далее.

• Мобильные и десктопные страницы лежат в индексе вместе — значит, могут дублироваться.

Что такое адаптивный дизайн сайта

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

Пример — сайт Топвизора. С компьютера он выглядит так:

А вот так — с телефона:

При этом адрес у всех версий одинаковый — topvisor.com.

Плюсы адаптивного дизайна:

• Универсальность: сайт корректно отображается на любых устройствах. При этом речь не только о смартфонах, но и о планшетах (и даже умных телевизорах).

• Один URL для всех устройств, что упрощает управление сайтом — тут минимум редиректов.

• Этот способ дешевле, чем создание мобильной версии сайта.

Минусы адаптивного дизайна:

• Большие объемы кода: это может замедлить загрузку сайта на мобильных устройствах.

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

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

На что влияет адаптация под мобильные устройства

1. Отображение на мобильных

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

2. Позиции в выдаче

И Google, и Яндекс учитывают адаптивность сайта при ранжировании страниц в выдаче поисковой системы. Более того, обе ПС (Google с 2015‑го, Яндекс — с 2016‑го) отдают в выдаче приоритет mobile‑friendly‑сайтам.

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

Индексирование с приоритетом мобильного контента — Справка Google

Оптимизация для мобильных как фактор ранжирования — Блог Яндекса для веб‑мастеров

3. Трафик на сайт

В Яндекс Вордстате мы можем посмотреть, сколько раз какой‑либо запрос искали с компьютера, а сколько — с телефона.

Давайте на примере «заказать пиццу Ульяновск». 226 раз такой запрос вводили с компьютера:

И целых 1 836 — с мобильных устройств:

Чем отличается SEO‑оптимизация мобильной версии от адаптива

Поисковые системы воспринимают одинаково как адаптивный дизайн, так и отдельную мобильную версию сайта. В оптимизации обоими вариантами есть общее:

1. В разделе <head> страницы нужно указать тег viewport. Он нужен, чтобы сообщить браузеру, как изменять масштаб страницы в зависимости от размера устройства пользователя.

Как работать с метатегом viewport

2. Нужно убрать горизонтальную прокрутку элементов, за исключением тех случаев, где это неизбежно, например в таблицах.

Но есть и небольшие различия в оптимизации.

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

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

1. Создать файл robots.txt для мобильной версии

Он может быть таким же, как у основного домена сайта, но может и отличаться. Важно в файле прописать корректный адрес sitemap.xml, принадлежащий поддомену.

2. Создать файл sitemap.xml для мобильной версии

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

3. Настроить заранее и установить на поддомен системы аналитики и панели вебмастеров

В Яндекс Метрике указать мобильный домен в графе «Адрес сайта» во вкладке «Счётчик». В Google Аналитике необходимо настроить междоменное отслеживание. Счетчики систем аналитики при этом останутся теми же.

А вот в Яндекс Вебмастере и Google Search Console необходимо создать новые ресурсы под мобильный поддомен.

4. Сразу подключить поддомену протокол https и определиться, будет ли у поддомена www

Это будет важно на следующем шаге.

5. Настроить атрибуты rel=“canonical” и rel=“alternate”

На основном домене прописываем в атрибуте rel=“alternate” адрес аналогичной страницы на поддомене, а на мобильном поддомене в атрибуте rel=“canonical” прописываем аналогичный адрес страницы на основном домене.

Canonical: что это за атрибут и как прописать канонический адрес страницы

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

Как и зачем оптимизировать сайт под мобильные — Справка Google

Рекомендации по оптимизации сайтов для mobile — Вебмастер Справка

Что в итоге лучше выбрать

Крупным проектам

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

Небольшим проектам

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

Запомнить

1. Мобильная версия сайта — по сути, отдельный сайт, с отличным от десктопной версии контентом и адресом формата m.mysite.com.

2. Адаптивный дизайн — такой вариант адаптации под мобильные устройства, когда не нужна отдельная версия. Вместо этого дизайн страницы подстраивается под ширину устройства.

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

4. ПС одинаково воспринимают адаптивные страницы и мобильные версии сайтов. Но есть небольшие отличия в оптимизации: в мобильной версии надо будет настроить canonical‑ и alternative‑страницы и провести ряд работ до запуска поддомена.

5. Если у вас крупный ресурс с более чем 10 000 страницами, вам подойдёт отдельная мобильная версия: будет проще анализировать трафик. Если сайт маленький, стоит делать адаптивный дизайн.

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

Ещё интересные статьи на тему 👇

Руководство для SEO‑специалистов по техническому SEO

Как сделать качественный SEO‑аудит сайта самостоятельно: полное руководство

57 бесплатных инструментов для SEO‑специалиста