Адаптивная верстка или мобильный сайт – что выбрать с точки зрения SEO

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

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

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

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

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

Сайт «Подружки»

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

Сайт «Подружки»: мобильная версия

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт Топвизора на десктопе

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

Сайт Топвизора на смартфоне

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

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

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

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

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

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

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

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

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

❗️Подробнее о том, как оптимизировать сайт под мобильные устройства всеми возможными способами, в нашем гайде по оптимизации под мобайл и в уроке 6 модуля 3 нашего бесплатного курса по SEO.

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

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

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

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

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

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

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

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

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

Поиск с десктопа

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

Поиск со смартфонов

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

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

1. В разделе < head > страницы нужно указать тег 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” прописываем аналогичный адрес страницы на основном домене.

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

❗️Еще можно (но не обязательно) указывать относительные, а не абсолютные ссылки при внутренней перелинковке. Относительные ссылки – это ссылки без указания домена. Абсолютная ссылка: https://journal.topvisor.com/ru/marketing/how‑to‑read‑source‑code‑for‑seo/ Относительная ссылка: /ru/marketing/how‑to‑read‑source‑code‑for‑seo/ Это поможет не запутаться в поддоменах, наличии/отсутствии www в адресе, особенно когда страниц много. Так все ссылки будут одинаковыми и ничего не придется переделывать.

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

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

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

❗️Для SEO-специалиста мобильная версия дает больше возможностей в оптимизации, поскольку она располагается на отдельном поддомене и является, по сути, отдельным сайтом: там можно сделать практически все что угодно. Это особенно важно, когда нужно облегчить и оптимизировать мобильную версию.

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

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

❗️Когда все выбрали и настроили, нужно проверить работу сайта. Это касается обоих вариантов адаптации. Вот на что смотреть: Удобство мобильной версии и индексируемость Будем смотреть в «Анализе сайта» от Топвизора. Нажмите «Настроить» или откройте «Настройки» → «Страницы для проверки»: В открывшемся окне нажмите на плюсик («Импорт URL») и введите список URL / загрузите их из файла. Нажмите «Импорт»: Затем нажмите кнопку «Проверить»: После завершения аудита перейдите на вкладку «Сводка», чтобы увидеть все замечания и проблемы в общем отчете: Перейдите в раздел «Страницы» → «Индексируемость». В первом столбце будет указан код ответа для каждой страницы: Core Web Vitals страницы Тоже посмотрим в «Анализе сайта». Чтобы собрать показатели Core Web Vitals для определенного устройства, нажмите «Настройки» → «Дополнительные настройки»: В открывшемся окне выберите нужный тип устройства для проверки: Показатели Core Web Vitals будут во вкладке «Страницы» → Core Web Vitals. Здесь будут собраны все показатели CWV, включая LCP, FID и CLS, для каждой страницы: Правильное отображение в разных браузерах Можно открыть сайт в разных браузерах и посмотреть так, а можно воспользоваться инструментами разработчика и эмулировать нужный браузер. Для этого вызовите «Инструменты» горячими клавишами Ctrl + Shift + I (или ⌘ + Shift + C на macOS).

Запомнить

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

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

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

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

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

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