Главная » Hi-Tech » Мобильный сайт или адаптивная вёрстка: что лучше с точки зрения SEO

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

Дмитрий Мрачковский, оптимизатор из «Ашманов и партнёры», рассказал, как выбрать между адаптивом и мобильным сайтом и с какими неочевидными проблемами предстоит столкнуться.

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

Даже среди крупных игроков я не заметил перевеса в пользу какого-то решения. Трудно однозначно ответить на вопрос, какая технология адаптации под смартфоны и планшеты эффективнее с точки зрения SEO. Но давайте разберём, какие преимущества получают первые и вторые. «М.Видео», DNS, Wildberries, Aviasales используют адаптивную вёрстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс.Маркет» — мобильные сайты.

Адаптивная вёрстка сайта «М.Видео» и мобильный версия сайта «220 Вольт»

У этого есть плюсы: Адаптивная вёрстка помогает обойтись без разработки отдельной мобильной версии.

  • Нам не требуется отдельная структура страниц для отображения на мобильных устройствах. Достаточно откорректировать десктопную версию сайта с помощью CSS.
  • Для десктопной и мобильной версий используется единый URL-адрес. Поэтому контент сайта не дублируется, страницы не конкурируют между собой, а работа по продвижению влияет на ранжирование в десктопном и мобильном поисках.

Её можно редактировать, не влияя на основной сайт. Мобильная версия — более затратное и гибкое решение. Это даёт преимущества:

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

Она показывает пользователю десктопный или мобильный шаблоны в зависимости от устройства, но при этом URL-адрес страницы не меняется. Хочу отметить ещё одну технологию — RESS. Но у неё есть и два минуса: сложная и дорогая реализации и ошибки с определением редких и непопулярных моделей телефонов. RESS сочетает описанные выше плюсы адаптива и мобильной версии.

Проблемы с адаптивной вёрсткой

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

Ошибочная интерпретация адаптива

В зависимости от устройства пользователя нужная часть кода остаётся видимой, а остальная скрывается с помощью display: none. Некоторые реализуют адаптивную вёрстку неверно и выводят на одной странице в коде сразу два шаблона — десктопный и мобильный. Так возникают три проблемы:

  1. Все элементы контента загружаются дважды: тексты, изображения, заголовки H1 и H6, хлебные крошки, сопутствующие и рекомендуемые товары и так далее. А поисковые системы очень не любят дубли.
  2. Неиспользуемые части контента скрываются с помощью CSS. Мнение поисковиков по этой проблеме неоднозначно. Google заявляла, что игнорирует содержание скрытых блоков, а «Яндекс» — что учитывает контент страницы целиком. Большинство SEO-специалистов сходится во мнении, что такая схема создаёт риск попадания под санкции.
  3. Код дублируется, и сайт загружается медленнее.

Подобная реализация — неправильный подход к технологии RESS.

Скрытие ненужных элементов

Всё лишнее скрывают с помощью display: none. Чтобы сделать интерфейс адаптивной версии удобнее, некоторые избавляются от части функциональности: отвлекающих блоков, больших текстов в категориях каталога и так далее. К тому же, как уже говорилось выше, у поисковиков спорное отношение к такому контенту — есть риск попасть под санкции. Но проблема в том, что для загрузки страницы используется весь код, и сайт работает медленно.

Неверное использование JavaScript

Но этот способ ничем не лучше display: none. Некоторые используют JS, чтобы не отображать лишние блоки на мобильных устройствах. Поисковые системы вообще не всегда верно воспринимают содержимое AJAX, особенно если не выполнен ряд условий для корректной индексации. Возникает риск, что поисковики не проиндексируют предназначенный для них контент даже на десктопной версии.

Почему всё-таки используют адаптивный дизайн

Выбор адаптива обычно обусловлен двумя основными плюсами: разработкой только одной версии сайта и отсутствием проблем с несколькими URL-адресами.

Мы направляем все усилия на один домен и получаем результат в десктопном и мобильном поисках. Также это удобное решение для продвижения на несколько регионов. Для этого нужно привязать к сайту интересующие регионы в «Яндекс.Справочнике».

Адаптивную вёрстку с единым доменом очень успешно использует «М.Видео». А для Google создать страницу с адресами филиалов, чтобы поисковик понял, в каких регионах вы работаете. У магазина высокие позиции в мобильной и десктопной выдачах по товарным, категорийным и информационным запросам.

В этом случае поддоменам вроде spb.site.ru, samara.site.ru, kazan.site.ru присваивают регионы через «Яндекс.Вебмастер» и затем прописывают заголовки и мета-теги с указанием топонима. Можно пойти другим путём — использовать геоподдомены, чтобы повысить текстовую релевантность страниц. Такой способ продвижения практикует MediaMarkt. Ещё один плюс — для геоподдоменов легко настроить отдельную аналитику, чтобы отслеживать результаты по регионам.

Проблемы с мобильными версиями сайтов

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

Двойная работа по продвижению

