Как настроить индексацию сайта с динамической подгрузкой данных

Руководитель SEO отдела агентства Nimax Олег Белов написал для «Нетологии» колонку о том, что делать сайты с динамической подгрузкой данных, чтобы получить в поисковых системах.

В последние годы разработчики сайтов уделяют больше внимание удобство интерфейса: все должно быть быстро, удобно и понятно. Но технологии, которые помогают создавать проекты, не всегда «друзья» с поисковыми системами. Иногда современный сайт отсутствует в поиске «Яндекса» или Google, или плохо место. Часто так бывает с сайта с динамической подгрузкой данных. Давайте посмотрим, в чем сложность их индексации и как решить эту проблему.

Что такое динамическая подгрузка данных

Под динамической подгрузкой данных понимается, как правило, использование технологии AJAX. Этот подход для создания интерактивных интерфейсов. Он строит взаимодействие пользователя и веб-сервера по сценарию:

  • Пользователь нажимает на кнопку, ссылку или другой элемент страницы.

  • Элемент обрабатывается с JavaScriptom, после того, что запрос уходит на сервер, чтобы получить данные.

  • Сервер возвращает информацию, скрипт добавляет информацию на странице без ее перезагрузки.

Таким образом, AJAX позволяет добавить или обновить содержимое страницы без ее перезагрузки. Эта технология применяется в одностраничных сайтах приложения (mail.google.com/ и yandex.ru/maps/), в различных интерактивных проектов (в rambler-co.ru), а также на обычных местах для подгрузки информации в новостных блоках, списки и другие элементы на сайте (в комментарии livejournal.com/).

В качестве альтернативной технологии можно использовать WebSocket, при котором обмен данными между браузером и сервером происходит в режиме реального времени. Технология применяется в рамках услуг live-контент , например, в социальных сетях, где ленты и диалоги между пользователями регулярно обновляются без перезагрузки страницы. Но задача индексирования содержимого с помощью WebSocket не возникает, поэтому далее мы остановимся только на технологии AJAX.

В чем сложность индексации AJAX-контент

Обязательным условием для индексации сайта — доступность контента в коде, в HTML формате. Функции динамически подгружаемого контента в том, что в HTML-виде его в коде нет, он представил себя через JavaScript. Это приводит к двум проблемам:

  • Поисковый робот не видит содержимое, потому что это не в HTML-коде. Из-за этого сайт не индексируется.

  • Поисковые системы могут индексировать только главную страницу. Вот и получается, когда разработчик использует символ «#» после доменного имени в URL-адресах: http://site.ru/#page-1 или http://site.ru/#page-2. Если адреса на сайте, выглядят так, то в индекс поисковой системы попадет только главная.

Как решить проблему

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

1. Необходимо, чтобы поисковый робот понял, что сайт поддерживает режим сканирования AJAX. Реализация зависит от организации URL-адресов на сайте.

  • Если адреса на сайте, формируются с помощью «#», нужно заменить «#!» (хэшбэнг). Это http://site.ru/#url http://site.ru/#! url.

  • Если адреса имеют обычные ЧПУ без хэша, добавьте на динамические страницы мета-тег.

При соблюдении условий выше, робот будет запрашивать параметры страницы с параметром «?_escaped_fragment_=», на которые ему нужно поставить HTML-картинки (HTML-копия сайта со всем контентом, который загружается после запуска JavaScript). Если вы хотите создать HTML-изображения сайтов, как правило, используются headless браузер на стороне сервера. Например, PhantomJS или HtmlUnit.

Дополнительная информация для разработчиков:

  • Generating HTML snapshots
  • SEO for single page приложения
  • HTML5/AngularJS/Nginx приложения с правом google-индексированием

Когда робот попадает на страницу с «#!» в URL-адресе, либо с meta-тега , то запрашивает страницу с параметром «?_escaped_fragment_=»:

  • http://site.ru/#! url http://site.ru/?_escaped_fragment_=url

  • http://site.ru/url http://site.ru/url?_escaped_fragment_=

В итоге поисковый робот будет получать HTML-изображения всех страниц, которые и будут добавлены в индекс. Сайт будет участвовать в поиске общих основаниях. В индексе поисковых систем, при этом сохраняются адреса без параметров «?_escaped_fragment_=».

Рекомендации для разработчиков:

  • Индексирование AJAX-сайтов (советы от Яндекс).
  • Часто задаваемые вопросы на AJAX (рекомендации Google).
  • Создание AJAX-приложений crawlable (руководство для разработчиков от компании Google для индексации страниц-приложения).

Что делают поисковые системы для индексации динамического контента

В октябре 2015 года Google отозвал рекомендации по сканированию сайта на AJAX. Теперь, если робот Googlebot никаких ограничений для чтения файлов JS и CSS, небольшой и загружает контент в той же редакции, как они его видят пользователи у себя в браузере. Это означает, что сайты, которые используют динамически подгружаемый контент, должен правильно индексироваться в Google, если робот открытых офисных файлов.

Проверить, как выглядят страницы для робота Google, вы можете использовать сервис Search Console. В разделе «Сканирование» нужно выбрать «Посмотреть как Googlebot», введите в соответствующую строку url страницы и нажмите на кнопку «Получить и отобразить». После обработки вы получите результат: показать, как робот видит страницу, и какие компоненты JS или CSS ему доступны.

Вкладка «Сканирование»

Закладка «Вид»

В ноябре 2015 года Яндекс объявил о тестировании подобных технологий, — использование JS и CSS при просмотре страниц.

Полезно для чтения:

  • Deprecating our AJAX crawling схема (сообщение в Webmaster Central Blog).
  • Рекомендации для веб-мастеров (и обновленные версии рекомендаций от Google).
  • Робот Яндекса начал использовать Javascripts и CSS (сообщение от Яндекс в блоге для веб-мастеров).

Нужно ли руководствоваться новыми правилами Google?

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

Индексация сайта с подстановкой параметра «?_escaped_fragment_=» (когда происходит обращение к полной версии HTML-страницы) по-прежнему поддерживается и в Google. Если вы используете на сайте AJAX для подгрузки контента, ваш сайт все равно будет правильно проиндексирован в Google, если робот отдаются страницы с «?_escaped_fragment_=».

Как использовать AJAX для нужд SEO

Динамическая подгрузка данных полезно, если вам нужно, наоборот, скрыть часть контента. В каких случаях может возникнуть такая потребность?

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

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

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

Как решить эти задачи

Решение, конечно, вы можете использовать тег noindex, но это подходит только для Яндекса, другие поисковики его не воспринимают. В таком случае, вы можете подгружать дублирующийся контент динамически. Но остается проблема с Googleom, потому что он способен выполнять JS-скрипты, это означает, что содержание все же проиндексируется. Для того, чтобы этого не произошло, ограничьте в фале robots.txt индексации JS файл, отвечает за подгрузку контента. Это позволит скрыть нужные части контента от поисковых роботов.

Итого

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

Комментирование и размещение ссылок запрещено.

Комментарии закрыты.