La nostra navigazione del sito blocca i crawler AI - come risolvere la scoperta dei contenuti?

Jennifer, questo è uno dei problemi più comuni di visibilità AI. Ti spiego la soluzione:

Il problema:

I crawler AI vedono la risposta HTML, non l’HTML renderizzato.

I livelli della soluzione:

Livello 1: Navigazione HTML di base

<!-- Sempre nella risposta HTML -->
<nav>
  <a href="/products">Prodotti</a>
  <a href="/services">Servizi</a>
  <a href="/resources">Risorse</a>
</nav>

Livello 2: Potenziamento JavaScript

// JS aggiunge interattività sopra
enhanceNavigationWithDropdowns();

Questa è una progressive enhancement. La navigazione base funziona senza JS; JS la migliora.

Il principio chiave:

Tutti i link critici devono essere nella risposta HTML iniziale. JavaScript può aggiungere menu a discesa, animazioni ed effetti - ma i link devono essere in HTML.

Differenze di comportamento dei crawler AI da conoscere:

Google vs crawler AI:

Cosa significa:

Se i crawler AI arrivano sulla tua homepage e la navigazione è solo JS, vedono:

<nav id="main-nav">
  <!-- Vuoto finché non gira JS -->
</nav>

Non hanno link da seguire. Il crawling si ferma in homepage.

I dati dei nostri clienti:

Siti con navigazione solo JS:

• Scoperta media pagine da parte dei crawler AI: 8% del totale

Siti con navigazione HTML:

• Scoperta media pagine da parte dei crawler AI: 73% del totale

È una differenza di accessibilità dei contenuti di 9x.

Approcci di implementazione per la navigazione React:

Opzione 1: Rendering lato server (Migliore)

Usa Next.js o simili:

• La navigazione viene renderizzata lato server
• L’HTML include tutti i link
• JS idrata per l’interattività

Opzione 2: Fallback HTML statico

Includi una navigazione base nel template HTML:

<nav class="fallback-nav">
  <!-- Link base per i crawler -->
</nav>
<nav class="enhanced-nav" style="display:none">
  <!-- Mega menu renderizzato JS -->
</nav>

JS mostra la versione avanzata e nasconde il fallback.

Opzione 3: Include lato server

Includi la navigazione dal server prima che React venga caricato:

• SSI o edge include
• Funziona con ogni framework
• Nessuna modifica a React necessaria

La nostra raccomandazione:

Opzione 1 (SSR) è la migliore a lungo termine. Opzione 2 è la più rapida da implementare. Opzione 3 funziona per sistemi legacy.

Non trascurare i breadcrumbs per il crawling AI:

Perché i breadcrumbs sono importanti:

1. Segnalano gerarchia esplicita - L’AI comprende le relazioni tra pagine
2. Percorsi di crawling aggiuntivi - Ogni breadcrumb è un link
3. Compatibilità schema markup - Lo schema BreadcrumbList aiuta l’AI a interpretare
4. Rinforzo delle categorie - Link alle pagine genitore

Implementazione:

<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">Prodotti</span></a>
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Nome Prodotto</span>
    </li>
  </ol>
</nav>

Risultati dopo aver aggiunto breadcrumbs:

• Un cliente ha aggiunto breadcrumbs a 2.000 pagine profonde
• Scoperta da parte dei crawler AI di quelle pagine: 12% → 67%
• Tempo di implementazione: 2 giorni

Strategia di collegamento interno per la scoperta AI:

Il problema con la sola navigazione:

Anche una buona navigazione non aiuta le pagine orfane. Le pagine necessitano di:

1. Link di navigazione (scoperte)
2. Link interni da contenuti correlati (rinforzate)
3. Inclusione nella sitemap (backup)

Audit dei link interni:

Trovare pagine orfane:

# Fai crawling del sito, individua pagine senza link interni
screaming-frog tuo-sito.com --output orphans.csv

Vittoria rapida:

Aggiungi sezioni “Articoli correlati” ai post del blog. Crea una rete di link interni che i crawler AI seguono.

La struttura degli URL lavora insieme alla navigazione per la comprensione AI:

Buona gerarchia URL:

/products/                     ← Categoria (in nav principale)
/products/software/            ← Sottocategoria (in dropdown)
/products/software/crm/        ← Tipo di prodotto
/products/software/crm/pro/    ← Prodotto specifico

I crawler AI comprendono:

• Relazioni genitore-figlio
• Cluster tematici
• Organizzazione del sito

Cattivi pattern URL:

/page?id=12345                 ← Nessun contesto
/products/item-abc123          ← Nessuna gerarchia
/p/s/c/pro                     ← Abbreviazioni poco chiare

Problema con la navigazione a faccette:

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

Questo crea combinazioni infinite di URL. I crawler AI sprecano risorse a esplorare varianti di parametri.

Soluzione: Usa robots.txt per bloccare gli URL con parametri, oppure usa i frammenti invece dei parametri.

Le pagine di categoria come hub di navigazione:

L’errore:

La maggior parte delle pagine di categoria sono corridoi vuoti:

• Solo link alle pagine figlie
• Nessun contenuto proprio
• Opportunità sprecata

L’opportunità:

Rendi le pagine di categoria ricchi hub:

• Contenuto introduttivo che spiega la categoria
• Elementi in evidenza o popolari
• Sezioni FAQ
• Informazioni su esperti collaboratori
• Link interni a categorie correlate

Perché è importante per l’AI:

I crawler AI vedono una pagina di categoria ricca → Capiscono la tua competenza → Più probabilità che citino i tuoi contenuti

La nostra trasformazione:

Prima: Pagina di categoria con 50 link a prodotti, nessun contenuto Dopo: Pagina di categoria con 500 parole di introduzione, FAQ, prodotti in evidenza, note di esperti

Risultato:

• Tempo dei crawler AI sulla pagina: 2 secondi → 45 secondi
• Citazioni AI dalla categoria: 0 → 12 al mese

Questo thread mi ha dato un piano d’azione completo. Ecco la nostra soluzione:

Fase 1: Vittorie rapide (Questa settimana)

1. Aggiungi una navigazione HTML fallback lato server

   • I 30 link più importanti in HTML
   • Il mega-menu JavaScript funziona ancora per gli utenti

2. Implementa breadcrumbs su tutto il sito

   • Markup schema BreadcrumbList
   • Link a tutte le categorie genitore

3. Risolvi le pagine orfane

   • Identifica le pagine senza link interni
   • Aggiungi alle pagine di categoria rilevanti

Fase 2: Miglioramenti architetturali (Prossimo mese)

1. Migra a Next.js per SSR corretto
2. Ridisegna la struttura degli URL per chiarezza
3. Arricchisci le pagine di categoria con contenuti

Fase 3: Monitoraggio (Continuo)

1. Traccia i pattern di accesso dei crawler AI
2. Monitora quali pagine vengono scoperte
3. Usa Am I Cited per tracciare le modifiche nelle citazioni

Metriche chiave da monitorare:

L’intuizione chiave:

La navigazione non riguarda più solo l’UX. È fondamentale che i crawler AI possano scoprire e comprendere l’intero sito. Il progressive enhancement è la risposta: base HTML per i crawler, JavaScript per un’esperienza utente avanzata.

Grazie a tutti per i consigli pratici.