Начать оптимизацию нужно с того, чтобы мобильная версия корректно индексировалась и не конкурировала с десктопной. Мобильный сайт оптимизируется и продвигается отдельно от основного, и на это требуется больше ресурсов, чем в случае с адаптивом. Для этого свяжите их в «Яндекс.Вебмастере» и Search Console, пропишите корректные атрибуты rel="alternate", настройте индексацию и генерацию XML-карты.

Хаос из-за абсолютных ссылок в контенте

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

  • Если у десктопной версии определяется user agent, пользователю откроется мобильная версия страницы.
  • В остальных случаях пользователь увидит десктопную страницу, и работа по созданию мобильной версии будет напрасной.

Чтобы проблема не возникла, используйте в контенте относительные ссылки. При этом внутренний ссылочный вес сайта может нарушиться. То есть у атрибута href указывайте /page/ вместо https://site.ru/page/.

Противоречия рекомендаций Google

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

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

Для этого достаточно установить атрибут rel="alternate" с основной версии на мобильную и ещё можно настроить 301-редиректы с десктопной версии на мобильную, учитывая user agent устройства. У «Яндекса» в этом плане всё чётко — он отдельно индексирует контент мобильных и десктопных страниц.

Неясность требований mobile-first индекса

Правда, в рекомендациях относительно mobile-first есть свои неясности. Чтобы подготовиться к переходу на mobile-first индекс, логично выбрать мобильную версию сайта в качестве канонической страницы. Например, в руководстве Google сказано, что контент мобильной и десктопной версий должен быть аналогичным, но степень «аналогичности» не раскрывает.

А что, если для ранжирования в десктопном поиске требуется определённый блок контента, который в мобильной версии будет лишним, но приоритет будет отдаваться именно мобильной версии?

Выдержка из руководства Google об индексировании мобильных сайтов

Выдержка из доклада Google о внедрении mobile-first индекса

Бездумное использование турбостраниц

Например, турбостраницы «Яндекса», которые не заменяют полноценные мобильные страницы в поиске, включают малую часть пользовательской функциональности и являются менее конверсионными. Некоторые внедряют нововведения поисковых систем без разбора, с расчётом повлиять на ранжирование. Если у вас коммерческий сайт и вы уверены в качестве мобильной версии, не спешите внедрять «турбо» — даже для страниц со статьями и обзорами.

Снижение эффекта от внешних ссылок

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

Особенности продвижения в регионах

Рассмотрим эти варианты и для мобильных версий. Выше мы говорили о двух способах регионального продвижения адаптива — с использованием единого домена и геоподдоменов.

Каждому из них нужно задать регионы через «Яндекс.Справочник». В первом случае мы продвигаем основной домен и мобильный поддомен m.site.ru. Придётся обратиться в техподдержку, но и это не гарантирует результат. Проблема в том, что иногда самостоятельно привязать мобильную версию сайта к филиалу невозможно. Поэтому, если филиалов много, привязка может затянуться надолго. Создать отдельную организацию под мобильную версию сайта нельзя.

Хотя «Холодильник.ру», например, его использует. Вариант с использованием поддоменов вроде m.spb.site.ru или spb.m.site.ru мы вообще исключаем. Это огромная работа, которая вряд ли окупится. Но в этом случае нужно настраивать адресацию между всеми регионами мобильных и десктопных версий, поддерживать их в актуальном состоянии, отслеживать изменения и мониторить сервисы для веб-мастеров.

Отправка на проверку «мобилопригодности»

Проблема касается и адаптива. Если не отправить на проверку «мобилопригодности» оптимизированную версию сайта в «Яндекс.Вебмастере», он может не появиться в мобильной выдаче. Такое случается не всегда, но рекомендую следить за сообщениями в «Вебмастере».

Фрагмент общения с техподдержкой «Яндекса» о присвоении региона мобильной версии сайта

Почему же используют мобильные версии

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

Хотя я не исключаю, что причина роста была в том, что в их адаптивной вёрстке были ошибки, которые негативно влияли на ранжирование. Также многие SEO-специалисты отмечали рост поискового трафика после внедрения мобильного сайта вместо адаптива.

Какой вариант выбрать

Это более экономичное и быстрое решение. Если вы разрабатываете сайт с нуля, или у вас небольшой проект, присмотритесь к адаптивной вёрстке. Только функциональность лучше сразу спланировать так, чтобы не пришлось в будущем скрывать часть сайта от показа на мобильных устройствах.

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

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

Выдержка из руководства Google об индексировании сайтов, использующих RESS

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

Благодарю SEO-специалистов Валентину Кузнецову, Алексея Афонина и Игоря Малышева, которые помогли собрать информацию, используемую в колонке.

#seo


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Microsoft начала продавать свои первые наушники — Surface Headphones

Microsoft начала продавать свои первые наушники — Surface Headphones — Техника на vc.ru Свежее Вакансии… Написать Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто Войти В России они пока официально не продаются. В закладки Они стоят ...

Кем работают и сколько зарабатывают люди без высшего образования

Истории читателей «Тинькофф-журнала». В закладки Не так давно Т—Ж опрашивал читателей, что они думают о высшем образовании. По итогам дискуссии мы выбрали несколько историй: как решиться бросить бессмысленную учебу в университете, как диплом в ИТ-сфере влияет на доход и правда ...