Как видим, наш испытуемый доступен к индексированию. Здесь мы нажмём «Посмотреть проверенную страницу».

Кроме скриншота, можно посмотреть и скачанный HTML-код, а также узнать данные по загрузке JS

Кстати, чтобы посмотреть страницу любого сайта глазами мобильного гугл-бота, просто воспользуйтесь «Проверкой расширенных результатов».

Это не единственный способ посмотреть на веб-ресурс глазами поисковика. Если доступов к Search Console нет, можно воспользоваться расширением для Chrome — SEO All Stars tools.

Здесь в удобном режиме можно быстро посмотреть разницу в HTML-коде страницы для поиска и пользователя

Вывод: Mobile First indexing означает, что «Гугл» приоритетно индексирует мобильную версию вашего сайта. И это очень важно для SEO. Если вы рассчитываете получать трафик из органической выдачи «Гугл», вам нужно добиться максимальной эффективности мобильной версии сайта.

Немного теории

Как выглядит взаимодействие нашего URL с другими участниками интернета:

Структура запроса (request):

• метод HTTP-запроса;
• адрес URL;
• версия протокола либо HTTP/1.1, либо HTTP/2.

Пример запроса

В заголовке запроса будет указан уже знакомый нам элемент User-agent. И теперь основной краулер «Гугла» обращается к сайтам со значением Google Smartphone.

Все роботы «Гугл» включают:

1. Googlebot Smartphone.
2. Googlebot Desktop.
3. Googlebot Image: изучает изображения для гугл-картинок и связанных продуктов.
4. Googlebot-News: индексирует новостные статьи.
5. Googlebot Video: обрабатывает видеоконтент для гугл-видео и связанных продуктов.
6. Google StoreBot: просматривает страницы товаров, корзины и оплаты, а также аналогичные страницы.
7. Google-InspectionTool: применяется в средствах тестирования Search Console для проверки расширенных результатов и URL. Помимо агента пользователя и его токена имитирует работу гугл-бота.
8. GoogleOther: универсальный поисковый бот, применяемый командами для получения общедоступного контента с сайтов.
9. Google-Extended: новый токен, позволяющий веб-издателям указывать поддержку оптимизации с помощью Gemini и Vertex (API для генерации контента с помощью ИИ), а также последующих поколений этих нейронок.

Если вы пользовались Screaming Frog для парсинга сайта, вы могли заметить, что он может имитировать запросы от различных user-agent.

Скриншот из Screaming Frog

Итак, с первой частью разобрались. Но раз есть запрос, будет и ответ.

Пример ответа сервера

В ответе сервер сообщает код состояния: 1хх, 2хх, 3хх, 4хх, 5хх. И статус: Ok, Found, Bad Request, Forbidden, Not Found, Internal Error. 

Далее идет заголовок ответа. Там сообщается информация о веб-сервере, который обработал запрос (nginx или apache), уникальное значение клиентских Cookie и тип аутентификации. 

А вот далее уже идет тело ответа, в котором и будет содержаться HTML-код документа. 

Код ответа главной страницы одного небезызвестного сайта

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

Несмотря на то, что «Гугл» объявил о завершении перехода на индексирование с приоритетом мобильного контента еще 31 октября 2023 года, в гугл-консоли вы все еще можете увидеть, что Google Desktop интересуется сайтом.

Так Google Desktop изучает ваш сайт

Виды мобильных версий

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

Responsive Web Design (RWD) или адаптивный дизайн. Самый популярный и удобный вариант. Представляет собой подход, при котором веб-сайт динамически изменяет свой макет и размеры в зависимости от диагонали устройства, на котором он просматривается. Это позволяет сайту оптимально отображаться как на десктопах, так и на смартфонах без необходимости создания отдельных мобильных версий.

Управление HTML происходит через правило «@media» в CSS-файле. Там будет указано, как должна меняться верстка страницы в зависимости от экрана устройства. 

Google рекомендует использовать именно этот подход.

Десктопная версия VC

 
Мобильная версия VC. Как видим, меню ушло вниз к большому пальцу, и волшебным образом появился рекламный баннер

Динамический показ. Более сложная модель мобильной версии. Здесь программисты заранее готовят файлы HTML и CSS, которые будут отдаваться соответствующим User-agent-ам. 

Схема работы динамического показа

Откуда взять информацию о ботах «Гугла»? Вот здесь собраны все роботы поиска. В вашем файле robots.txt (и в мета-теге) достаточно просто открыть доступ к сканированию Googlebot. Таким образом, сканирующему сайт Googlebot Smartphone будет отдан некий Mobile-version.css и Mobile-version.html и именно по этой версии робот будет оценивать контент страницы.

