Контент без 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 |
|---|---|
| React | Next.js |
| Vue | Nuxt |
| Angular | Angular 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, а не размывалась по дублям.