Мобильных пользователей с каждым годом все больше: в 2023 году 54% всего трафика приходится на мобильные устройства. Оптимизировать сайт под них можно по-разному: с помощью адаптации дизайна или создания отдельной мобильной версии.
Вместе с Юлией Потаповой, Head of SEO в «Подружке» и автором канала «SEO_feya и факторы ранжирования», эксперты Топвизор-Журнала разобрались, какой способ лучше с точки зрения поисковой оптимизации.
Что такое мобильная версия сайта
Это отдельная от основной версия. Как правило, адрес мобильной версии выглядит так: m.mysite.com. Она может иметь другой дизайн, структуру и функциональность, чем основная версия сайта.
Так выглядит десктопная версия сайта «Подружки»:
Сайт «Подружки»
Так – мобильная. Посмотрите, что изменилось: блок «Умные рекомендации» стал меньше, разделы сайта представлены в виде иконок, будто сторис в соцсети.
Сайт «Подружки»: мобильная версия
Пользователи, которые заходят на сайт с мобильного устройства, автоматически перенаправляются на мобильную версию сайта. Поисковые системы индексируют контент мобильных версий сайтов отдельно от полной версии.
Плюсы мобильной версии:
- Контент такого сайта на мобильных устройствах быстро отображается, потому что он адаптирован и облегчен. Часто, если на десктопной версии используется 3D и прочие анимации, в мобильной версии их заменяют на простые изображения.
- В мобильную версию можно добавить дополнительный функционал, нерелевантный для десктопной версии.
- У пользователя остается возможность перейти на полную версию, если ему так удобнее (конечно, если вы добавите такую кнопку).
Минусы мобильной версии:
- Большие расходы на разработку и поддержку. Это самый дорогой способ адаптации под мобильные – по сути, вам нужно делать целый отдельный сайт.
- Бывает, что такая версия хорошо выглядит не на всех типах устройств, с которых люди выходят в интернет. На планшетах мобильная версия может отображаться хаотично, некрасиво растягиваясь на весь экран.
- Придется оптимизировать и администрировать версии отдельно, а значит, тратить больше ресурсов, настраивать редиректы и так далее.
- Мобильные и десктопные страницы лежат в индексе вместе – значит, могут дублироваться.
Что такое адаптивный дизайн сайта
Адаптивная верстка – это технология, при которой дизайн сайта подстраивается под разные разрешения экранов устройств, включая мобильные. Суть адаптивной верстки в том, что в этом случае десктопная и мобильная версия сайта – это один и тот же сайт.
Пример – сайт Топвизора. С компьютера он выглядит так:
Сайт Топвизора на десктопе
А вот так – с телефона:
Сайт Топвизора на смартфоне
При этом адрес у всех версий одинаковый – topvisor.com.
Плюсы адаптивного дизайна:
- Универсальность: сайт корректно отображается на любых устройствах. При этом речь не только о смартфонах, но и о планшетах (и даже умных телевизорах).
- Один URL для всех устройств, что упрощает управление сайтом – тут минимум редиректов.
- Этот способ дешевле, чем создание мобильной версии сайта.
Минусы адаптивного дизайна:
- Большие объемы кода: это может замедлить загрузку сайта на мобильных устройствах.
- Сложность реализации для технически изощренных, необычных дизайнов. И каждую новую страницу нужно создавать с учетом того, что она должна быть адаптирована.
- Сайт может загружаться медленно, потому что все скрипты и стили, которые актуальны для десктопной версии сайта, хоть и не используются, все равно существуют и влияют на скорость загрузки.
❗️Подробнее о том, как оптимизировать сайт под мобильные устройства всеми возможными способами, в нашем гайде по оптимизации под мобайл и в уроке 6 модуля 3 нашего бесплатного курса по SEO.
На что влияет адаптация под мобильные устройства
- Отображение на мобильных
Если сайт не адаптирован под мобильные устройства, то он может отображаться на них некорректно. Это негативно скажется на юзабилити и может привести к потере пользователей.
- Позиции в выдаче
И Google, и Яндекс учитывают адаптивность сайта при ранжировании страниц в выдаче поисковой системы. Более того, обе ПС (Google с 2015-го, Яндекс – с 2016-го) отдают в выдаче приоритет mobile-friendly-сайтам.
Причем у поисковых систем нет отдельных индексов под мобильные версии. Десктопные и мобильные версии страниц хранятся и ранжируются вместе. Раз индексация происходит с приоритетом мобильного контента, то при прочих равных выше будет ранжироваться сайт, который адаптирован под мобильные устройства.
- Трафик на сайт
В Яндекс Вордстате мы можем посмотреть, сколько раз какой‑либо запрос искали с компьютера, а сколько – с телефона.
Давайте на примере «заказать пиццу Ульяновск». 226 раз такой запрос вводили с компьютера:
Поиск с десктопа
И целых 1 836 – с мобильных устройств:
Поиск со смартфонов
Чем отличается SEO-оптимизация мобильной версии от адаптива
Поисковые системы воспринимают одинаково как адаптивный дизайн, так и отдельную мобильную версию сайта. В оптимизации обоими вариантами есть общее:
- В разделе < head > страницы нужно указать тег viewport. Он нужен, чтобы сообщить браузеру, как изменять масштаб страницы в зависимости от размера устройства пользователя.
- Нужно убрать горизонтальную прокрутку элементов, за исключением тех случаев, где это неизбежно, например в таблицах.
Но есть и небольшие различия в оптимизации.
Актуально только для мобильной версии
Запуск мобильной версии – это, по сути, тот же запуск нового сайта. Чтобы поисковые системы не сочли мобильный поддомен за аффилиат, необходимо обязательно провести ряд работ строго до запуска поддомена:
- Создать файл robots.txt для мобильной версии
Он может быть таким же, как у основного домена сайта, но может и отличаться. Важно в файле прописать корректный адрес sitemap.xml, принадлежащий поддомену.
- Создать файл sitemap.xml для мобильной версии
Она также может включать в себя все страницы основного сайта, однако необходимо не забыть о том, что все они должны принадлежать поддомену.
- Настроить заранее и установить на поддомен системы аналитики и панели вебмастеров
В Яндекс Метрике указать мобильный домен в графе «Адрес сайта» во вкладке «Счетчик». В Google Аналитике необходимо настроить междоменное отслеживание. Счетчики систем аналитики при этом останутся теми же.
А вот в Яндекс Вебмастере и Google Search Console необходимо создать новые ресурсы под мобильный поддомен.
- Сразу подключить поддомену протокол https и определиться, будет ли у поддомена www
Это будет важно на следующем шаге.
- Настроить атрибуты 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).
Запомнить
- Мобильная версия сайта – по сути, отдельный сайт, с отличным от десктопной версии контентом и адресом формата m.mysite.com.
- Адаптивный дизайн – такой вариант адаптации под мобильные устройства, когда не нужна отдельная версия. Вместо этого дизайн страницы подстраивается под ширину устройства.
- Оптимизировать сайт под мобильные нужно обязательно: это влияет на отображение ресурса, его позиции в выдаче и трафик на сайт.
- ПС одинаково воспринимают адаптивные страницы и мобильные версии сайтов. Но есть небольшие отличия в оптимизации: в мобильной версии надо будет настроить canonical- и alternative-страницы и провести ряд работ до запуска поддомена.
- Если у вас крупный ресурс с более чем 10 000 страницами, вам подойдет отдельная мобильная версия: будет проще анализировать трафик. Если сайт маленький, стоит делать адаптивный дизайн.
- Когда сайт настроен, нужно проверить удобство мобильной версии, скорость загрузки страниц (через Топвизор), правильное отображение в разных браузерах (вручную или через инструменты разработчика).