Почему Google “не видит” контент вашего сайта и как это исправить?

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

Цель данной статьи:
1. Рассказать о причинах недоступности контента для Google.
2. Разобраться как определить какой контент недоступен для Google.
3. Определить корректно ли рендерится контент страниц вашего сайта.

Это особенно важно при продвижении сайтов вида Single Page Application (SPA), Progressive Web Application (PWA) на современных фреймворках использующих JS: React, Angular, Vue и других. Не менее важно для сайтов, подгружающих контент при помощи скриптов.

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

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

Максимально упрощенно работу Google по добавлению страниц сайта в поисковую выдачу можно свести к шести функциям:

Google намного быстрее индексирует страницы, по которым весь контент отдается в HTML коде. Если же он получает страницу без контента и JS код, то сначала ему необходимо выполнить ресурсоемкий процесс - рендеринг JS. Такие страницы направляются в отдельную очередь на отрисовку в результате которой выполняется JavaScript и Google получает готовый HTML код с контентом.

На первых трех этапах как раз возможны проблемы из-за которых Google может “не увидеть” контент вашего сайта частично или полностью. Рассмотрим наиболее частые причины.

Контент странице может быть недоступен для Google по разным причинам, в том числе он может быть неверно интерпретирован:

Неоптимизированные сайты на современных фреймворках и отдача контента через JS - самая частая проблема. Также вебмастера и SEO специалисты иногда случайно закрывают CSS и скрипты в robots.txt, в результате Google не может полноценно построить макет страницы.

Нарушение правил HTML разметки обычно не ведет к критическим проблемам, если только это не нарушение разметки ссылок. Проблемы с DNS и сервером лежат за пределами ответственности SEO специалистов, но о них обязательно нужно сигнализировать админам, если они обнаруживаются.

Single Page Application (SPA) - одностраничные сайты, состоящие из одной HTML страницы. При этом смена контента на странице происходит за счет его подгрузки через JS скрипт, страница при этом полностью не перезагружается, т.е. на сервер не отправляется новый HTTP запрос.

Progressive Web Application (PWA) - сайты, созданные по технологии, которая позволяет как просматривать их через браузер, так и использовать в качестве мобильного приложения, например, для iOS или Android.

Сайты могут использовать JS для подгрузки важного для SEO контента. Вот частые примеры такой подгрузки:

Да в общем-то любой контент может подгружаться при помощи JS, а также могут осуществляться редиректы, подмена url в строке браузера и многое другое.

Правильные SPA и PWA - быстры и удобны для пользователя. Подгрузка контента при помощи JS также эффективно решает ряд задач. Тем не менее у SEO проблемы возникают из-за того, что JS код выполняется после получения HTML-кода документа.

Осуществляемые JS изменения в DOM могут быть просто недоступны для поискового бота и в скаченной версии страницы не будет хватать каких-то важных для SEO элементов.

Вы можете поставить в Google Chrome расширение Quick Javascript Switcher, отключить скрипты и перезагрузить страницу. Например, на aviasales.ru блоки со спецпредложениями подгружаются через скрипты и отсутствуют в статическом html.

По официальным данным Google (и Яндекс) уже давно индексируют контент, отдающийся при помощи JavaScript. Однако на практике это не решает многие SEO проблемы и часто блокирует рост органического трафика.

Да, и не соглашайтесь на уговоры разработчиков якобы времена, когда JS создавал проблемы для SEO, уже давно прошли 🙂.

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

Быстрый способ: набрать в строке Chrome перед “url” оператор “cache:” и выбрать текстовую версию. В данный момент способ работает, но со временем Google может убрать сохраненную копию страницы из доступа, кроме того, не у всех страниц есть такая копия.

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

Полный способ: используем Google Search Console, указываем url и нажимаем “Test Live url”, либо используем https://search.google.com/test/rich-results. Кстати, второй вариант даже лучше, т.к. вы можете изучить отрендеренную Google страницу и для мобильных устройств и для десктопов.

Итак, изучаем полученные результаты:

1. Сначала смотрим нет ли предупреждений и ошибок на самой странице анализатора. В нашем случае их нет.

2. Далее нажимаем на превью и смотрим не заблокированы ли случайно важные для рендеринга данной страницы ресурсы в robots.txt (скрипты, картинки и css). “Other error” игнорируем. В нашем примере все ОК.

3. Смотрим скриншот рендера страницы сайта. Иногда он бывает корявым, но не из-за проблем с рендерингом, а из-за того, что сервис не загрузил в реальном времени какие-то ресурсы - это нормально. На что надо обратить внимание, так это на нарушение mobile-friendly и на отсутствие важных для SEO блоков.

4. Копируем HTML код, вставляем его в текстовый редактор (так удобнее), например, Notepad++ или AkelPad

Здесь проверяем корректность, а также наличие SEO контента в:

Все блоки на месте и их контент соответствует тому, что отображается на странице сайта? Отлично, поздравляю, ваша страница корректно отдается Googlebot!

Если же нет, то создайте задачу укажите, что “необходимо наличие блока N и M в статичном html-коде” и не забудьте указать как проверять корректность рендеринга.

Несмотря на множество проблем и рисков для SEO даже SPA и PWA сайты можно продвигать. Об адаптации к Google JS сайтов написан целый раздел помощи. Однако , если у вас на сайте более 50-100 страниц, то намного надежнее настроить SSR и его варианты или хотя бы использовать пререндер. Если же у вас тысячи и десятки тысяч страниц, то без этих решений эффективное SEO просто невозможно.

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

1. В статичном HTML коде, который отдается поисковым системам, должны быть следующие элементы:

2. Бесконечный скролл (товаров или статей) обязательно дублируем полноценной пагинацией.

3. Lazy loading картинок, если он используется, должен быть настроен для второго и последующих экранов. Не настраивайте его для первого экрана, от этого ухудшается пользовательский опыт и CWV.

4. Гиперссылки должны быть оформлены как <a href="https://example.com">, другие варианты недопустимы (в ряде случаев Google все равно найдет ссылку, но не стоит полагаться на случай):

5. Важные для страницы картинки (картинки в статье или фото товара) размещаем в теге и указывает соответствующим им alt.

6. Принудительно открываем в robots.txt скрипты и css.

Allow: /*.css
Allow: /*.js

Дополнительно можно еще и принудительно открыть весь сайт для бота сборщика картинок:

User-agent: Googlebot-Image
Disallow:

7. Следим за корректностью meta robots и x-robots-tag на полезных страницах. Их либо не должно быть, либо значение используем “index, follow”.

8. Используем семантическую разметку в html:

9. Мониторим проблемы с доступностью сервера при помощи трекера позиций, панелей вебмастеров, а также Uptimebot.

10. Для сайтов на JS фреймворках, у которых настроен SSR, и сайтов, у которых часть полезного контента отдается на JS, каждый месяц проверяем корректность рендеринга всех важных блоков страницы и наличие в них оптимизированного контента.

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

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