AJAX: что это такое, принцип работы и влияние на SEO

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

Фоновая передача информации улучшает пользовательский опыт. Клиенту не нужно тратить время на ожидание загрузки и нажатие кнопок пагинации. Для внедрения динамической подгрузки в шаблон сайта необходимо добавить соответствующий JS-код.

Впервые об этом методе разработки интерфейсов веб-приложений заговорили в 2005 году. Автором концепции принято считать Джесси Джеймса Гаррета.

Как устроен AJAX технически

В основе технологии лежит объект XMLHttpRequest (XHR). Именно он позволяет языку программирования JavaScript отправлять запросы к серверу и получать ответ без обновления страницы. Сегодня XHR считается legacy-интерфейсом. Ему на смену пришел нативный Fetch API, реализованный во всех современных браузерах. Fetch строится на Promise и читается проще, чем колбэк-цепочки XHR.

Ниже представлены два эквивалентных примера асинхронного запроса.

Fetch API с обработкой ошибок и обновлением DOM:

// Отмена запроса через AbortController
const controller = new AbortController();

fetch('/api/items', { signal: controller.signal })
  .then(response => {
    if (!response.ok) throw new Error('HTTP error: ' + response.status);
    return response.json();
  })
  .then(data => {
    document.querySelector('#list').innerHTML =
      data.map(item => `<li>${item.name}</li>`).join('');
  })
  .catch(error => console.error('Ошибка запроса:', error));

// Отменить запрос при необходимости:
// controller.abort();

XMLHttpRequest (классический подход):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/items');
xhr.onload = function () {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    document.querySelector('#list').innerHTML =
      data.map(item => `<li>${item.name}</li>`).join('');
  } else {
    console.error('Ошибка:', xhr.status);
  }
};
xhr.onerror = () => console.error('Сетевая ошибка');
xhr.send();

Fetch позволяет отменять ajax-запрос через AbortController. Это удобно при быстром поиске или смене маршрута в SPA до того, как сервер успеет дать ответ. XHR предоставляет событие onprogress для отслеживания загрузки файлов. Оба инструмента умеют обрабатывать форматы XML, JSON, обычный текст и стандартный HTML.

В связке с AJAX часто используют подход Dynamic HTML для изменения содержимого веб-страницы: динамическая генерация тегов img, script и побочных фреймов.

Современный стек: Fetch, Axios и фреймворки

Сегодня у разработчика есть три основных инструмента для работы с сетью: нативный XHR, современный Fetch и библиотека Axios. Каждый занимает свою нишу. Ниже представлена сравнительная таблица.

Если проект использует React, Vue или Angular, запросы обычно уходят через встроенные хуки. Однако под капотом работает Fetch или Axios. Для SEO-важных разделов ресурса необходимо использовать SSR (Server-Side Rendering) или SSG (Static Site Generation). Серверный рендеринг позволяет отдать краулеру готовый HTML-файл без ожидания выполнения клиентского скрипта.

А на вашем сайте техничка в порядке?

• Подарим чек-лист по внутренней оптимизации
• Проконсультируем по SEO-вопросам

Получить чек-лист

AJAX и SEO: проблемы с индексированием

Может ли поисковик сканировать AJAX-контент? Если коротко, то да. Но краулерам делать это сложнее. Одностраничные приложения исторически создавали проблемы для продвижения. Выделим основные недостатки:

• Проблемы со сканированием. Важный контент скрыт внутри JS. Робот видит пустой экран.
• Проблемы с навигацией. Кнопка «Назад» в браузере работает некорректно без History API.
• Маскировка. Вебмастеры создавали две версии выдачи: для пользователя и для поисковой системы. Это запрещено правилами и ведет к санкциям.

Долгое время Google советовал использовать схему с параметром _escaped_fragment_. Она сообщала краулерам о наличии динамики и позволяла получать предварительно обработанную версию документа.

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

