Что такое DOM?
DOM (Document Object Model, объектная модель документа) — это представление HTML-страницы в браузере в виде дерева объектов, к которому обращается JavaScript. Браузер превращает разметку в структуру узлов и уже по ней рисует страницу на экране.
DOM — это не исходный HTML-файл, а результат его обработки браузером: теги, текст, атрибуты и блоки, добавленные скриптами, становятся узлами дерева. Бизнесу это важно потому, что поисковые роботы и ИИ-агенты оценивают страницу именно по итоговому DOM, а не по коду из ответа сервера. Если цены, тексты или ссылки появляются только после выполнения JavaScript, поиск может их не увидеть вовсе.
Как работает DOM: от HTML-кода до дерева
Браузер получает HTML и разбирает его в дерево узлов. Корень — объект document, от него вниз идут элементы (header, section, p, a), их атрибуты, текстовые узлы и комментарии. Отдельно строится CSSOM — модель стилей; вместе с DOM она образует дерево отрисовки, по которому браузер считает размеры и рисует пиксели.
Ключевая особенность: DOM — «живая» структура. Скрипт может добавить, удалить или переписать любой узел, и пользователь сразу увидит изменения, хотя исходный HTML на сервере останется прежним. Поэтому исходный код страницы и её DOM — не одно и то же. Посмотреть итоговый DOM можно в DevTools на вкладке Elements, а исходник — через «Просмотр кода страницы».
Современные фреймворки усложняют картину: React и Vue держат в памяти собственный виртуальный DOM и обновляют браузерное дерево только после сравнения версий. Но итог один — в браузере всё равно появляется настоящий DOM, с которым работает поиск. По логике это близко к тому, как ORM описывает таблицы базы данных объектами: вместо работы с текстом программист получает готовую структуру.
Зачем DOM нужен бизнесу и SEO
Поисковые системы не читают страницу как человек. Робот Яндекса и Google сначала получает HTML, затем рендерит страницу — выполняет JavaScript и строит DOM, и уже по нему собирает текст, ссылки и разметку. Поэтому всё важное для продвижения должно оказаться в DOM при рендеринге: заголовки, описания товаров, цены, навигация, микроразметка.
Отдельно стоит помнить о мета-тегах. Title, description и Open Graph лучше отдавать в исходном HTML: часть краулеров, мессенджеры и соцсети JavaScript не выполняют и увидят пустую страницу.
Второй эффект — скорость. Чем больше узлов в DOM, тем дороже пересчёт стилей и отрисовка, а это напрямую влияет на Core Web Vitals (LCP, INP). Раздутое дерево на несколько тысяч элементов — типичная причина просадок на мобильных.
К 2026 году добавился третий фактор — ИИ-поиск. Нейросетевые ответы и агенты-краулеры разбирают страницу на фрагменты, и делают это по текстовому представлению DOM. Чистая семантичная структура заголовков и абзацев повышает шанс, что ваш фрагмент попадёт в ответ.
Как применять: практический чек-лист
- Сравните DOM и исходный код: откройте DevTools → Elements и «Просмотр кода страницы». Если в исходнике нет текста или ссылок, которые есть в DOM, — страница зависит от JavaScript.
- Проверьте рендеринг глазами робота: инструменты в Яндекс Вебмастере и «Проверка URL» в Search Console показывают, что именно увидел поиск.
- Убедитесь, что ключевой контент доступен без действий пользователя — без клика по табам, аккордеонам и «показать ещё».
- Оцените размер дерева: расширение для подсчёта DOM-узлов покажет лишние обёртки, дублирующие блоки и пустые контейнеры.
- Для страниц на клиентском рендеринге включите SSR, SSG или пререндер — тогда HTML с контентом приходит сразу, а DOM лишь достраивается.
Типичные ошибки
- Контент и внутренние ссылки появляются только после выполнения скрипта — краулер видит пустой каркас.
- Бесконечная прокрутка и lazy-load без обычных ссылок: товары и статьи не попадают в индекс.
- Попытка «зашить» SEO-текст в скрытые узлы (display: none) — это расценивается как недобросовестная оптимизация.
- Раздутый DOM: тысячи вложенных обёрток замедляют отрисовку и ухудшают метрики.
- Ожидание, что робот нажмёт кнопку или проскроллит страницу, как это сделал бы человек.
Коротко
DOM — это то, что фактически видит браузер, поиск и ИИ-агент: дерево узлов, собранное из HTML и скриптов. Задача бизнеса — чтобы важный контент попадал в это дерево сразу, без дополнительных действий, и чтобы само дерево оставалось компактным. Тогда страница и индексируется, и загружается нормально.
