Veri tag anchor vs link solo JavaScript: perché Google ha bisogno di

Un proprietario di un negozio Shopify ha installato un’app mega-menu premium l’anno scorso. L’app aveva ottime recensioni, animazioni bellissime e un’interfaccia pulita. Le vendite sono rimaste piatte. Tre mesi dopo, Google Search Console ha mostrato un calo del 40% nelle pagine scansionate. Il problema non era il design del menu — era che i link del menu esistevano solo in JavaScript. Il crawler di Google ha visto una homepage senza link alle pagine di categoria. Le categorie erano orfane.

Questo è l’errore di SEO della navigazione più comune che vedo: un menu che sembra perfetto agli utenti ma è invisibile ai motori di ricerca. La soluzione non è complessa, ma richiede di comprendere la differenza tra veri link HTML e pattern di navigazione solo JavaScript — e sapere come controllare il tuo sito per individuare il problema prima che ti costi traffico.

Quello che il crawler di Google vede effettivamente

Quando Google scansiona una pagina, effettua una richiesta HTTP al tuo server e riceve HTML in risposta. Il crawler analizza quell’HTML cercando link — specificamente, tag <a> con attributi href. Ogni URL che trova viene aggiunto alla coda di scansione.

Questo è il primo passaggio. Il crawler di Google può eseguire JavaScript (usa una versione di Chrome sotto il cofano), ma il rendering JavaScript avviene dopo, in un secondo passaggio, e non è garantito per ogni pagina. Google dà priorità al primo scansione HTML perché è veloce e affidabile. Le pagine che dipendono interamente da JavaScript per la navigazione sono svantaggiate.

Ecco cosa cerca Google:

<a href="/collections/summer-shoes">Summer Shoes</a>

Questo è un vero link. L’attributo href contiene un URL. Il crawler di Google estrae /collections/summer-shoes e lo aggiunge alla coda di scansione. Questa pagina verrà scansionata e indicizzata.

Ecco cosa Google ignora o perde durante il primo passaggio:

<div onclick="window.location='/collections/summer-shoes'">Summer Shoes</div>
<a href="javascript:void(0)" onclick="navigate('/collections/summer-shoes')">Summer Shoes</a>
<button data-url="/collections/summer-shoes">Summer Shoes</button>

Nessuno di questi sono tag anchor con veri attributi href. Gli URL esistono nel codice (negli handler onclick o negli attributi data), ma il crawler del primo passaggio di Google non esegue JavaScript o analizza gli attributi data durante la scoperta dei link. Questi link sono invisibili durante la scansione iniziale.

Google potrebbe eventualmente scoprire queste pagine attraverso altri mezzi (sitemap, backlink esterni, rendering JavaScript), ma non otterranno la priorità di scansione o l’equità di link che viene dal fatto di essere collegate nella navigazione HTML principale.

Visualizza sorgente: il test definitivo

Non hai bisogno di strumenti speciali per verificare se la tua navigazione è scansionabile. Ogni browser ha una funzione “Visualizza sorgente” che mostra l’HTML grezzo inviato dal server prima che qualsiasi JavaScript funzioni. Questo è esattamente quello che il crawler del primo passaggio di Google vede.

Come controllare

1. Apri la homepage del tuo negozio in Chrome, Firefox o Safari.
2. Fai clic con il tasto destro in qualsiasi punto della pagina e seleziona “Visualizza sorgente pagina” (o premi Ctrl+U su Windows, Cmd+Opzione+U su Mac).
3. Una nuova scheda si apre mostrando l’HTML grezzo.
4. Premi Ctrl+F (Cmd+F su Mac) e cerca l’URL di una delle tue pagine di categoria principali — ad esempio, /collections/women.

Se trovi l’URL all’interno di un tag anchor come questo:

<a href="/collections/women">Women's Clothing</a>

La tua navigazione è scansionabile. Google può seguire quel link.

Se l’URL non appare in Visualizza sorgente affatto, o se appare solo in un tag <script> o un attributo data come questo:

<div class="menu-item" data-url="/collections/women">Women's Clothing</div>

La tua navigazione non è scansionabile nel primo passaggio. La scansione HTML iniziale di Google la perderà.

Mobile vs desktop

Molti negozi utilizzano diverse implementazioni di navigazione per mobile e desktop. La versione desktop potrebbe utilizzare tag anchor HTML semantici mentre la versione mobile utilizza menu hamburger solo JavaScript. Poiché Google utilizza l’indicizzazione mobile-first (la versione mobile è la versione primaria che Google scansiona), devi controllare l’HTML mobile separatamente.

In Chrome:

1. Apri DevTools (F12 o fai clic con il tasto destro → Ispeziona).
2. Fai clic sull’icona della barra degli strumenti del dispositivo (o premi Ctrl+Maiusc+M / Cmd+Maiusc+M).
3. Seleziona un dispositivo mobile dal menu a discesa (ad esempio, iPhone SE).
4. Ricarica la pagina.
5. Fai clic con il tasto destro e visualizza di nuovo Sorgente.

