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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Некоторые используют JS, чтобы не отображать лишние блоки на мобильных устройствах. Но этот способ ничем не лучше display: none. Возникает риск, что поисковики не проиндексируют предназначенный для них контент даже на десктопной версии. Поисковые системы вообще не всегда верно воспринимают содержимое 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-специалистов Валентину Кузнецову, Алексея Афонина и Игоря Малышева, которые помогли собрать информацию, используемую в колонке.

0
19 комментариев
Написать комментарий...
Andrey Andrievsky

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

Ответить
Развернуть ветку
Дмитрий Мрачковский

Если "нормальные" адаптивные решения работают отлично именно у Вас, как у пользователя, это не значит, что у других тоже все в порядке - у многих адаптивы могут загружаться и отрисовываться очень долго. Тогда мобильная версия или RESS будут намного выигрышнее смотреться. А еще не забываем про Speed Update от Google, где скорость загрузки будет играть более значимую роль. Ну и AMP не панацея даже для Гугла, не говоря уже о Яндексе.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Дмитрий Мрачковский

Такой вариант тоже не исключен)

Ответить
Развернуть ветку
Александр Иванов

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

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

Ответить
Развернуть ветку
Vyacheslav Bagmut

Процитируя вас Яндекс Маркету получается "нехер чё делать" ? :)

Ответить
Развернуть ветку
Volodymyr Fedorychak

Интересно, кто составляет контент-план этим странным людям, пишущим на темы, потерявшие актуальность лет так 5 назад.
А текст похоже генерирует то самое ПО для копирайтинга, которое делает описания для товаров на Taobao и Tmall.

Ответить
Развернуть ветку
Дмитрий Мрачковский

Из перечисленного, 5 лет назад были только различные способы адаптации. Ранжирование же и в целом восприятие адаптированных сайтов поисковыми системами коренным образом изменилось. Если Вам это понятно, кажется очевидным и не требующим объяснений - это замечательно) Но на практике, в работе постоянно приходится сталкиваться с сайтами, у которых одни и те же ошибки и проблемы. Проблема есть - значит тема актуальна, тем более во время повсеместного включения MFI для сайтов в Google. Именно для владельцев/маркетологов таких сайтов и написана эта статья.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Иван Максимов

Некоторое недоумение вызывает вот этот пункт:
"Некоторые реализуют адаптивную вёрстку неверно и выводят на одной странице в коде сразу два шаблона...Все элементы контента загружаются дважды"

Ответить
Развернуть ветку
Дмитрий Мрачковский

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

Ответить
Развернуть ветку
Aleksandr Talalaev

Ну по факту, с появлением и массовым распространением смартфонов, которые де факто те же компьютеры, я думаю адаптив логичнее выбирать.
Другой вопрос что сам сайт нужно по человечески делать, чтобы он был априори не перегружен и не тормозил. Некоторые любят так нафигачить, что и на десктопе тупит. Да что там говорить, последние поколения смартфонов уже быстрее большинства домашних ноутбуков, так что то что десктоп выдерживает "мощные" сайты - миф, они и там тормозят.
Сейчас был очередной забавный пример этого, когда часть американских сайтов отдавали пользователям из ЕС (из-за gdpr) облегченную версию (без следящих свистелок и перделок) и многие пользователи таким версиям возрадовались не из-за отсутствия слежки, а из-за значительно более легкого интерфейса и более быстрой работы самих сайтов.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Дмитрий Мрачковский

Совершенно верно, об этом и речь) Многие отмечают, что при переходе на m-поддомен трафик с поиска растет.

Ответить
Развернуть ветку
Demi Murych

Сначала в статье мы "впариваем" людям проблемы, потом героически их преодолеваем:
1) "Два шаблона на страницу" - это критерий жуткого непрофессионализм, и в этом случае, наверняка верстка с двумя шаблонами будет самым меньшим из зол всего проекта. Там уж точно не до SEO

2) "Скрытие ненужных элементов через diplay:none, которое приводит к замедлению работы проекта, поскольку ненужный код грузится все равно". Открываем диаграмму загрузки "среднестатистического" проекта, и смотрим долю разметки в общей доли загрузки всей страницы. Понимаем какую чушь мы написали и идем заниматься оптимизацией медиа контента. Доля такого "лишнего кода" не будет составлять и 1% от всего проекта. Которые ну никак не повлияют даже в случае параноидальной оптимизации и попытки всунуть стартовую страницу в первые 14кб запроса.

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

У поисковиков НЕТ сейчас плохого отношения к такому контенту. В худшем случае скрытый контент будет не проиндексирован вовсе. И грош цена дизайнеру такого проекта, который какой то важный контент в случае экранов с низким разрешением решил просто скрыть. Тем более что сейчас мы уже давно перевалили за отметку в 50% пользователей с такими разрешениями, что означает, что в первую очередь дизайнер обязан работать именно с такими шаблонами, а на десктопе дополнять.

3) Этот пункт сродни пункту 1. Зачем городить велосипеды, если современный CSS с этим справится гораздо лучше?

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

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

Ответить
Развернуть ветку
Leon Wald

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

Ответить
Развернуть ветку
Oleg Dergilev

Почему нет мобильной версии:
1) Дороже и дольше
2) Отдельно продвигать надо, а зарплата и бюджет на это один
3) Теоретически,кое-где могут появиться дубли, но на практике не встречал
4) Нужна отдельная аналитика и когда-то появятся необходимые шаги которые повредят либо десктопу, либо мобайлу. А зачем тогда это.

Ответить
Развернуть ветку
Дмитрий Мрачковский

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

Ответить
Развернуть ветку
Oleg Dergilev

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

Ответить
Развернуть ветку
Алексей Петров

Иногда меню для мобильных и для десктопа отличается, и просто переназначать стилями может оказаться проблематичнее.
Так скрывание только меню в шаблоне display:none Очень плохо ?

Ответить
Развернуть ветку
16 комментариев
Раскрывать всегда