Разные адресы ресурса. Отдельные мобильные веб-сайты представляют собой версии веб-сайтов, разработанные специально для смартфонов или планшетов. Обычно они имеют свой собственный URL (например, m.site.ru) и могут иметь отличающийся контент и макет по сравнению с основной десктопной версией сайта. 

Как в случае с динамическим показом, сервер оценивает клиентский запрос по User-agent и HTTP-заголовку. Только в данном случае он не подменяет CSS на мобильные, а направляет на отдельный сайт на поддомене. Если все сделать правильно, в мобильной выдаче вы увидите ссылку именно на него. Способ с разными URL наиболее трудозатратный и чреват проблемами с индексацией и ранжированием.

На что обратить внимание

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

Закрытие мобильной версии от индексации. Ошибка скорее случайная, но возможная. Откройте свой m.site.ru/robots.txt и убедитесь, что сайт доступен для робота. Проверку доступности вы также можете провести с помощью средства от «Гугла» — проверка URL.

Инструмент проверки URL от Google

Аналогично с тегом Meta с атрибутом Robots. Проверьте, чтобы на выбранных страницах не было значений <noindex> и <nofollow>.

Закрытие файлов CSS от робота. Немного сложнее. Нужные файлы CSS и HTML оказались в другой папке, которую по незнанию закрыли. И теперь робот не получит вашу мобильную версию.

Скрытие части десктопного контента в мобильной версии. Допустим, вы решили для удобства пользователя убрать часть текста или галерею изображений. Цитируем справку «Гугла»: «Google не всегда может найти контент, для загрузки которого пользователь должен что-то сделать. Например, перелистнуть страницу, нажать кнопку или ввести текст».

Проблема здесь в том, что по разным юзер-агентам «Гугл» получит немного отличающиеся версии одного документа. А так как мобильная версия является приоритетной для оценки, то таким скрытием контента вы испортите ранжирование URL. 

Систематизированные данные. Узнайте, совпадают ли данные в микроразметке у разных версий страницы. Изучите данные breadcrumblist, product, videoobject и проверьте корректность URL в разметке. Провести тест можно здесь. Выбор Inspection Tool позволяет отдельно проверить как мобильным, так и десктопным роботом. 

Проверка страницы на поддержку расширенных результатов

Общие рекомендации

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

Теперь представим, что вы также размещаете на своем сайте рекламные блоки. На десктопной версии они не перекрывают зону полезного контента, а вот в мобильной пользователю, возможно, придется делать несколько скроллов вниз, чтобы добраться до заветного видео. Это пример плохого пользовательского опыта, и благодаря Mobile First indexing он понизит в выдаче подобные страницы.

Оптимизируйте изображения. Изображения могут занимать значительную часть трафика, поэтому уделите им особое внимание. Например, современные форматы изображений, такие как WebP (попробуйте скачать изображения товаров с сайтов крупных маркетплейсов, и вы увидите, что они уже перешли на этот формат). 

А чтобы получить информацию о «лабораторных» значениях скорости загрузки своей страницы, используйте Pagespeed:

1. Используйте четкие изображения, но сжимайте их с минимальной потерей качества, чтобы сократить время загрузки.
2. Создайте специальную карту сайта с изображениями и видео (если такие есть).
3. Подключите Lazy Load или ленивую загрузку изображений (отложите загрузку изображений до тех пор, пока пользователь не доберется до них), чтобы повысить скорость сайта и сэкономить трафик.

Информация о загрузке сайта «Дзен»

Такие результаты обусловлены высоким значением LCP (Largest Contentful Paint) — временем, за которое браузер отображает самый большой видимый элемент на экране.

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

Не будем вдаваться в технические подробности метрики, но базово на LCP влияют: 

• скорость ответа сервера;
• оптимизация JS и CSS;
• оптимизация изображения.

Проработав эти пункты, вы улучшите значительно значение LCP.

Итоги

Mobile First Indexing — это данность, которая отражает технологический прогресс. Массовый переход на смартфоны предопределил изменение подхода крупнейшего поисковика к индексированию сайтов. Кому нужно учитывать этот факт? Всем, кто хочет получить органический трафик из Google.

На сегодня уже сложно найти сайт, не имеющий адаптивной версии. Это относится не только к сайтам для бизнеса, которые нацелены на получение лидов и продаж, но и даже госсектору. Мобильные версии сайтов «Налог.ру» или Министерства здравоохранения полностью адаптированы под смартфоны.

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

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