Главная проблема SEO-специалистов в эпоху JS-фреймворков
Есть распространённый подход к техническому SEO-аудиту:
SEO-специалист открывает сайт в браузере, нажимает F12, смотрит во вкладку Elements, видит там title, description, меню, ссылки, контент — и делает вывод:
«Всё в порядке, поисковик это видит».
К сожалению, это не всегда так.
Современный сайт на JS-фреймворке — это не просто HTML-документ. Во многих случаях это приложение, которое собирается прямо в браузере.
---Что такое «браузерный инстанс приложения»
Упрощённо:
Сервер отдаёт:
- базовый HTML (иногда почти пустой);
- JavaScript-файлы;
- инструкции по сборке интерфейса;
- логику работы с API.
Дальше браузер:
- загружает JS,
- выполняет его,
- делает запросы к API,
- собирает страницу,
- и только потом показывает её пользователю.
Важно:
---SEO-специалист в DevTools почти всегда видит уже результат, а не исходный HTML.
HTML, DOM и то, что видит бот
Есть три уровня:
1. Исходный HTML
<html>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>
2. DOM после выполнения JS
<h1>Каталог</h1>
<a href="/catalog/">Каталог</a>
3. Что получает бот
Бот может:
- не выполнить JS полностью;
- не дождаться API;
- проиндексировать только исходный HTML.
Вывод:
---То, что видно в DevTools, не гарантирует, что это видит поисковый робот.
Пример 1. Метаданные
SEO-специалист видит в DevTools:
<title>Купить диван</title>
<meta name="description" content="Большой выбор диванов">
Но в исходном HTML:
<title></title>
<meta name="description" content="">
Метаданные добавляются через JavaScript.
Важно:
---Нужно проверять HTML, а не только DevTools.
Пример 2. Навигация
Меню может отображаться, но появляться только после JS:
<nav>
<a href="/catalog/">Каталог</a>
<a href="/catalog/divany/">Диваны</a>
</nav>
В исходном HTML его может не быть.
Вывод:
---Видимость меню ≠ доступность для поискового робота.
Пример 3. URL и слэши
SEO-специалист видит URL без слэша:
/catalog/divany
Но сервер (например, на уровне NGINX) может корректно редиректить:
/catalog/divany → /catalog/divany/
Разница возникает из-за клиентской навигации (SPA).
Вывод:
---Нужно различать серверную логику и поведение браузера.
Откуда взялся trailing slash
Исторически это связано с файловой структурой сайтов и серверами вроде Apache.
URL со слэшем означал директорию:
/catalog/ → /catalog/index.php
---
Почему сейчас слэшей может не быть
В современных приложениях URL — это маршрут, а не папка.
Оба варианта могут быть нормальными:
/catalog/divany
/catalog/divany/
Важно только одно:
---Должен быть единый канонический формат.
Как проверять корректно
- смотреть исходный HTML;
- проверять ответы сервера;
- использовать DevTools как дополнительный инструмент;
- проверять через инструменты поисковых систем.
Вывод
Современный SEO требует понимания:
- рендеринга;
- работы браузера;
- разницы между HTML и DOM.
То, что видно в браузере, — это результат работы приложения, а не обязательно то, что получает поисковый робот.
Разовое SEO
Долгосрочное SEO
Аудит SEO
Консультации по SEO
SEO для платформ
Региональное SEO
SEO для ИИ
