Три способа
Адаптивная вёрстка — единый HTML, оформление подстраивается под ширину экрана стилями. Динамическая выдача — адрес тот же, но сервер по устройству отдаёт разный HTML. Отдельная версия — самостоятельный сайт на другом адресе, обычно на поддомене вида m.
Сравнение
| Критерий | Адаптивная вёрстка | Динамическая выдача | Отдельные адреса |
|---|---|---|---|
| Число адресов страницы | Один | Один | Два |
| Риск дублей | Нет | Нет | Есть: нужна связка между версиями |
| Стоимость поддержки | Ниже | Средняя | Выше: два шаблона и две копии контента |
| Особые заголовки и разметка | Не нужны | Нужен заголовок Vary | Нужны связки canonical и alternate |
| Скорость | Зависит от веса общей страницы | Можно отдавать облегчённый HTML | Можно сделать лёгкую версию, но ценой сложности |
Что выбрать
В большинстве новых проектов разумно начинать с адаптивной вёрстки: один адрес, один набор страниц, нет дублей, проще ссылки, карта сайта и аналитика. Динамическая выдача оправдана, когда мобильному посетителю действительно нужен другой набор блоков и разница не решается стилями. Отдельная версия — в основном наследие старых проектов: её сложнее поддерживать и легче ошибиться.
Если адреса всё же разные
Тогда поисковой системе нужно объяснить, что это две версии одной страницы. На настольной странице указывают ссылку на мобильный аналог, а на мобильной — ссылку на основную:
<!-- на странице настольной версии -->
<link rel='alternate' media='only screen and (max-width: 640px)'
href='https://m.example.ru/page/'>
<!-- на странице мобильной версии -->
<link rel='canonical' href='https://example.ru/page/'>Содержимое обеих версий должно быть равноценным: если на мобильной версии часть текста или разметки пропала, поисковая система может оценивать страницу именно по ней.
Что проверить при любом варианте
- Атрибут
viewportзадан, страница читается без масштабирования. - Нужные ресурсы стилей и скриптов доступны роботу: они не закрыты в файле robots.txt.
- При динамической выдаче сервер отправляет заголовок
Vary: User-Agent. - Перенаправления между версиями настроены страница в страницу: подробности — в статье про перенаправления для мобильной версии и про условные перенаправления.
Частые вопросы
Что лучше для нового сайта?
Как правило, адаптивная вёрстка: один адрес и один HTML, нет дублей и проще поддержка.
Зачем нужен заголовок Vary: User-Agent?
При динамической выдаче он сообщает кешам и роботам, что ответ на один и тот же адрес зависит от типа устройства.
Нужно ли одинаковое содержимое на мобильной и настольной версиях?
Да: содержимое, заголовки и разметка должны быть равноценными, иначе страница может оцениваться по урезанной версии.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.