Artikel

Web Components og SEO — Custom elements og søgesynlighed

Web Components er native browser-komponenter med Shadow DOM. Google renderer Web Components men med begrænsninger — primært fordi Shadow DOM-indhold kan være utilgængeligt for crawlere.

Sidst opdateret:

Web Components er native browser-standarder der muliggør genanvendelige UI-komponenter bestående af Custom Elements (egne HTML-tags), Shadow DOM (indkapslet DOM-struktur) og HTML Templates — uden afhængighed af JavaScript-frameworks. For SEO udgør Shadow DOM den primære kompleksitet: indhold i lukket Shadow DOM er ikke indekserbart af Googlebot, og navigationslinks der udelukkende er JavaScript-drevet frem for standard <a href> tags er ikke-crawlbare.

Shadow DOM og indeksering

Shadow DOM er det element af Web Components der skaber størst SEO-kompleksitet. Shadow DOM kapsler et komponents interne DOM-struktur — stilarter og indhold er isoleret fra det omgivende dokument.

Google renderer og indekserer open Shadow DOM ({ mode: 'open' }). Closed Shadow DOM ({ mode: 'closed' }) er ikke tilgængeligt for Googlebot. Brug open mode for SEO-kritisk indhold.

Et hyppigt SEO-problem: links og navigation implementeret som Custom Elements der bruger JavaScript-event-listeners frem for standard <a href> tags. Googlebot følger ikke JavaScript-events — kun standard <a href> links.

Forkert:

customElements.define('nav-link', class extends HTMLElement {
  connectedCallback() {
    this.addEventListener('click', () => navigate(this.getAttribute('href')));
  }
});

Korrekt: Brug standard <a href> tags inden i Web Components:

<template id="nav-link-template">
  <a href=""><slot></slot></a>
</template>

Structured data og Web Components

Structured data (JSON-LD script-tags) fungerer normalt uanset Web Components — JSON-LD placeres i <head> eller <body> som script-element, ikke i Shadow DOM. Brug altid JSON-LD frem for Microdata i Web Component-sammenhæng.

Test med URL Inspection

Test enhver Web Component-tung side med GSC URL Inspection → Test Live URL → View HTML for at verificere præcist hvad Googlebot indekserer. → Denne artikel er en del af JavaScript og rendering — Scripts, DOM og CSR vs SSR.

Del af: JavaScript og rendering — Scripts, DOM og CSR vs SSR →

Andre artikler i samme emne

Relaterede begreber

Emne JavaScript og rendering — Scripts, DOM og CSR vs SSR JavaScript er SEOs største rendering-udfordring — forstå CSR vs SSR, DOM, lazy loading og hvad Googlebot faktisk ser. Artikel JavaScript og crawling — Hvad Googlebot ser og ikke ser Googlebot renderer JavaScript, men rendering sker i en separat wave og med forsinkelse. Indhold der kun eksisterer i JavaScript kan indekseres — men er det garanteret. Artikel JavaScript-debugging til SEO — Find rendering-problemer JavaScript-SEO-debugging kræver specialiserede værktøjer: GSC's URL-inspektion, Screaming Frog med JavaScript-rendering og Googles Rich Results Test er udgangspunktet. Artikel Hydration — SSR og client-side JavaScript kombineret Hydration er JSs overtagelse af en SSR-renderet side. Det giver interaktivitet uden at ofre SEO — men kan forårsage INP-problemer og TBT ved tung JavaScript-indlæsning. Emne Structured data — Schema markup og JSON-LD Structured data er kode der giver Google kontekst om dit indhold — og kan udløse rich results i SERP.

Ofte stillede spørgsmål

Kan Googlebot indexere indhold i Shadow DOM?
Delvist. Google har bekræftet at Googlebot kan indexere open Shadow DOM ('mode: open'). Closed Shadow DOM ('mode: closed') er ikke indekseret. I praksis er der dog usikkerhed — test altid specifik Shadow DOM-implementering med URL Inspection Tool i GSC for at verificere hvad der faktisk indekseres.
Hvad er de vigtigste SEO-risici ved Web Components?
1) Navigationslinks implementeret som Web Components uden standard <a href> tags — ikke crawlable. 2) Primært indhold i closed Shadow DOM — ikke indekserbart. 3) Web Components der kræver JavaScript-eksekvering for at rendere — samme risici som CSR-React. 4) Lazy-loaded Web Components der loader indhold asynkront uden fallback.
Hvad er forskellen på open og closed Shadow DOM for SEO?
Shadow DOM mode bestemmer om det interne DOM-træ er tilgængeligt udefra. Open mode (mode: 'open') giver JavaScript-adgang til Shadow DOM via element.shadowRoot — og Googlebot bekræfter at det kan indeksere open Shadow DOM. Closed mode (mode: 'closed') afskærer al ekstern adgang inklusiv Googlebots renderer. Brug altid open mode for SEO-kritisk indhold — og test med URL Inspection Tool at indholdet faktisk indekseres.
Kan man bruge structured data (JSON-LD) med Web Components?
Ja — JSON-LD fungerer uafhængigt af Web Components og Shadow DOM fordi script-blokke placeres i <head> eller direkte i <body>, ikke i Shadow DOM. JSON-LD er den anbefalede structured data-metode for alle Web Component-baserede sider. Undgå Microdata i Web Component-sammenhæng — itemprop og itemscope attributter i Shadow DOM kan ikke læses af Googlebot.
Hvad er det bedste testværktøj til at verificere Web Component-indeksering?
Google Search Console's URL Inspection Tool er det primære testværktøj: klik på 'Test live URL' og inspicér 'More info → HTML'-visningen for at se præcist hvad Googlebot renderer og ser. Det er den eneste metode der validerer Googlebots faktiske rendering — ikke browseren. Kombiner med mobiltest i Chrome DevTools for at identificere JavaScript-afhængigheder i Web Components.

Placering i ordbogen

Kode — Webkode og teknisk SEO
JavaScript og rendering — Scripts, DOM og CSR vs SSR
Web Components og SEO — Custom elements og søgesynlighed