🎨 CSS-Sichtbarkeit für KI-Crawler

CSS versteckt Inhalte für Menschen — aber nicht unbedingt für Crawler. Hier sind sechs Techniken im Vergleich.

Wichtig: Alle versteckten Inhalte unten sind im HTML-Quellcode vorhanden. Benutze den "Enthüllen"-Button, um zu sehen, was versteckt ist. Ein einfacher Crawler liest den Quelltext und sieht (fast) alles.

1. display: none

Für Nutzer unsichtbar Crawler: im HTML

Das Element wird nicht gerendert und nimmt keinen Platz ein. Es ist aber vollständig im HTML-Quellcode vorhanden.

<div style="display: none">Dieser Text ist versteckt</div>
Versteckter Inhalt (display:none): Dieser Text ist für den Nutzer unsichtbar. Googlebots Rendering-Engine entdeckt ihn, kann ihn aber abwerten. Ein einfacher HTML-Crawler sieht ihn im Quelltext.
SystemSieht den Inhalt?
Einfacher HTML-Crawler / LLM-TrainingJa (Quelltext)
Googlebot (mit Rendering)Ja, aber abgewertet
Normaler NutzerNein

2. visibility: hidden

Für Nutzer unsichtbar Crawler: im HTML

Das Element bleibt im Layout vorhanden (belegt Platz), ist aber transparent. Im HTML-Quellcode vollständig sichtbar.

<div style="visibility: hidden">Dieser Text ist unsichtbar</div>
Versteckter Inhalt (visibility:hidden): Das Element nimmt Platz ein, ist aber transparent gerendert. Der Leerraum oben ist dieser Inhalt. Im Quelltext für alle Crawler lesbar.

(Der Leerraum über diesem Text ist der versteckte Inhalt — er nimmt Platz ein)

SystemSieht den Inhalt?
Einfacher HTML-Crawler / LLM-TrainingJa (Quelltext)
Googlebot (mit Rendering)Ja, aber abgewertet
Normaler NutzerNein

3. opacity: 0

Für Nutzer unsichtbar Crawler: im HTML

Vollständig transparent, aber interaktiv (Links, Buttons bleiben klickbar). Belegt Platz. Im Quellcode vorhanden.

<div style="opacity: 0">Transparenter Text</div>
Versteckter Inhalt (opacity:0): Dieser Text ist vollständig transparent. Anders als visibility:hidden bleiben klickbare Elemente aktiv — ein Sicherheitsrisiko (Clickjacking). Crawler lesen ihn im Quelltext.

4. Off-Screen-Positionierung

Für Nutzer unsichtbar Crawler: im HTML

Klassische Screenreader-Technik: Element wird weit außerhalb des Sichtbereichs positioniert (left: -9999px). Legitim für Barrierefreiheit.

<div style="position:absolute; left:-9999px; width:1px; height:1px">...</div>
Versteckter Inhalt (off-screen): Diese Technik wird häufig für Screenreader-Text verwendet. Sie ist für Suchmaschinen akzeptabel, wenn sie für Accessibility-Zwecke eingesetzt wird — nicht zum Keyword-Stuffing.
Legitimer Anwendungsfall: .sr-only (Screenreader-only) Klassen für Barrierefreiheit. Missbrauch für SEO wird von Google erkannt.

5. height: 0; overflow: hidden

Für Nutzer unsichtbar Crawler: im HTML

Typisch für Akkordeons und Dropdowns: Das Element hat keine Höhe, der Inhalt wird abgeschnitten. Häufig per CSS-Transition für Animationen genutzt.

<div style="height: 0; overflow: hidden; transition: height .3s">...</div>
Versteckter Inhalt (height:0): Akkordeon-Muster. Googlebot kann diesen Inhalt nach dem Rendern erfassen. Studien zeigen: In ausgeklappten Akkordeons indexierter Inhalt wird ähnlich bewertet wie sichtbarer Inhalt — sofern das Accordion für die UX sinnvoll ist.

6. Unsichtbarer Text (Farbe = Hintergrund)

Für Nutzer unsichtbar Crawler: Spam-Signal

Klassische Black-Hat-SEO-Technik: Text in der gleichen Farbe wie der Hintergrund. Wird von Google aktiv als Spam erkannt und bestraft.

<div style="color: white; background: white">Versteckter Spam-Text</div>
Versteckter Inhalt (weißer Text): Diese alte Spam-Technik wird von modernen Crawlern zuverlässig erkannt. Google vergleicht CSS-Rendering mit dem Quelltext und erkennt, wenn Text absichtlich unsichtbar gemacht wurde.
Warnung: Diese Technik verstößt gegen Googles Webmaster-Richtlinien und führt zu manuellem oder algorithmischem Penalty.

Zusammenfassung: CSS-Hiding & KI

Technik Im HTML? Google-Bewertung LLM-Training
display: none Ja Abgewertet Meist sichtbar
visibility: hidden Ja Abgewertet Meist sichtbar
opacity: 0 Ja Abgewertet Meist sichtbar
Off-Screen Ja Akzeptiert (Accessibility) Meist sichtbar
height: 0 (Akkordeon) Ja Akzeptiert (UX) Meist sichtbar
Unsichtbarer Text Ja Penalty Sichtbar
Kernaussage: CSS versteckt Inhalte nur visuell. Im HTML-Quelltext — und damit für die meisten Crawler — sind diese Inhalte vollständig vorhanden. CSS-Hiding ist kein Werkzeug zum Verbergen von Inhalten vor KI-Systemen.