Технология AJAX

AJAX (Asynchronous JavaScript and XML) – это способ обновлять часть страницы без её полной перезагрузки: скрипт в фоне отправляет запрос на сервер, получает данные и вставляет их в нужный блок. Посетитель видит, как меняется список товаров или корзина, а сама страница остаётся на месте.

Вы выбираете в каталоге фильтр «Цвет: чёрный», и товары меняются за секунду, без белого экрана и прыжка наверх. Это AJAX. Удобно для человека, но есть вопрос, который стоит задать разработчику заранее: а что в этот момент видит поисковый робот?

Фоновый запрос вместо перезагрузки страницы

Название появилось в 2005 году, когда XML был основным форматом обмена. Сейчас данные чаще передают в JSON или готовыми кусками HTML, а запросы отправляют через XMLHttpRequest или более новый fetch. Суть осталась прежней:

1. Посетитель что-то делает: нажимает кнопку, выбирает фильтр, вводит текст.
2. Скрипт отправляет фоновый запрос на сервер.
3. Сервер возвращает только нужные данные, а не всю страницу.
4. Скрипт вставляет их в страницу и при необходимости меняет адрес в строке браузера.

Так выглядит загрузка второй страницы товаров по кнопке «Показать ещё» (пример упрощённый):

fetch('/catalog/smesiteli/?PAGEN_1=2&ajax=y')
  .then(r => r.text())
  .then(html => list.insertAdjacentHTML('beforeend', html));
history.pushState({}, '', '/catalog/smesiteli/?PAGEN_1=2');

Последняя строка важна для SEO: через History API она меняет адрес в браузере, и у подгруженного состояния появляется собственный URL. Без неё кнопка «Назад» выбрасывает посетителя из каталога, а ссылкой на подборку не поделиться.

Зачем AJAX сайту

У технологии честные плюсы, и отказываться от неё ради SEO не нужно:

• Меньше данных на каждое действие: сервер отдаёт кусок списка, а не всю страницу с шапкой и подвалом.
• Посетитель не теряет место на странице и выбранные настройки.
• Форма заявки отправляется без перезагрузки, и человек сразу видит, что заявка ушла.
• Подсказки в поиске по сайту и пересчёт корзины срабатывают без ожидания.

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

Фильтры, «Показать ещё», вкладки: где AJAX мешает поиску

Про фильтры с собственными адресами рассказываем в статье SEO-фильтры, про страницы каталога в статье Пагинация.

У многих стандартных компонентов 1С-Битрикс есть параметр режима AJAX (AJAX_MODE). Он удобен, но после его включения проверьте постраничную навигацию и фильтр каталога: ссылки на страницы должны остаться обычными ссылками с адресами, а важные для поиска состояния фильтра должны открываться по прямому URL.

Как поисковики видят AJAX

Google и Яндекс выполняют JavaScript, то есть делают рендеринг страницы. Но робот не нажимает кнопки, не выбирает фильтры и не прокручивает ленту. Всё, что загружается только в ответ на действие человека, для него остаётся невидимым. Даже блок, который подгружается сам, робот может не дождаться, если сервер медленно отвечает на фоновые запросы.

Раньше для AJAX-сайтов была отдельная схема: адреса с #! и параметр _escaped_fragment_, по которому сервер отдавал роботу HTML-копию. Google объявил её устаревшей в 2015 году. Яндекс тоже отказался от неё: робот игнорирует мета-тег fragment, сканирует обычные адреса и сам выполняет JavaScript. Если сайт до сих пор работает по старой схеме, Яндекс советует перейти на адреса без решётки через History API и поставить 301 редиректы со старых адресов с _escaped_fragment_.

Как проверить AJAX-блоки

• Откройте исходный код страницы. Если текста или товаров там нет, они приходят по AJAX.
• В инструментах разработчика на вкладке Network включите фильтр Fetch/XHR и посмотрите, какие запросы уходят при клике.
• Скопируйте адрес после выбора фильтра и откройте его в новой вкладке. Если открылся каталог без фильтра, у этого состояния нет своего URL.
• Проверьте страницу в Search Console и Вебмастере: есть ли нужный контент в отрисованной версии.

Индексация, адреса с решёткой, скорость и кнопка «Назад»

AJAX-блоки и фильтры каталога проверяем на техническом аудите сайта, а переделку навигации и фильтров под SEO берём в доработку существующего сайта.

Справки Яндекса и Google

• Справка Яндекс Вебмастера: индексирование AJAX-сайтов
• Google Search Central Blog: Deprecating our AJAX crawling scheme (2015)
• Google Search Central: основы JavaScript SEO