Статья

Чужие ошибки: веб-приложение и результирующий код

Частая ошибка SEO-специалистов - непонимание разницы между JS-рендерингом и серверным HTML.

21.07.2024

Главная проблема SEO-специалистов в эпоху JS-фреймворков

Есть распространённый подход к техническому SEO-аудиту:

SEO-специалист открывает сайт в браузере, нажимает F12, смотрит во вкладку Elements, видит там title, description, меню, ссылки, контент — и делает вывод:

«Всё в порядке, поисковик это видит».

К сожалению, это не всегда так.

Современный сайт на JS-фреймворке — это не просто HTML-документ. Во многих случаях это приложение, которое собирается прямо в браузере.

---

Что такое «браузерный инстанс приложения»

Упрощённо:

Сервер отдаёт:

  • базовый HTML (иногда почти пустой);
  • JavaScript-файлы;
  • инструкции по сборке интерфейса;
  • логику работы с API.

Дальше браузер:

  1. загружает JS,
  2. выполняет его,
  3. делает запросы к API,
  4. собирает страницу,
  5. и только потом показывает её пользователю.

Важно:

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-платформами, а также аккредитацией Министерства цифрового развития России.

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

Обсудить проект

Контакты

Почтовый адрес: 410012, Россия, г. Саратов, ул. Б.Казачья, зд.49/65, оф.505

2007-2026 © «Аврора Интернет» ИНН 6455061304 КПП 645501001 ОГРН 1146455000856

Все цены и характеристики услуг и работ, указанные на сайте, приведены как справочная информация и не являются публичной офертой, определяемой положениями статьи 437 Гражданского кодекса Российской Федерации, и могут быть изменены в любое время без предупреждения. Для получения актуальной и подробной информации об услугах и стоимости просьба обращаться к специалистам проектного отдела.
Все упоминаемые торговые марки являются собственностью их владельцев.

Статус и значок Google Partner относятся исключительно к рекламной платформе Google Ads и не означают, что Google рекомендует наши услуги в области SEO и поискового продвижения сайтов.

Политика безопасности и обработки персональных данных

Наш сайт использует cookies. Продолжая пользоваться сайтом,
вы соглашаетесь с условиями нашей Политики безопасности.