Контент без JavaScript

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

🎯 Тема урока

Контент должен быть в HTML, а не собираться скриптами

1. Ключевой факт

Большинство поисковых ботов нейросетей не выполняют JavaScript.

Классический Googlebot умеет рендерить JS (с задержкой и оговорками). ИИ-краулеры в основной массе — нет. Они забирают исходный HTML и разбирают его.

Если тексты, характеристики товаров или цены подгружаются динамически на стороне браузера, ИИ-краулер увидит пустую страницу. Не «плохо оптимизированную» — именно пустую.

2. Как проверить за две минуты

Способ 1 — отключить JS в браузере. Chrome → DevTools (F12) → Ctrl/Cmd + Shift + P → команда Disable JavaScript → перезагрузить страницу.

Что должно остаться доступным: заголовки, основной текст, цены, характеристики, контакты, ссылки навигации.

Способ 2 — посмотреть сырой HTML.

curl -s https://example.com/page/ | grep -c "ключевая фраза со страницы"

Ноль в ответе означает, что текста в исходном HTML нет.

Способ 3 — «Просмотр кода страницы» (Ctrl+U), а не «Инспектор». Инспектор показывает DOM после исполнения скриптов и вводит в заблуждение.

3. Решение для SPA: SSR

Если сайт построен на React, Vue или Angular, технические специалисты должны настроить SSR (Server-Side Rendering) — серверный рендеринг, при котором робот получает готовый текстовый HTML.

СтекИнструмент SSR/SSG
ReactNext.js
VueNuxt
AngularAngular Universal
ЛюбойПререндер отдельных маршрутов, статическая генерация

Альтернатива для небольших проектов — пререндеринг (prerender) ключевых страниц в статический HTML.

4. Семантика HTML5: где смысл, а где меню

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

<body>
  <nav><!-- сквозная навигация --></nav>
  <main>
    <article>
      <h1>Робот-пылесос Roborock S8</h1>
      <section>
        <h2>Время автономной работы Roborock S8</h2>
        <p>Робот-пылесос Roborock S8 работает до 180 минут...</p>
      </section>
    </article>
  </main>
  <footer><!-- подвал --></footer>
</body>

Правила:

  • используйте <main>, <article>, <section>, <nav>, <footer> — они показывают машине, где суть, а где обвязка;
  • каждый <section> сопровождается чётким заголовком <h2><h6>;
  • страница без подзаголовков — для ИИ «стена текста», из которой неудобно извлекать данные; по заголовкам нейросеть находит нужный фрагмент.

5. Таблицы: только тегом <table>

Нейросети любят сравнительные таблицы и часто выводят их в чат целиком — но только если таблица свёрстана стандартным кодом.

Не верстайте таблицы блоками <div> и тем более не вставляйте их картинками. Изображение с текстом машина не читает. Используйте <table> и обязательно добавляйте <caption> с описанием сути таблицы.
<table>
  <caption>Сравнение тарифов на обслуживание сайта: цена, состав работ, срок</caption>
  <thead>
    <tr><th>Тариф</th><th>Цена в месяц</th><th>Что входит</th></tr>
  </thead>
  <tbody>
    <tr><td>Базовый</td><td>15 000 ₽</td><td>Мониторинг, обновления, бэкапы</td></tr>
  </tbody>
</table>

6. Что ещё скрыто от ботов

  • Контент во вкладках и аккордеонах, подгружаемый по клику через AJAX — робот его не увидит. Отдавайте в HTML сразу, скрывая только визуально через CSS.
  • Отзывы и цены во внешних виджетах — дублируйте текстом на странице.
  • Текст на изображениях и скриншотах — не читается вообще.
  • Бесконечная прокрутка без пагинации — часть каталога недоступна.

7. Чек-лист урока

  • С отключённым JS видны заголовки, основной текст, цены и характеристики.
  • Для SPA настроен SSR или пререндер.
  • Использованы семантические теги HTML5.
  • Каждый смысловой блок имеет заголовок H2–H6.
  • Таблицы свёрстаны тегом <table> с <caption>.
  • Контент вкладок и аккордеонов присутствует в исходном HTML.

🧭 Что дальше?

Последний технический урок: чистота адресов и canonical — чтобы цитируемость накапливалась на одном URL, а не размывалась по дублям.