Как Google анализирует рендеринг страницы (DOM и CSS) для обнаружения скрытого текста и ссылок

Термины и определения

Document Object Model (DOM) / Structural representation (Структурное представление)

Иерархическое, объектно-ориентированное представление документа (например, древовидная структура). Используется системой для анализа взаимосвязей, вложенности и свойств элементов после рендеринга.

Hidden elements (Скрытые элементы)

Текст, ссылки или другие объекты в документе, которые не видны пользователю при обычном просмотре, но присутствуют в коде.

Cascading Style Sheets (CSS)

Язык описания стилей. Используется для определения свойств элементов, таких как цвет, размер шрифта, позиционирование, видимость. В патенте рассматривается как инструмент для сокрытия контента.

Color Value (Значение цвета)

Числовое представление цвета (например, #RRGGBB). Используется для сравнения цвета элемента и фона.

Z-ordering / Z-index (Порядок слоев)

Свойство CSS, определяющее порядок наложения элементов по оси Z (глубина). Используется для выявления ситуаций, когда один слой перекрывает другой.

Ключевые утверждения (Анализ Claims)

Claim 1 (Независимый пункт): Описывает основной метод обнаружения скрытых элементов на основе анализа иерархической структуры и цветов.

1. Система определяет иерархическое структурное представление документа (DOM tree).
2. Определяется, являются ли элементы скрытыми на основе их расположения в этой структуре.
3. Механизм определения скрытия по цвету:
   • Идентификация Первого элемента (E1) с Цветом 1.
   • Идентификация Второго элемента (E2) с Цветом 2, при условии, что: (i) Цвета 1 и 2 схожи (находятся в определенном диапазоне) и (ii) E2 отображается ПОЗАДИ E1 при рендеринге.
   • Определение: E1 СКРЫТ, если между E1 и E2 нет промежуточных элементов.
   • Определение: E1 НЕ СКРЫТ, если между E1 и E2 есть промежуточный элемент с Цветом 3, который отличается от Цветов 1 и 2 (выходит за пределы диапазона схожести).

Ядро изобретения — это метод определения фактического фона путем обхода иерархической структуры (DOM) и учета наличия или отсутствия промежуточных контрастных слоев.

Claim 2 (Зависимый от 1): Уточняет логику промежуточных элементов.

Первый элемент (E1) определяется как скрытый, даже если между ним и вторым элементом (E2) есть третий (промежуточный) элемент, при условии, что этот третий элемент не связан ни с каким значением цвета (т.е. является прозрачным).

Claim 4 (Зависимый от 1): Описывает метод обнаружения контента, расположенного за пределами экрана (off-screen).

1. Определение внешней границы окна веб-браузера на основе декартовой системы координат.
2. Определение декартовых координат (X, Y) каждого элемента при отображении документа.
3. Определение: Элемент СКРЫТ, если его координаты находятся за пределами внешней границы окна браузера.

Claims 8, 9, 10 (Зависимые): Описывают дополнительные методы обнаружения скрытых элементов на основе их свойств.

• Claim 9: Обнаружение на основе индикаторов видимости (например, CSS свойство "hidden" или "invisible").
• Claim 10: Обнаружение на основе размера элемента (например, слишком маленький размер шрифта или изображения).

Claims 11, 19 (Зависимые): Описывают обнаружение на основе слоев (перекрытия).

Определение скрытности включает проверку того, находится ли расположение одного элемента по крайней мере частично под расположением другого элемента.

Claims 21, 22, 23 (Зависимые): Уточняют обработку HTML и CSS.

Элемент определяется как скрытый, если код CSS переопределяет заранее назначенное значение HTML-тега, связанного с этим элементом. (Например, если для тега <h2> через CSS установлен размер шрифта 1 пиксель).

Где и как применяется

Изобретение применяется на этапе анализа контента после его сканирования.

CRAWLING – Сканирование и Сбор данных
На этом этапе система получает исходный документ (HTML), а также связанные с ним внешние ресурсы (CSS, JavaScript), которые необходимы для последующего анализа видимости.

INDEXING – Индексирование и извлечение признаков
Основное применение патента. Процесс происходит во время рендеринга (Web Rendering Service) и анализа документа.

1. Рендеринг и построение структуры: Система строит DOM-дерево, применяя CSS и выполняя JavaScript.
2. Анализ видимости: Система применяет описанные в патенте методы (анализ цвета, размера, позиции, свойств CSS, Z-index) для определения того, какие элементы видны пользователю.
3. Извлечение признаков: Контент, признанный скрытым, может быть исключен из индексации, игнорироваться при расчете ссылочного веса или использоваться как сигнал спама.

Входные данные:

• HTML-документ.
• Связанные ресурсы: CSS (внутренние и внешние), JavaScript.
• Предполагаемые параметры окна браузера (viewport).

Выходные данные:

• Структурное представление документа (DOM) с аннотациями о свойствах элементов.
• Идентификаторы элементов, классифицированных как скрытые.

На что влияет

• Конкретные типы контента: В первую очередь влияет на текстовый контент и ссылки (включая ссылки-изображения).
• Конкретные ниши или тематики: Влияет на все ниши, но особенно критичен в высококонкурентных тематиках, где часто используются спам-техники, такие как перенасыщение ключевыми словами (keyword stuffing) или скрытое размещение ссылок.

Когда применяется

• Условия работы алгоритма: Применяется во время индексации для любого документа, который проходит этап рендеринга.
• Триггеры активации: Активируется для анализа каждого элемента в DOM-дереве. Триггером для признания элемента скрытым является выполнение одного из условий (совпадение цвета, малый размер, позиция off-screen и т.д.).
• Исключения и особые случаи: Патент упоминает исключение для маленьких изображений (1x1 пиксель), используемых для систем статистики и трекинга. Исключение может делаться на основе анализа URL или анкорного текста на наличие слов, связанных со статистикой (например, "stats", "track", "log", "click").

Пошаговый алгоритм

Процесс обнаружения скрытого контента:

1. Получение документа: Загрузка HTML документа и связанных ресурсов (CSS, JavaScript).
2. Построение структуры (DOM): Рендеринг документа и создание древовидной структуры (DOM tree), отражающей иерархию и вычисленные свойства всех элементов.
3. Предварительное обнаружение скрытых элементов (Анализ свойств): Система выполняет проверки для каждого элемента:
   • Размер: Выявление элементов с размером ниже порогового значения (например, 1 пиксель). Исключение трекинговых пикселей.
   • CSS-видимость: Выявление элементов с атрибутами "hidden" или "invisible".
   • Позиционирование: Расчет (X, Y) координат и сравнение с размерами окна браузера (viewport). Выявление элементов за пределами видимой области.
   • Перекрытие (Z-index): Анализ Z-index и координат для выявления элементов, полностью перекрытых другими объектами.
   • Переопределение стилей: Проверка переопределения стилей HTML-тегов через CSS (например, H2 размером 1px).
4. Идентификация свойств цвета: Определение значения цвета (Color Value) для каждого объекта в дереве.
5. Анализ контрастности (Обход дерева):
   1. Выбор элемента для анализа (например, текста). Определение его цвета (Цвет 1).
   2. Обход дерева ВВЕРХ для поиска ближайшего родительского элемента, который вносит вклад в цвет фона (Цвет 2). Пропуск прозрачных элементов.
6. Сравнение цветов: Сравнение Цвета 1 и Цвета 2. Определение, находятся ли они в пределах заданного диапазона схожести.
   • Если ДА (цвета схожи): Элемент помечается как скрытый.
   • Если НЕТ (цвета контрастны): Элемент помечается как видимый.
7. Обработка динамических изменений (Опционально): Мониторинг изменений в DOM tree, вызванных выполнением JavaScript. При значительных изменениях контента может проводиться дополнительный анализ на предмет манипуляций.

Какие данные и как использует

Данные на входе

Система использует данные, получаемые в результате рендеринга документа и анализа его структуры (DOM).

• Контентные факторы: Текст внутри элементов, анкоры ссылок.
• Технические факторы: Исходный HTML код, внешние CSS и JavaScript файлы.
• Структурные факторы: Иерархия и вложенность элементов в DOM tree (HTML-теги, такие как div, table, h1, h2).
• Мультимедиа факторы: Изображения, их размеры (особенно 1x1 GIF).
• Свойства элементов (CSS/Атрибуты):
  • Цвет (color, bgcolor).
  • Размер (font-size, width, height).
  • Позиционирование (position, top, left, координаты X, Y).
  • Видимость (visibility, display).
  • Порядок слоев (Z-index).
  • Прозрачность фона.

Какие метрики используются и как они считаются

• Color Values (Значения цвета): Используются стандартные представления цвета (например, #RRGGBB).
• Color Similarity Threshold (Порог схожести цвета): Конфигурируемый или предопределенный диапазон, в пределах которого цвета считаются схожими. Например, если значения цвета отличаются не более чем на 50 уровней (по шкале 0-255).
• Size Threshold (Порог размера): Минимальный размер элемента (например, 1 пиксель), при котором он считается видимым для пользователя.
• Element Coordinates (Координаты элемента): Положение элемента в декартовой системе координат (X, Y).
• Viewport Boundaries (Границы видимой области): Размеры окна браузера (height, width). Сравнение координат элемента с этими границами определяет, находится ли элемент на экране (on-screen) или за его пределами (off-screen).

1. Анализ рендеринга, а не исходного кода: Патент подтверждает, что Google анализирует визуальное представление страницы (отрендеренный DOM), а не только исходный HTML. Это требует интерпретации CSS и JavaScript для понимания того, что фактически видит пользователь.
2. Сложный анализ цвета и прозрачности: Система использует продвинутый механизм для определения фактического цвета фона под элементом. Она не просто сравнивает цвет текста с цветом его контейнера, а обходит DOM-дерево, учитывая прозрачность промежуточных слоев, чтобы найти элемент, который реально формирует фон.
3. Комплексное обнаружение техник скрытия: Патент описывает методы борьбы со всеми основными спам-техниками скрытия: совпадение цветов (включая близкие оттенки), маленький размер, позиционирование за экраном, использование CSS-свойств видимости и наложение слоев (Z-index).
4. Обнаружение переопределения стилей тегов: Система специально отслеживает случаи, когда стандартное поведение семантических HTML-тегов (например, заголовков <h2>) переопределяется через CSS для скрытия контента (например, установка размера шрифта 1px).
5. Обработка исключений и динамического контента: Система предусматривает исключения для легитимных случаев (например, трекинговые пиксели) и может отслеживать изменения в DOM, вызванные JavaScript.
6. Последствия для скрытого контента: Контент, идентифицированный как скрытый с целью манипуляции, может быть проигнорирован при индексации и ранжировании документа.

Best practices (это мы делаем)

• Обеспечение видимости и доступности контента: Весь контент, важный для SEO, должен быть четко виден пользователю по умолчанию. Обеспечьте достаточный контраст между текстом и фоном, следуя рекомендациям доступности (WCAG).
• Тестирование рендеринга (Render-and-See SEO): Регулярно проверяйте, как поисковая система рендерит страницу (например, с помощью инструментов Google Search Console). Убедитесь, что важный контент не скрывается непреднамеренно из-за ошибок в CSS или JavaScript, особенно при адаптивном дизайне.
• Семантическое использование скрытия контента (UX): Допустимо использовать CSS для скрытия элементов в целях улучшения UX (например, меню-гамбургеры, аккордеоны, табы), если контент становится доступным пользователю по клику или другому действию. Убедитесь, что эти элементы реализованы корректно и доступны для рендеринга.
• Семантическая верстка: Используйте HTML-теги по назначению. Избегайте переопределения их стилей с целью сделать их невидимыми, сохраняя при этом их семантическое значение для поисковых систем.

Worst practices (это делать не надо)

Патент напрямую направлен против следующих техник:

• Совпадение цветов: Использование цвета текста, идентичного или очень похожего на цвет фона (например, светло-серый текст на белом фоне).
• Микроскопические шрифты и изображения: Установка размера шрифта 1px или использование ссылок в виде изображений 1x1 пиксель (за исключением подтвержденных трекеров статистики).
• Позиционирование за экраном (Off-screen): Использование CSS для перемещения блоков за пределы видимой области экрана (например, left: -9999px или большие отрицательные отступы).
• Манипуляции со слоями (Z-index): Размещение контента на слое, который затем перекрывается другим видимым слоем (например, изображением).
• Злоупотребление CSS-свойствами видимости: Использование display: none или visibility: hidden для блоков, содержащих SEO-текст, не предназначенный для пользователя.

Стратегическое значение

Этот патент подчеркивает важность интеграции технического SEO и UX/UI. Он подтверждает, что этап рендеринга является критически важным компонентом индексации. Для Google важно не только наличие контента в коде, но и его визуальное представление пользователю. Долгосрочные SEO-стратегии должны фокусироваться на создании качественного, доступного и честного пользовательского опыта, полностью отказываясь от любых попыток обмана поисковых систем через визуальные манипуляции.

Практические примеры

Сценарий 1: Обнаружение скрытого текста с учетом прозрачности

1. Структура страницы: Фон страницы синий. На нем размещено белое изображение. Поверх изображения размещен <div> с прозрачным фоном (transparent). Внутри <div> находится белый текст.
2. Анализ системы (согласно патенту): Система анализирует белый текст. Она движется вверх по DOM. <div> прозрачен и игнорируется при определении фона. Следующий элемент — белое изображение.
3. Результат: Система сравнивает цвет текста (белый) с цветом фона под ним (белое изображение). Цвета совпадают. Текст помечается как скрытый.

Сценарий 2: Обнаружение переопределения стилей заголовков

1. Код страницы: В коде присутствует тег <h2>, содержащий список ключевых слов. В связанном файле CSS для этого <h2> установлен стиль: { font-size: 1px; }.
2. Анализ системы (согласно патенту): Система обнаруживает переопределение стандартного поведения тега <h2> через CSS (Claims 21-23). Она также фиксирует слишком маленький размер шрифта (Claim 10).
3. Результат: Содержимое тега <h2> помечается как скрытое и игнорируется при ранжировании. Сайт может получить сигнал спама.