JavaScript и рендеринг
DOM, цикл событий и рендеринг в браузере: что происходит со страницей после загрузки и что из этого видит поисковый робот.
Термины словаря
DOM: дерево элементов страницы в браузере
DOM: определение, практический пример и проверка. DOM — объектная модель HTML- или XML-документа, с которой работают браузерные скрипты.
Узел DOM: определение и проверка
Узел DOM — объект дерева документа: элемент, текст, комментарий или другой тип структурной единицы.
Жизненный цикл документа: стадии готовности страницы
Жизненный цикл документа включает загрузку и разбор HTML, выполнение связанных задач и переход страницы между состояниями готовности.
Event loop: почему JavaScript может задерживать интерфейс
Event loop: определение, практический пример и проверка. Event loop организует выполнение задач и обработку асинхронных событий в среде JavaScript.
Рендеринг: как HTML превращается в страницу
Рендеринг — обработка ресурсов страницы для построения её представления. При JavaScript SEO важно различать исходный ответ сервера и DOM после выполнения скриптов.
Virtual DOM: представление интерфейса перед обновлением DOM
Virtual DOM: определение, практический пример и проверка. Virtual DOM — распространённое название подхода, при котором библиотека хранит описание интерфейса и согласует изменения с настоящим DOM.
ECMAScript: стандарт языка JavaScript
ECMAScript: определение, практический пример и проверка. ECMAScript — спецификация языка, на которой основан JavaScript.
Fetch API: как получать данные в JavaScript
Fetch API: определение, практический пример и проверка. Fetch API — браузерный интерфейс для сетевых запросов и обработки ответов через Request и Response.
Web Worker: вычисления вне основного потока страницы
Web Worker: определение, практический пример и проверка. Web Worker выполняет JavaScript в отдельном контексте, позволяя вынести часть вычислений из основного потока.
Локальное хранилище: данные сайта в браузере
localStorage — браузерное хранилище строковых ключей и значений для конкретного origin. Данные обычно сохраняются между сеансами браузера.
Динамический импорт: загрузка модуля по требованию
Динамический импорт import() — выражение JavaScript для асинхронной загрузки модуля. Оно возвращает Promise с объектом экспортов модуля.
Цепочка прототипов: определение и проверка
Цепочка прототипов — последовательность объектов, по которой JavaScript ищет свойство, отсутствующее у самого объекта.
Шаблонная строка: определение и проверка
Шаблонная строка — синтаксис JavaScript для текста с подстановкой выражений и поддержкой нескольких строк.
Query selector: поиск элемента документа по CSS-селектору
Query selector: определение, практический пример и проверка. querySelector() — метод DOM, возвращающий первый элемент, который соответствует CSS-селектору, либо null.
Группировка селекторов: одно правило CSS для нескольких целей
Группировка селекторов — запись нескольких CSS-селекторов через запятую перед общим блоком объявлений.
Режим совместимости: устаревшие правила отображения
Режим quirks — режим браузера, который воспроизводит некоторые особенности старых сайтов. Он отличается от современного режима без quirks.
Progressive enhancement: рабочая основа и дополнительные возможности
Progressive enhancement: определение, практический пример и проверка. Progressive enhancement — подход, при котором базовое содержимое и функции доступны широко, а улучшения добавляются при поддержке нужных возможностей.
Числовой тип Number: определение и проверка
Number — числовой тип JavaScript с представлением значений в формате двойной точности.
Цикл: определение и проверка
Цикл — конструкция программы для повторного выполнения действий при выполнении заданного условия или переборе значений.
Экспорт модуля: определение и проверка
Экспорт модуля — объявление значений JavaScript, которые могут импортироваться другими модулями.
Материалы журнала
Страница открывается в браузере: почему этого недостаточно для SEO
Работа страницы у посетителя не подтверждает доступность для поискового робота. Сравните ответы, правила обхода и содержание после рендеринга, не выдавая подмену User-Agent за проверку настоящего Googlebot.
Soft 404: как найти ошибку за ответом 200
Для диагностики Soft 404 сопоставьте HTTP-статус с реальным содержимым страницы. Восстанавливайте полезный материал либо возвращайте подходящий ответ для отсутствующего ресурса.
Пагинация, «Показать ещё» и бесконечная прокрутка
Дополнительные элементы списка должны быть доступны по понятным URL и ссылкам. Поисковый робот не обязан нажимать кнопку «Показать ещё» или прокручивать страницу как посетитель.
Что получает поисковик: исходный HTML и DOM
Сравнивайте ответ сервера и DOM после выполнения JavaScript отдельно. Google умеет рендерить JavaScript, но ошибки ресурсов и недоступные данные могут изменить полученное содержание.
SSR и CSR на одном примере: как провести сравнение
Чтобы сравнить SSR и CSR, используйте одинаковое содержание и заранее задайте условия. Отдельно измеряйте доступность HTML, появление контента и интерактивность; ниже приведён протокол, а не результаты эксперимента.
Mobile-first: что мобильная версия не должна потерять
Сравните содержание, метаданные и доступные ссылки на телефоне и компьютере. Мобильное отображение может быть компактнее, но не должно случайно терять основной материал.
INP: почему интерфейс тормозит после нажатия
Исследуйте задержку реакции в конкретном сценарии: очередь ввода, обработчики и подготовку следующего кадра. Сокращение сетевого запроса не исправит тяжёлую синхронную работу, блокирующую интерфейс.
Как проверять SEO-гипотезы без ложных выводов
До изменения сформулируйте гипотезу, показатель, условия и ограничения. Изменение трафика после правки ещё не доказывает, что именно эта правка стала причиной.