Cerca i tuoi URL di categoria nell’HTML mobile. Se non appaiono, il crawler mobile di Google non sta vedendo i tuoi link di navigazione.

Pattern comuni che falliscono il test Visualizza sorgente

Pattern 1: Mega menu generati da JavaScript

Molte app di menu moderni funzionano così:

1. Il server invia HTML minimo — solo un pulsante di attivazione del menu.
2. Quando l’utente passa il mouse o fa clic, JavaScript recupera i dati del menu da un’API o analizza un oggetto JSON.
3. JavaScript costruisce il DOM completo (inclusi tutti i tag <a>) e lo inietta nella pagina.

Esempio di HTML inviato dal server:

<button id="mega-menu-trigger">Shop</button>
<div id="mega-menu-container"></div>
<script>
  const menuData = {
    "women": {"label": "Women", "url": "/collections/women"},
    "men": {"label": "Men", "url": "/collections/men"}
  };
  // JavaScript costruisce e inietta i link quando l'utente interagisce
</script>

Visualizza sorgente mostra il pulsante e il contenitore vuoto. I link non esistono ancora. La scansione del primo passaggio di Google non vede link alle pagine di categoria.

Pattern 2: Routing dell’app a pagina singola

I negozi costruiti con React, Vue o altri framework SPA spesso utilizzano il routing lato client. Il menu potrebbe apparire così nel codice del framework:

<Link to="/collections/summer-shoes">Summer Shoes</Link>

Se questo è scansionabile dipende da come il framework lo renderizza e se l’app utilizza il rendering lato server. Se l’app è un’SPA pure lato client (il server invia una singola shell index.html e JavaScript renderizza tutto), Visualizza sorgente mostra una shell vuota senza link di navigazione:

<!DOCTYPE html>
<html>
<head><title>Store</title></head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

Tutto il contenuto, inclusa la navigazione, viene renderizzato da JavaScript. La scansione del primo passaggio di Google non vede nulla.

Pattern 3: Handler onclick senza href

Alcuni menu utilizzano tag anchor ma inseriscono la logica di navigazione negli handler onclick e utilizzano javascript:void(0) come href:

<a href="javascript:void(0)" onclick="goToCategory('women')">Women</a>

Questo sembra un link agli utenti e si comporta persino come un link quando viene cliccato, ma javascript:void(0) non è un vero URL. Il crawler di Google estrae javascript:void(0) dall’attributo href e lo scarta perché non è un URL scansionabile. La vera destinazione (/collections/women) è nascosta nella funzione JavaScript goToCategory(), che il crawler non esegue durante l’analisi HTML del primo passaggio.

Pattern 4: Div e pulsanti con attributi data

Gli sviluppatori a volte costruiscono la navigazione utilizzando elementi non semantici:

<div class="nav-item" data-url="/collections/women" onclick="navigate(this.dataset.url)">
  Women
</div>

Questo funziona per gli utenti (JavaScript legge l’attributo data e naviga quando viene cliccato), ma non c’è tag <a> e nessun attributo href. Il crawler di Google non cerca URL negli attributi data. Il link è invisibile.

Come riparare i link solo JavaScript

Soluzione 1: Renderizza i link in HTML, migliora con JavaScript

L’approccio migliore: il tuo server (o generatore di siti statici) output HTML completo con veri tag anchor. JavaScript aggiunge interattività in aggiunta.

HTML renderizzato dal server:

<nav>
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
  <a href="/collections/kids">Kids</a>
</nav>

Questo HTML è scansionabile. Google vede i link immediatamente.

Quindi JavaScript lo migliora:

document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    // Aggiungi transizioni fluide, analitiche, ecc.
    // Lascia che il browser navighi normalmente (non preventDefault)
  });
});

La navigazione funziona senza JavaScript (degrado elegante), funziona perfettamente con JavaScript (miglioramento progressivo), ed è scansionabile in entrambi i casi.

Soluzione 2: Usa il rendering lato server per le SPA

Se il tuo negozio è un’app a pagina singola costruita con React, Vue o simile, implementa il rendering lato server (SSR) o la generazione di siti statici (SSG).

Framework che lo rendono facile:

• Next.js per React
• Nuxt per Vue
• SvelteKit per Svelte
• Gatsby per siti statici

Questi framework renderizzano l’HTML completo (inclusa la navigazione) sul server. Il caricamento della pagina iniziale offre HTML completo e scansionabile. Quindi JavaScript idrata la pagina e prende il controllo per la navigazione successiva, offrendoti l’esperienza SPA per gli utenti e HTML scansionabile per i motori di ricerca.

Soluzione 3: Controlla le impostazioni dell’app del menu