Ситуация изменилась в 2015 году. Google объявил, что краулеры научились выполнять рендеринг и анализировать содержимое внутри JavaScript. Схема hashbang (#!) и протокол _escaped_fragment_ перешли в статус исторических. Сегодня их использование не рекомендуется.

Как Google и «Яндекс» видят AJAX-страницы

По официальным заявлениям, Googlebot рендерит JS и индексирует динамику. На практике процесс происходит в два этапа: сначала краулер сканирует URL, затем ставит в очередь на рендеринг. Это ресурсоемкая операция, поэтому между обнаружением и реальной индексацией проходит время.

5 классных SEO-кейсов

Круче, чем Гудини: как мы вырастили трафик в 2,2 раза

Все вы прекрасно знаете Гарри Гудини: этот фокусник мог выбраться из закрытой бочки, брошенной в воду. Примерно в таких же рамках оказались и мы, начиная работу с сайтом Eurorepar. Узкий функционал, жесткие требования. Но мы справились без магии, увеличив трафик х2!

Читать кейс

Читать кейс

Как выжать максимум из двадцатилетнего сайта

Можно ли выжать максимум из 20-летнего сайта и докрутить его до современных стандартов? А если есть отягчающие обстоятельства — накрутка поведенческих факторов, антиботы, да еще и админка капризничает и сама удаляет категории?

Читать кейс

Читать кейс

Долгая дорога в SEO и мощный прорыв

Наш клиент — интернет-магазин B2B промышленной тематики. Он достался нам после предыдущих подрядчиков, и первые год-два мы исправляли их ошибки. А потом началась долгая кропотливая работа, которая в итоге принесла желанный результат.

Читать кейс

Читать кейс

Qugo: вырастили трафик из блога платформы b2b в 9,7 раз!

Молодой сайт, сложная тематика b2b, крупные конкуренты — с такими вводными трафик и позиции оставляли желать лучшего. Но бы добились цели: повысили трафик и позиции, улучшили узнаваемость бренда

Читать кейс

Читать кейс

Эффективное ссылочное продвижение для федеральной аптечной сети

Федеральная аптечная сеть пришла в Kokoc Performance (входит в Kokoc Group) за ссылочным продвижением. Интересно, что в компании есть своя in-house команда по SEO, которая подготовила ссылочную стратегию, а за ее реализацией обратилась к нам.

Читать кейс

Читать кейс

1/5

«Яндекс» работает иначе. Робот по умолчанию сам решает, выполнять ли обработку скриптов. В панели «Яндекс Вебмастер» можно задать нужный режим: «Рекомендую рендерить», «На усмотрение робота» или «Не рендерить». Последний вариант подойдет, если на сайте уже настроен SSR — дополнительная нагрузка со стороны поисковика не требуется.

Ниже представлена сравнительная таблица по подходу двух систем.

Два фактора, напрямую влияющие на ранжирование:

• Скрытый текст. Если важная информация спрятана в JS, индексирование задерживается. Убедитесь, что критичный контент доступен в HTML-формате.
• Отсутствующие ссылки. Поисковики используют внутренние ссылки для понимания структуры. Внешние ссылки — это фактор ранжирования. Они должны быть доступны в коде, а не генерироваться скриптом.

Об индексации Google мы также писали в статье «9 причин, почему Google не индексирует сайт».

Как AJAX влияет на SEO

Означает ли это, что можно забыть об оптимизации? Обратимся к официальной справке:

Формулировка прозрачна: поисковик умеет обрабатывать скрипты, но обеспечение доступности — задача вебмастера. Больше не нужно использовать «костыли», чтобы показать разницу между статикой и динамикой.

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

Чтобы решить эту проблему, необходимо использовать History API с методом pushState(). Он меняет URL на стороне клиента и добавляет запись в историю браузера без перезагрузки. Это сохраняет работоспособность кнопок навигации.

Как сделать AJAX-контент доступным для Google и «Яндекса»

Ниже представлен чек-лист из 10 шагов для настройки индексации.

1. Настроить SSR или SSG. Серверный рендеринг — самый надежный способ. Робот получает готовый HTML без ожидания клиентского скрипта.
2. Использовать Dynamic Rendering. Если SSR недоступен, настройте отдачу статики ботам через пререндер. Google называет это временным решением.
3. Оптимизировать URL через History API. Применяйте pushState() вместо устаревшего _escaped_fragment_.
4. Добавить canonical-теги. Укажите основную версию при наличии фильтров через rel="canonical".
5. Не прятать контент в JS. Базовый текст должен быть в HTML.
6. Оптимизировать скорость. Раздутый DOM снижает производительность и затрудняет обход.

7. Удалить блокирующие ресурсы. Тяжелый код влияет на Core Web Vitals (LCP и INP).
8. Обеспечить корректные HTTP-коды. API должно возвращать 404 при ошибке, исключая soft 404.
9. Настроить микроразметку. Schema.org помогает формировать расширенные сниппеты.
10. Обновить карту сайта. Сгенерируйте актуальный sitemap.xml.

Проблема индексирования решена, но полностью асинхронные сайты остаются сложными в продвижении. Используйте чек-лист выше, чтобы минимизировать риски. Пререндер поможет убедиться, что данные доступны при каждом обращении Googlebot.

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

Как проверить, видит ли поисковик ваш контент

Перед релизом необходимо проверить доступность данных:

1. Отключите JS в браузере. Используйте DevTools. Если страница пустая — робот увидит то же самое.
2. Изучите исходный код. Нажмите Ctrl+U. Отсутствие текста означает генерацию на клиенте.
3. Используйте Google Search Console. Инструмент Live Test покажет ререндеренный HTML.
4. Проверьте рендеринг в «Яндекс Вебмастере». Раздел «Диагностика» покажет, как система обходит ресурс.
5. Проанализируйте логи сервера. Убедитесь, что боты получают код 200.

Почему у поисковых систем возникали сложности? Чтобы ответить на этот вопрос, необходимо рассмотреть механику взаимодействия.

Последовательность обращения к серверу: стандартный и AJAX

Рассмотрим, как происходит обмен данными в классическом варианте:

1. Пользователь открывает страницу сайта.
2. Происходит взаимодействие с элементом.
3. Браузер создает HTTP-запрос.
4. Запрос отправляется на сервер.
5. Сервер генерирует новую версию документа.
6. Браузер получает ответ и выполняет полную перезагрузку.

AJAX-подход меняет эту последовательность:

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

Когда использовать AJAX, а когда — нет

Технология не универсальна. Разберем сценарии применения.

AJAX подходит, когда:

• нужно обновить часть интерфейса (корзина, форма);
• важна непрерывность медиапотока;
• требуется живой поиск (search) и автозаполнение;
• необходимо снизить нагрузку на серверный ресурс.

AJAX не подходит, когда:

• основной контент генерируется на клиенте (нужен SSR);
• высокий SEO-приоритет без настроенного рендеринга;
• аудитория работает с отключенным JavaScript;
• требуется простая навигация между статьями.

Отдельного внимания требует аналитика. В SPA смена состояния не создает новый просмотр автоматически. Необходимо отправлять событие page_view вручную.

Эффективное SEO

• Гарантия результатов
• Комплексное развитие
• При любом тарифе отслеживаем динамику заявок и звонков с сайтов
• Регулярный пересмотр семантического ядра

Узнать больше

Достоинства AJAX

Подход ценен для стриминга. YouTube использует асинхронные запросы для мини-плеера и рекомендаций.

Выделим три главных преимущества:

1. Экономия трафика. Браузер не запрашивает весь документ. При этом итоговая скорость зависит от размера JS-бандла.
2. Динамические окна. Вывод остатков товара в интернет-магазине или подсказок. Контент выводится мгновенно.

   

3. Снижение нагрузки. Сервер обрабатывает только нужный объем информации.

Недостатки AJAX

Главный риск — трудности с индексацией при некорректной настройке плагинов.

Остальные недостатки:

• URL не отражает структуру сайта.
• Просмотры не фиксируются счетчиками веб-аналитики по умолчанию.
• Требуется включенный JS.
• Навигация ломается без History API.
• Риск клоакинга (маскировки).

Ниже представлена сводная таблица.

Резюме. Правильный AJAX для SEO

Подведем итоги:

1. Поисковики умеют работать с JS. Для вашей CMS существуют готовые плагины.

   

2. При проблемах настраивайте пререндер. Это гарантирует доступность HTML-кода.
3. Обязательно обновляйте XML-карту. Сгенерируйте актуальный sitemap.xml после внедрения изменений.

Глоссарий терминов

AJAX

Asynchronous JavaScript and XML — подход к асинхронному обмену данными между браузером и сервером без полной перезагрузки страницы.

XMLHttpRequest (XHR)

Legacy-интерфейс браузера для отправки HTTP-запросов из JavaScript. Предшественник Fetch API.

Fetch API

Современный нативный интерфейс для выполнения HTTP-запросов, построенный на Promise. Поддерживается всеми актуальными браузерами.

AbortController

Встроенный механизм для отмены Fetch-запроса. Полезен в живом поиске и маршрутизации SPA.

History API / pushState()

Браузерный API, позволяющий изменять URL в адресной строке и управлять историей переходов без перезагрузки страницы.

SSR (Server-Side Rendering)

Серверный рендеринг: HTML страницы генерируется на сервере до отправки браузеру. Поисковик получает готовый контент.

SSG (Static Site Generation)

Статическая генерация страниц на этапе сборки проекта. Даёт максимальную скорость загрузки и предсказуемую индексацию.

Dynamic Rendering

Временное решение: сервер отдаёт разные версии страницы пользователям и поисковым ботам. Google называет его workaround, а не долгосрочной стратегией.

Crawl Budget (краулинговый бюджет)

Лимит поискового робота по количеству обращений к домену за единицу времени.

Core Web Vitals

Набор метрик Google для оценки пользовательского опыта: LCP (скорость загрузки основного контента), INP (отзывчивость на взаимодействие), CLS (стабильность вёрстки).

SPA (Single Page Application)

Одностраничное приложение. Весь интерфейс загружается однажды, навигация и обновление контента происходят через AJAX без перезагрузки.

FAQ об AJAX

Hfp,thtv самые популярные ответы про AJAX