SEO Considerations

FanID gated content is designed to be fully indexable by search engines while being visually hidden from unauthenticated browser users.

How it works

1. Content is in the DOM. Gated content is normal HTML in the document. It is not removed, replaced, or loaded dynamically via JavaScript.
2. Gating is CSS-only. The visual obstruction (filter: blur(), overlays) is applied via CSS. Search engines do not interpret CSS filters or visual rendering.
3. No display: none. The content is never hidden with display: none or visibility: hidden, which could cause Google to deprioritize it.
4. Regular DOM structure. The overlay is injected as regular DOM elements alongside your content. Search engine crawlers see the original content directly in the HTML — no Shadow DOM or slot projection involved.

Verification

Google Search Console

1. Use the URL Inspection Tool to check a page with gated content
2. View the rendered HTML — your gated content should appear in full
3. Check the "Live Test" to see how Googlebot renders the page

Manual check

View the page source (Ctrl+U / Cmd+U) — all gated content is visible in the raw HTML. This is what search engines see.

Disable JavaScript

Load the page with JavaScript disabled (browser DevTools > Settings > Disable JavaScript). Gated content is fully visible because the gating overlay requires JavaScript to apply.

FOUC prevention

The recommended FOUC prevention style uses visibility: hidden on undefined custom elements:

<style>
  wmt-fanid-protected:not(:defined) {
    visibility: hidden;
  }
</style>

This is safe for SEO because:

• The :not(:defined) selector only matches before the Custom Element is registered (milliseconds)
• Once JavaScript loads, the element is defined and the selector no longer matches
• Google renders pages with JavaScript, so it sees the defined state

Structured data

Gated content does not interfere with structured data (JSON-LD, microdata). Place structured data as you normally would — it is not affected by the visual gating layer.