Unsere Seitennavigation blockiert AI-Crawler – wie kann man die Auffindbarkeit der Inhalte verbessern?

Jennifer, das ist eines der häufigsten Probleme bei AI-Sichtbarkeit. Hier die Lösung im Überblick:

Das Problem:

AI-Crawler sehen Ihre Antwort-HTML, nicht das gerenderte HTML.

Die Lösungsebenen:

Ebene 1: Basis-HTML-Navigation

<!-- Immer in der Antwort-HTML -->
<nav>
  <a href="/products">Products</a>
  <a href="/services">Services</a>
  <a href="/resources">Resources</a>
</nav>

Ebene 2: JavaScript-Erweiterung

// JS ergänzt die Interaktivität
enhanceNavigationWithDropdowns();

Das ist progressive Verbesserung. Die Basisnavigation funktioniert ohne JS; JavaScript macht sie besser.

Das Grundprinzip:

Alle wichtigen Links müssen in der initialen HTML-Antwort enthalten sein. JavaScript kann schicke Dropdowns, Animationen und Hover-Effekte hinzufügen – aber die Links selbst müssen in HTML stehen.

Unterschiede beim Verhalten von AI-Crawlern, die Sie kennen sollten:

Google vs. AI-Crawler:

Was das bedeutet:

Wenn AI-Crawler Ihre Startseite aufrufen und die Navigation ist nur per JS, sehen sie:

<nav id="main-nav">
  <!-- Das ist leer, bis JS läuft -->
</nav>

Sie haben keine Links zum Folgen. Das Crawlen stoppt auf der Startseite.

Unsere Kundendaten:

Seiten mit JS-only-Navigation:

• Durchschnittliche AI-Crawler-Seitenentdeckung: 8 % aller Seiten

Seiten mit HTML-Navigation:

• Durchschnittliche AI-Crawler-Seitenentdeckung: 73 % aller Seiten

Das ist ein 9-facher Unterschied bei der Inhaltszugänglichkeit.

Umsetzungsansätze für React-Navigation:

Option 1: Server-Side Rendering (Am besten)

Verwenden Sie Next.js oder Ähnliches:

• Navigation wird serverseitig gerendert
• HTML enthält alle Links
• JS hydriert für Interaktivität

Option 2: Statisches HTML-Fallback

Basisnavigation ins HTML-Template aufnehmen:

<nav class="fallback-nav">
  <!-- Basislinks für Crawler -->
</nav>
<nav class="enhanced-nav" style="display:none">
  <!-- JS-gerendertes Mega-Menü -->
</nav>

JS blendet die erweiterte Version ein, das Fallback aus.

Option 3: Serverseitige Includes

Navigation vom Server einfügen, bevor React geladen wird:

• SSI oder Edge-Includes
• Funktioniert mit jedem Framework
• Keine Änderungen an React nötig

Unsere Empfehlung:

Option 1 (SSR) ist langfristig am besten. Option 2 ist am schnellsten umsetzbar. Option 3 eignet sich für Legacy-Systeme.

Breadcrumbs nicht vergessen für AI-Crawling:

Warum Breadcrumbs wichtig sind:

1. Explizite Hierarchiesignale – AI erkennt Seitenbeziehungen
2. Zusätzliche Crawl-Pfade – Jeder Breadcrumb ist ein Link
3. Schema-Markup-Kompatibilität – BreadcrumbList-Schema hilft AI bei der Interpretation
4. Kategorie-Verstärkung – Links zurück zu übergeordneten Seiten

Umsetzung:

<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/products"><span itemprop="name">Products</span></a>
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Product Name</span>
    </li>
  </ol>
</nav>

Ergebnisse nach Einführung von Breadcrumbs:

• Ein Kunde fügte Breadcrumbs zu 2.000 tiefen Seiten hinzu
• AI-Crawler-Entdeckung dieser Seiten: 12 % → 67 %
• Zeitaufwand für die Umsetzung: 2 Tage

Interne Verlinkungsstrategie für AI-Entdeckung:

Das Problem bei Navigation-only:

Auch gute Navigation hilft verwaisten Seiten nicht. Seiten brauchen:

1. Navigationslinks (entdeckt)
2. Interne Links aus verwandten Inhalten (verstärkt)
3. Sitemap-Aufnahme (Backup)

Audit interner Verlinkung:

Verwaiste Seiten finden:

# Crawl Ihrer Seite, identifizieren von Seiten ohne interne Links
screaming-frog your-site.com --output orphans.csv

Schneller Gewinn:

“Verwandte Artikel”-Abschnitte zu Blogposts hinzufügen. Schafft internes Linknetzwerk, dem AI-Crawler folgen.

URL-Struktur funktioniert mit Navigation für AI-Verständnis:

Gute URL-Hierarchie:

/products/                     ← Kategorie (in Hauptnavigation)
/products/software/            ← Unterkategorie (im Dropdown)
/products/software/crm/        ← Produkttyp
/products/software/crm/pro/    ← Spezifisches Produkt

AI-Crawler erkennen:

• Über-/Unterordnung
• Themen-Cluster
• Seitenorganisation

Schlechte URL-Muster:

/page?id=12345                 ← Kein Kontext
/products/item-abc123          ← Keine Hierarchie
/p/s/c/pro                     ← Unklare Abkürzungen

Problem bei facettierter Navigation:

/products?color=blue&size=large&price=50-100

Das erzeugt unendliche URL-Kombinationen. AI-Crawler verschwenden Ressourcen beim Crawlen von Parameter-Varianten.

Lösung: Parameter-URLs per robots.txt blockieren oder Fragmente statt Parametern verwenden.

Kategorieseiten als Navigationsknoten:

Der Fehler:

Die meisten Kategorieseiten sind leere Korridore:

• Nur Links zu Unterseiten
• Kein eigener Inhalt
• Verschenktes Potenzial

Die Chance:

Kategorieseiten zu reichhaltigen Hubs machen:

• Einführende Texte zur Kategorie
• Vorgestellte/beliebte Elemente
• FAQ-Bereiche
• Infos zu Expertenbeiträgen
• Interne Links zu verwandten Kategorien

Warum das für AI zählt:

AI-Crawler sehen reichhaltige Kategorieseite → Verstehen Ihre Expertise → Zitieren Ihre Inhalte eher

Unsere Transformation:

Vorher: Kategorieseite mit 50 Produktlinks, ohne Inhalt Nachher: Kategorieseite mit 500-Wörter-Einleitung, FAQ, vorgestellten Produkten, Expertenhinweisen

Ergebnis:

• AI-Crawler-Verweildauer: 2 Sekunden → 45 Sekunden
• AI-Zitate aus Kategorie: 0 → 12 pro Monat

Dieser Thread hat mir einen kompletten Maßnahmenplan geliefert. Unser Ansatz:

Phase 1: Schnelle Erfolge (diese Woche)

1. Serverseitiges HTML-Fallback für Navigation hinzufügen

   • Die 30 wichtigsten Links im HTML
   • JavaScript-Mega-Menü bleibt für Nutzer erhalten

2. Breadcrumbs seitenweit implementieren

   • BreadcrumbList-Schema-Markup
   • Links zu allen übergeordneten Kategorien

3. Verwaiste Seiten beheben

   • Seiten ohne interne Links identifizieren
   • In relevante Kategorieseiten aufnehmen

Phase 2: Architektur-Verbesserungen (nächster Monat)

1. Umstieg auf Next.js für echtes SSR
2. URL-Struktur für bessere Klarheit überarbeiten
3. Kategorieseiten mit Inhalten anreichern

Phase 3: Monitoring (laufend)

1. Zugriffsmuster von AI-Crawlern verfolgen
2. Beobachten, welche Seiten entdeckt werden
3. Mit Am I Cited die Zitierungsänderungen verfolgen

Wichtige Kennzahlen:

Der zentrale Punkt:

Navigation ist nicht mehr nur UX. Sie muss sicherstellen, dass AI-Crawler Ihre gesamte Site entdecken und verstehen können. Progressive Verbesserung ist der Schlüssel – Basis-HTML für Crawler, JavaScript für bessere Nutzererfahrung.

Danke an alle für die praxisnahen Tipps.