Руководитель SEO-отдела агентства Nimax Олег Белов написал для «Нетологии» колонку о том, что делать сайтам с динамической подгрузкой данных, чтобы попадать в поисковики.
Последние годы разработчики сайтов уделяют больше внимания удобству интерфейсов: всё должно быть быстро, удобно и понятно. Но технологии, которые помогают создавать такие проекты, не всегда «дружат» с поисковыми системами. Иногда современные сайты либо отсутствуют в поиске «Яндекса» или Google, либо плохо ранжируются. Часто так бывает у сайтов с динамической подгрузкой данных. Давайте разберёмся, в чём сложность их индексации и как решить этот вопрос.
Что такое динамическая подгрузка данных
Под динамической подгрузкой данных понимается, как правило, использование технологии AJAX. Это подход для создания интерактивных интерфейсов. Он строит взаимодействие пользователя и веб-сервера по сценарию:
-
Пользователь нажимает на кнопку, ссылку или другой элемент страницы.
-
Элемент обрабатывается JavaScript’ом, после запрос уходит на сервер, чтобы получить данные.
-
Сервер возвращает информацию, скрипт добавляет информацию на страницу без ее перезагрузки.
Таким образом, 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 apps
- HTML5/AngularJS/Nginx приложение с правильным с google-индексированием
Когда робот попадёт на страницу с «#!» в URL-адресе или с мета-тегом , он запросит страницу с параметром «?_escaped_fragment_=»:
В итоге поисковый робот будет получать HTML-снимки всех страниц, которые и будут добавлены в индекс. Сайт будет участвовать в поиске на общих основаниях. В индексе поисковых систем при этом хранятся адреса без параметра «?_escaped_fragment_=».
Рекомендации для разработчиков:
- Индексирование AJAX-сайтов (рекомендации от Яндекс).
- Часто задаваемые вопросы по AJAX (рекомендации Google).
- Making AJAX applications crawlable (руководство для разработчиков от Google по индексации сайтов-приложений).
Что делают поисковики для индексации динамического контента
В октябре 2015 года Google отозвал рекомендации по сканированию сайтов на AJAX. Теперь, если для Googlebot нет ограничений по чтению файлов JS и CSS, он отрисовывает и загружает контент в том же варианте, каким его видят пользователи у себя в браузере. Это значит, что сайты, использующие динамически подгружаемый контент, должны корректно индексироваться в Google, если роботу открыты служебные файлы.
Чтобы проверить, как выглядят страницы сайта для поискового робота Google, можно воспользоваться сервисом Search Console. В разделе «Сканирование» нужно выбрать «Посмотреть как Googlebot», ввести в соответствующую строку адрес страницы и нажать кнопку «Получить и отобразить». После обработки получить результат: посмотреть, как бот видит страницу и какие компоненты JS или CSS ему недоступны.
Вкладка «Сканирование»
Вкладка «Отображение»
В ноябре 2015 года Яндекс объявил о тестировании подобной технологии — использовании JS и CSS при сканировании сайтов.
Полезное почитать:
- Deprecating our AJAX crawling scheme (новость в Webmaster Central Blog).
- Рекомендации для вебмастеров (обновленный вариант рекомендаций от Google).
- Робот Яндекса начал использовать JavaScripts и CSS (новость от Яндекса в блоге для вебмастеров).
Нужно ли следовать новым рекомендациям Google?
Пока только Google способен индексировать сайты без получения полной HTML-копии страниц. Яндекс только тестирует такую возможность. Для всех остальных поисковых систем вариант остаётся прежний. Поэтому отказываться от HTML-копий страниц будет некорректным решением.
Индексирование страниц с подстановкой параметра «?_escaped_fragment_=» (когда происходит обращение к полной HTML-версии страницы) по-прежнему поддерживается и в Google. Если вы используете на сайте AJAX для подгрузки контента, ваш сайт будет по-прежнему корректно индексироваться в Google, если роботу отдаются страницы с «?_escaped_fragment_=».
Как использовать AJAX для нужд SEO
Динамическая подгрузка данных полезна, когда нужно, наоборот, скрыть часть контента. В каких случаях может возникнуть такая потребность?
-
Какая-то часть контента дублируется на многих страницах сайта. Например, условия оплаты и доставки на карточках товара в интернет-магазине.
-
Выводимый контент берется с других сайтов. Например, отзывы о товарах с Яндекс.Маркета — безусловно полезны для пользователей, но могут негативно восприниматься поисковыми системами, как наличие неуникального контента.
-
Скрытие части навигационных элементов на страницах. Может использоваться, например, для перераспределения статического веса между страницами сайта.
Как решить эти задачи
Для решения, конечно, можно использовать тег noindex, но он подходит только для Яндекса, другие поисковые системы его не воспринимают. В таком случае, вы можете подгружать дублирующийся контент динамически. Но остается проблема с Google’ом, т.к. он умеет исполнять JS-скрипты, а значит, контент все же проиндексируется. Для того, чтобы этого не произошло, ограничьте в фале robots.txt индексацию JS-файла, отвечающего за подгрузку контента. Это позволит скрыть нужную часть контента от поисковых роботов.
Итого
AJAX — полезная технология, позволяющая улучшать взаимодействие пользователя с сайтом и ускорять загрузку контента. У многих SEO-оптимизаторов сложился стереотип, что подружить сайты, использующие AJAX с SEO невозможно. Это не так, поисковые системы постепенно идут к индексации сайтов с динамическим контентом собственными силами, а также предлагают вебмастерам и оптимизаторам варианты специальных технических настроек, позволяющих решать проблемы.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.