Se stai utilizzando un’app di menu Shopify, controlla le impostazioni dell’app per un’opzione “Modalità SEO” o “rendering lato server”. Molte app offrono questo come un’attivazione. Quando abilitato, l’app renderizza i link di navigazione in Liquid (il linguaggio di template lato server di Shopify) invece di JavaScript.

Se la tua app non offre questa opzione e hai confermato (tramite Visualizza sorgente) che la tua navigazione non è scansionabile, considera di passare a un’app che lo faccia. Navi+ AI Menu Builder renderizza tutti i link in HTML per impostazione predefinita — i link sono nel payload HTML iniziale, e JavaScript gestisce solo l’interazione e l’animazione.

Soluzione 4: Miglioramento progressivo per menu hamburger

I menu hamburger mobile spesso nascondono la navigazione fino a quando l’utente non tocca l’icona. Il menu può comunque essere scansionabile finché i link esistono nell’HTML:

<nav class="mobile-menu" aria-hidden="true">
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
</nav>

CSS nasconde il menu per impostazione predefinita:

.mobile-menu {
  display: none;
}
.mobile-menu.is-open {
  display: block;
}

JavaScript attiva la classe quando l’hamburger viene toccato:

hamburgerButton.addEventListener('click', () => {
  mobileMenu.classList.toggle('is-open');
});

I link esistono nell’HTML (Visualizza sorgente li mostra), quindi Google può scansionarli anche se sono nascosti da CSS. Questo va bene — Google non penalizza i contenuti nascosti finché non sono ingannevoli (non stai nascondendo spam pieno di parole chiave).

Quello che non funziona: costruire il DOM del menu mobile con JavaScript solo quando l’hamburger viene toccato:

hamburgerButton.addEventListener('click', () => {
  const menu = document.createElement('nav');
  menu.innerHTML = '<a href="/it/collections/women">Women</a>...';
  document.body.appendChild(menu);
});

Questo menu non esiste nell’HTML fino a quando l’utente non interagisce. Il crawler di Google non tocca le icone dell’hamburger. I link sono invisibili.

Test della tua correzione

Dopo aver aggiornato la tua navigazione, verifica che sia ora scansionabile:

1. Test Visualizza sorgente: Ricarica la tua homepage e Visualizza sorgente. Cerca URL di categoria. Conferma che appaiono nei tag anchor.
2. Test con JavaScript disabilitato: In Chrome DevTools, disabilita JavaScript (Impostazioni → Debugger → Disabilita JavaScript). Ricarica la tua homepage. Conferma che i link di navigazione sono visibili e cliccabili. Fare clic su un link dovrebbe navigare alla pagina di categoria (la pagina apparirà rotta senza JavaScript, ma la navigazione dovrebbe funzionare).
3. Google Search Console: Aspetta alcuni giorni, quindi controlla il report Copertura (Pagine → Indicizzate). Se le pagine di categoria precedentemente orfane iniziano a comparire come indicizzate, la tua correzione ha funzionato.

Controlla sia desktop che mobileEsegui il test Visualizza sorgente su entrambe le versioni desktop e mobile del tuo sito. Se la tua navigazione mobile utilizza un'implementazione diversa (menu hamburger, app diversa, struttura semplificata), testala separatamente. L'indicizzazione mobile-first di Google significa che la versione mobile è quella che conta per i ranking.

Perché questo importa più di quanto pensi

La navigazione non è solo uno dei tanti link interni sul tuo sito — è l’insieme più prominente e coerente di link che Google vede. La navigazione principale appare su ogni pagina. È nell’intestazione, vicino alla parte superiore del documento HTML, dove Google si aspetta di trovare link importanti. Quando Google scansiona la tua homepage, la navigazione è il primo insieme di link che incontra.

Se questi link non sono scansionabili, Google non solo perde alcune pagine. Perde il segnale primario per comprendere la tua architettura del sito. Le pagine di categoria diventano orfane. I prodotti collegati solo da quelle pagine di categoria diventano orfani un livello più profondo. L’intera struttura del sito crolla dal punto di vista di Google.

E poiché la navigazione è così coerente (stesso menu su ogni pagina), l’impatto si moltiplica. Se la tua navigazione homepage è solo JavaScript, ogni pagina sul tuo sito ha lo stesso problema. Google scansiona 100 pagine e trova zero link di navigazione su tutte le 100 pagine. Non è un problema di SEO minore — è un fallimento di scansionabilità fondamentale.

Il test Visualizza sorgente richiede 30 secondi. Se i tuoi URL di categoria non appaiono nell’HTML grezzo, hai trovato la correzione di SEO più importante che puoi fare. Tutto il resto — ottimizzazione delle parole chiave, backlink, miglioramenti tecnici — si basa sul presupposto che Google possa scansionare le tue pagine. Senza una navigazione scansionabile, quel presupposto è falso.