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

Описание

Какую задачу решает

Патент решает задачу обнаружения манипулятивных SEO-техник, при которых вебмастера скрывают текст или ссылки от пользователей, но оставляют их доступными для поисковых роботов с целью повышения рейтинга. Система устраняет уязвимость перед такими методами, как: использование цвета текста, совпадающего с цветом фона; использование микрошрифтов или изображений 1×1 пиксель; позиционирование контента за пределами видимой области экрана (off-screen) с помощью CSS; скрытие контента под другими слоями (Z-ordering); использование JavaScript для динамического скрытия контента.

Что запатентовано

Запатентована система для автоматического определения видимости элементов в документе. Суть изобретения заключается в анализе документа путем создания его структурного представления (например, DOM – Document Object Model) и последующего анализа взаимосвязей и свойств (цвет, размер, позиция, видимость) этих элементов в том виде, в котором они будут отрендерены пользователю.

Как это работает

Система работает путем анализа рендеринга документа:

• Структурное представление: Документ (HTML, CSS, JS) обрабатывается для создания древовидной структуры (DOM), отражающей иерархию и свойства всех элементов.
• Анализ свойств: Система проверяет элементы на наличие подозрительных свойств: слишком маленький размер, позиционирование за пределами экрана (X, Y координаты), CSS-свойства невидимости и наложение слоев (Z-index).
• Анализ цвета: Система выполняет обход дерева. Начиная с анализируемого элемента (например, текста), она движется вверх по иерархии, чтобы найти ближайший родительский элемент, формирующий фон. Система учитывает и пропускает прозрачные промежуточные слои.
• Сравнение: Если цвет элемента совпадает или очень похож (в пределах заданного диапазона) на цвет фона, элемент помечается как скрытый.

Актуальность для SEO

Высокая. Описанные методы являются фундаментальными для работы современных систем рендеринга поисковых систем (например, Google Web Rendering Service — WRS). Хотя патент не новый (он является продолжением заявки 2003 года), борьба со спамом и необходимость анализа отрендеренной страницы остаются критически важными. Участие Мэтта Каттса (Matt Cutts) подчеркивает прямую связь патента с антиспам-системами Google.

Важность для SEO

Патент имеет критическое значение. Он описывает техническую основу того, почему манипулятивные техники скрытия контента неэффективны и опасны. Он подтверждает способность Google анализировать не только исходный HTML-код, но и финальное визуальное представление страницы, включая применение CSS и JavaScript. Это напрямую влияет на техническое SEO, подчеркивая важность корректного рендеринга и доступности контента.

Детальный разбор

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

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 и т.д.).
• Исключения и особые случаи: Патент упоминает исключение для маленьких изображений (1×1 пиксель), используемых для систем статистики и трекинга. Исключение может делаться на основе анализа 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).
• Мультимедиа факторы: Изображения, их размеры (особенно 1×1 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 или использование ссылок в виде изображений 1×1 пиксель (за исключением подтвержденных трекеров статистики).
• Позиционирование за экраном (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> помечается как скрытое и игнорируется при ранжировании. Сайт может получить сигнал спама.

Вопросы и ответы