- агентов пользователя.
HTTP-заголовок Vary поможет сигнализировать Googlebot, какой User-Agent он должен применить (для десктопа или для смартфонов).
Vary: User-Agent
Если сервер уже использует HTTP-заголовок Vary, то нужно добавить в соответствующий список элемент User-Agent.
У заголовка есть две основные функции:
- сигнализирование кэширующим прокси-серверам, что при принятии решения о показе страницы из кэша необходимо учитывать юзер-агента пользователя;
- помощь роботу Google быстрее найти контент, оптимизированный для мобильных устройств.
При определении агента пользователя часто возникают ошибки. Чтобы уменьшить их вероятность, нужно> составить список строк (или подстрок) агентов, с которым производится сравнение. Его необходимо регулярно проверять и обновлять, поскольку в противном случае новые агенты не будут определяться.
Так как в случае RESS есть несколько вариантов HTML кода, не забудьте проверить соответствие мета-данных и контента страниц, они должны быть одинаковыми для всех версий.
Отдельная мобильная версия
Основная цель аудита при такой конфигурации – проверить, правильно ли связаны две отдельные версии одного сайта. Для этого пройдемся по чек-листу:
1. Тег alternate
Чтобы помочь роботу понять, у каких страниц есть мобильная версия, используем тег alternate. На обычных страницах сайта (например, https://domain.com/page) добавить тег link rel="alternate" с указанием на соответствующий URL мобильной версии. Параметр media служит рекомендацией для робота сохранения таких страниц-дублей в поисковой выдачи.
Например, на странице https://domain.com/page, в блоке <head> необходимо разместить:
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.domain.com/page" >
2. Тег canonical
На мобильных страницах сайта размещаем тег link rel="canonical" с ссылкой на соответствующую обычную страницу, чтобы избежать дублей контента.
Например, на странице https://m.domain.com/page в блоке <head> нужно внедрить:
<link rel="canonical"> href=>"https://domain.com/page" >
3. 302-редирект
На сайте должны работать следующие правила автоматических перенаправлений:
- пользователи с мобильных устройств должны редиректиться на мобильную версию сайта;
- пользователи с десктопных и планшетных устройств должны перенаправляться на обычную версию сайта.
Все редиректы мы настраиваем на соответствующие альтернативные адреса, а не на главную страницу сайта. Переадресация выполняется на основании агента пользователя (User Agent).
Если у страницы нет мобильной версии, настраивать перенаправление не нужно, пусть посетители сайта просматривают обычную страницу. Так вы избежите ошибок.
Важно: как и для десктопной версии, должны быть настроены 301 редиректы для устранения дублей, которые появляются из-за:
- определения основного зеркала сайта;
- URL в разных регистрах;
- иерархии URL;
- URL с лишними слешами;
- URL страниц с index.php, index.html, default.asp, default.aspx, home;
- URL доступных по HTTP и HTTPS протоколу.
4. XML-карта
В XML-карте сайта должны быть все страницы мобильной версии открытые для индексации. Вы можете создать отдельную карту или добавить в уже существующую. Sitemap.xml с мобильными страницами должен быть загружен в Search Console.
5. Robots.txt
Как и в случае с другими поддоменами, для отдельной мобильной версии сайта должен быть настроен отдельный файл robots.txt. Он может быть таким же, как и для десктопной версии, а может отличаться.
6. Кнопка «Полная версия сайта»
У пользователей мобильной версии всегда должна быть возможность перейти на обычную версию с помощью кнопки «Полная версия сайта». Кнопка должна быть хорошо видна и доступна на каждой странице сайта.
Пример:
Помните, что кнопка должна открыть полную версию сайта текущей страницы, а не главной. И если пользователь перешел на десктопную версию, то должен оставаться на ней и в случае переходов на другие страницы.
7. Мета-данные
Так же как и для динамического дизайна, проверьте соответствие тегов Title, H1 и мета-тега Description мобильной версии и десктопной. При необходимости внедрите шаблоны или пропишите вручную.
8. Контент
Проверьте размещение SEO-текстов, наличие отзывов, характеристик товаров и микроразметки на мобильных страницах. Все эти элементы должны в точности соответствовать основной версии сайта.
9. Скорость
Если хотите, чтобы сайт хорошо ранжировался, а пользователи возвращались на ваш сайт, обеспечьте высокую скорость загрузки страниц.
10. Аналитика и отслеживание
Необходимо добавить мобильную версию сайта в панели веб-мастеров (Google Search Console, Яндекс.Вебмастер) и установить те же счетчики отслеживания Google Analytics, GTM, Яндекс.Метрики, что и для десктопной версии.
11. AMP-страницы
Для реализации ускоренных мобильных страниц существует множество плагинов и готовых решений под отдельные CMS. Но можно и делать это самостоятельно, используя шаблоны. При проведении аудита или составления тз на реализацию обращайте внимание на следующие рекомендации:
- использовать только асинхронные скрипты;
- не применять произвольный JavaScript-код;
- все стили должны быть указаны в HTML файле в единственном теге «style amp-custom», максимальный размер стилей — 50 Кб;
- для индексации AMP-версий на обычных страницах указать тег <link rel="amphtml" href="https://url-amp-страницы" />
- добавить на ускоренную страницу ссылку на каноническую версию обычной страницы: <link rel="canonical" href="https://url-страницы" />
- страницы, у которых нет обычной версии, указать в файле Sitemap;
- в теге html указать атрибут amp (<html amp>);
- указать внутри тега <head> скрипт, который указывает и загружает библиотеку AMP JS: <script async src="https://cdn.ampproject.org/v0.js"></script>;
- на ускоренных страницах верстка текста (html-теги заголовков, абзацев, списков, ссылок) должна соответствовать основной версии сайта;
- использовать мета-тег <meta name="viewport" content="width=device-width, minimum-scale=1"> внутри тега <head> для корректного отображения на мобильных устройствах;
- размер визуальных элементов задать через параметры HTML width и height, для адаптивных изображений использовать layout="responsive";
- контент на ускоренных страницах должен в точности соответствовать обычным версиям страниц;
- использовать такую же микроразметку, что и на основных страницах сайта;
- для попадания статей в “Top stories Google” добавить микроразметку Article, содержащую информацию о названии статьи, авторе, издательстве, логотип компании, даты публикации и изменения статьи.
Подведем итоги
1. Существуют следующие пути оптимизации сайта под мобильные устройства:
- адаптивный дизайн;
- динамический показ;
- отдельная мобильная версия;
- ускоренные мобильные страницы.
2. Задача SEO-специалиста — составить грамотное техническое задание, по которому разработчики и программисты внедрят изменения в код сайта.
3. От того, какая конфигурация реализована на сайте, будет зависеть ход ее оптимизации и затраченное время. Наиболее простой вариант адаптировать ресурс под мобильные устройства с минимальными затратами — Responsive web design.
4. При адаптивном дизайне проверьте наличие мета-тега viewport на всех страницах.
5. При динамическом показе используйте HTTP-заголовок Vary и список юзер-агентов пользователя. Проверьте соответствие мета-данных и контента всех версий.
6. Если у вас отдельная мобильная версия, настройте теги alternate и canonical, 302 и 301 редиректы, создайте XML-карту и файл robots.txt, проверьте соответствие контента и добавьте кнопку перехода на десктопную версию.
7. Для AMP-страниц обязательными являются обратные ссылки в тегах amphtml и canonical, запрещено использование пользовательских скриптов, а размер css-файла не должен превышать 50 КБ.
И в заключение, совет для всех мобильных версий: не забудьте про отображение всплывающих окон. Проверьте, удобно ли пользователям закрывать поп-апы с телефонов или планшетов, и как эти элементы влияют на скорость загрузки мобильных страниц
