SEO для Web Components: как индексируют Shadow DOM и Custom Elements

Когда я впервые использовал Shadow DOM для изоляции стилей и логики, то не думал, что это станет головной болью для SEO. Но после того, как страницы моего проекта перестали ранжироваться, пришлось копать глубже. В этой статье я поделюсь опытом, как сделать Shadow DOM и Custom Elements дружелюбными для поисковых роботов.

Почему Shadow DOM это проблема для SEO?

Shadow DOM создает изолированное дерево DOM, которое по умолчанию невидимо для основного документа. Это отлично для инкапсуляции, но катастрофа для краулеров. Раньше YandexBot просто игнорировал содержимое внутри #shadow-root, и ваш контент мог вообще не попасть в индекс.

Пример:

<my-component>  
  #shadow-root  
    <h1>Важный SEO-текст</h1> <!-- Невидим для краулера! -->  
</my-component>

Сейчас поисковые системы стали умнее (например, YandexBot частично рендерит JavaScript), но не все краулеры поддерживают современные стандарты. Яндекс, Bing или DuckDuckGo могут вести себя иначе.

Практика 1: Используйте <slot> для «просвечивающегося» контента

<slot> — это мост между Shadow DOM и светлым DOM. Если поместить контент в слоты, он будет доступен и в основном документе.

Правильный подход:

<!-- Компонент -->  
<template id="my-component">  
  <div>  
    <slot name="seo-content"></slot>  
    <div>...</div> <!-- Остальная логика -->  
  </div>  
</template>  

<!-- Использование -->  
<my-component>  
  <div slot="seo-content">  
    <h1>SEO-заголовок</h1>  
    <p>Ключевые слова и смыслы здесь.</p>  
  </div>  
</my-component>

Плюсы:

• Контент в <slot> отображается в светлом DOM → краулеры его видят.
• Не ломает инкапсуляцию стилей.

Минусы:

• Требует ручного управления контентом.

Практика 2: Динамический рендеринг для старых краулеров

Некоторые боты до сих пор не выполняют JavaScript. Для них нужен полифилл — серверный рендеринг или статическая «заглушка».

Пример с Express.js:

app.use((req, res, next) => {  
  const userAgent = req.headers['user-agent'];  
  const isCrawler = /Googlebot|Bingbot|YandexBot/i.test(userAgent);  

  if (isCrawler) {  
    // Рендерим компонент без Shadow DOM  
    const staticContent = `<h1>SEO-заголовок</h1><p>Статический текст для бота.</p>`;  
    res.send(staticContent);  
  } else {  
    next();  
  }  
});

Важно: Не cloaking! Контент для ботов и пользователей должен быть семантически одинаковым.

Сравнительные тесты

Я провел эксперимент с двумя версиями сайта:

Вывод: даже небольшая задержка из-за полифиллов окупается ростом трафика.

Практика 3: Schema.org в Light DOM

Добавляйте structured data вне Shadow DOM, иначе краулеры их не распознают.

Плохо:

class MyComponent extends HTMLElement {  
  constructor() {  
    super();  
    const shadow = this.attachShadow({ mode: 'open' });  
    shadow.innerHTML = `  
      <script type="application/ld+json">  
        { "@context": "https://schema.org", ... }  
      </script>  
    `;  
  }  
}

Хорошо:

<my-component>  
  <script type="application/ld+json">  
    { "@context": "https://schema.org", ... }  
  </script>  
</my-component>

Кастомные элементы и семантика

Используйте ARIA-роли и стандартные теги внутри компонентов, чтобы роботы понимали структуру.

Пример:

<template id="article-card">  
  <article role="article">  
    <h2><slot name="title"></slot></h2>  
    <slot name="content"></slot>  
  </article>  
</template>

Заключение

• Используйте <slot> для критического контента.
• Добавляйте полифиллы для старых ботов.
• Тестируйте рендеринг регулярно.

Web Components — это будущее веба, но пока нам приходится идти на компромиссы. Следуя этим практикам, я смог поднять трафик на 40% для SPA-проекта.