Мобильных пользователей с каждым годом все больше: в 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-специалиста мобильная версия дает больше возможностей в оптимизации, поскольку она располагается на отдельном поддомене и является, по сути, отдельным сайтом: там можно сделать практически все что угодно. Это особенно важно, когда нужно облегчить и оптимизировать мобильную версию. |
Небольшим проектам
В этом случае обычно достаточно адаптива. К тому же стоит учитывать возможности и ресурсы команды разработчиков, поскольку разработка мобильной версии сайта требует выделения отдельных сил и средств на проект.
|
❗️Когда все выбрали и настроили, нужно проверить работу сайта. Это касается обоих вариантов адаптации. Вот на что смотреть:
Будем смотреть в «Анализе сайта» от Топвизора.
Тоже посмотрим в «Анализе сайта». Чтобы собрать показатели 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 страницами, вам подойдет отдельная мобильная версия: будет проще анализировать трафик. Если сайт маленький, стоит делать адаптивный дизайн.
-
Когда сайт настроен, нужно проверить удобство мобильной версии, скорость загрузки страниц (через Топвизор), правильное отображение в разных браузерах (вручную или через инструменты разработчика).
ВКонтакте
