Risolvere i problemi di JavaScript relativi alla Ricerca

Questa guida ti aiuta a identificare e risolvere i problemi di JavaScript che potrebbero impedire di visualizzare la tua pagina o contenuti specifici sulle pagine con JavaScript nella Ricerca Google. Anche se Google esegue JavaScript, ci sono alcune differenze e limitazioni di cui devi tenere conto quando progetti le tue pagine e le tue applicazioni, così da adattarle al modo in cui i crawler accedono ai tuoi contenuti e ne eseguono il rendering. La nostra guida ai concetti di base della SEO per JavaScript contiene ulteriori informazioni su come ottimizzare il tuo sito JavaScript per la Ricerca Google.

Googlebot è progettato per essere un buon cittadino del web. La scansione è la sua priorità principale, così come assicurare che non comprometta l'esperienza degli utenti che visitano il sito. Googlebot e il relativo servizio di rendering web (WRS) analizzano e identificano continuamente le risorse che non contribuiscono al contenuto essenziale della pagina e potrebbero non recuperare queste risorse. Ad esempio, le richieste di segnalazione e di errore che non contribuiscono al contenuto essenziale della pagina e altri tipi simili di richieste non sono utilizzate o non sono necessarie per estrarre il contenuto essenziale della pagina. L'analisi lato client potrebbe non fornire una rappresentazione completa o accurata dell'attività di Googlebot e WRS sul tuo sito. Utilizza Search Console per monitorare l'attività e i feedback di Googlebot e WRS sul tuo sito.

Se sospetti che problemi di JavaScript possano impedire di visualizzare la tua pagina o contenuti specifici sulle pagine con JavaScript nella Ricerca Google, segui questi passaggi: Se non hai la certezza che JavaScript sia la causa principale, segui la nostra guida generale al debug per determinare il problema specifico.

1. Per verificare in che modo Google esegue la scansione e il rendering di un URL, utilizza il Test dei risultati avanzati o lo strumento Controllo URL in Search Console. Puoi visualizzare le risorse caricate, l'output e le eccezioni della console JavaScript, il DOM sottoposto a rendering e altre informazioni.

   Facoltativamente, ti consigliamo anche di raccogliere e verificare gli errori JavaScript riscontrati sul tuo sito dagli utenti, incluso Googlebot, per identificare potenziali problemi che potrebbero influire sulla modalità di rendering dei contenuti.

   Ecco un esempio che mostra come registrare gli errori JavaScript che sono registrati nel gestore onerror globale. Tieni presente che alcuni tipi di errori JavaScript, ad esempio un errore di analisi, non possono essere registrati con questo metodo.

   window.addEventListener('error', function(e) {
       var errorText = [
           e.message,
           'URL: ' + e.filename,
           'Line: ' + e.lineno + ', Column: ' + e.colno,
           'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
       ].join('\n');
   
       // Example: log errors as visual output into the host page.
       // Note: you probably don't want to show such errors to users, or
       //       have the errors get indexed by Googlebot; however, it may
       //       be a useful feature while actively debugging the page.
       var DOM_ID = 'rendering-debug-pre';
       if (!document.getElementById(DOM_ID)) {
           var log = document.createElement('pre');
           log.id = DOM_ID;
           log.style.whiteSpace = 'pre-wrap';
           log.textContent = errorText;
           if (!document.body) document.body = document.createElement('body');
           document.body.insertBefore(log, document.body.firstChild);
       } else {
           document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
       }
   
       // Example: log the error to remote service.
       // Note: you can log errors to a remote service, to understand
       //       and monitor the types of errors encountered by regular users,
       //       Googlebot, and other crawlers.
       var client = new XMLHttpRequest();
       client.open('POST', 'https://example.com/logError');
       client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
       client.send(errorText);
   
   });

2. Assicurati di evitare errori soft 404. In un'applicazione a pagina singola (APS) può essere particolarmente difficile. Per impedire l'indicizzazione delle pagine di errore, puoi usare una delle seguenti strategie o entrambe:
   • Reindirizza a un URL per cui il server risponde con un codice di stato 404.

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          // redirect to page that gives a 404
          window.location.href = '/not-found';
        }
      });

   • Aggiungi o modifica il meta tag robots su noindex.

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          const metaRobots = document.createElement('meta');
          metaRobots.name = 'robots';
          metaRobots.content = 'noindex';
          document.head.appendChild(metaRobots);
        }
      });

   Quando un'APS utilizza codice JavaScript lato client per gestire gli errori, spesso segnala un codice di stato HTTP 200 anziché il codice di stato appropriato. Questo può portare all'indicizzazione delle pagine di errore e alla relativa visualizzazione nei risultati di ricerca.

3. Aspettati che Googlebot rifiuti le richieste di autorizzazione dell'utente.
   Le funzionalità che richiedono l'autorizzazione dell'utente non hanno senso per Googlebot o per tutti gli utenti. Ad esempio, se rendi obbligatorio Camera API, Googlebot non può fornirti una fotocamera. Invece, fornisci un modo con cui gli utenti possano accedere ai tuoi contenuti senza essere costretti a consentire l'accesso alla fotocamera.
4. Non utilizzare URL con frammenti per caricare contenuti diversi.
   Un'APS può utilizzare URL con frammenti (ad esempio https://example.com/#/products) per caricare diverse visualizzazioni. Lo schema di scansione AJAX è stato ritirato dal 2015, quindi non è certo che gli URL con frammenti funzionino con Googlebot. Ti consigliamo quindi di utilizzare History API per caricare contenuti diversi in base all'URL di un'APS.
5. Non fare affidamento sulla persistenza dei dati per pubblicare i contenuti.
   WRS carica ogni URL (fai riferimento alla sezione Come funziona la Ricerca Google per una panoramica su come Google rileva i contenuti) seguendo i reindirizzamenti del server e del client, come un normale browser. Tuttavia, WRS non mantiene lo stato tra un caricamento di pagina e l'altro:
   • I dati di archiviazione di sessione e di archiviazione locale vengono cancellati tra un caricamento e l'altro.
   • I cookie HTTP vengono cancellati tra un caricamento pagina e l'altro.
6. Utilizza il fingerprinting dei contenuti per evitare problemi di memorizzazione nella cache con Googlebot.
   Googlebot memorizza i contenuti nella cache in modo massiccio per ridurre le richieste di rete e l'utilizzo delle risorse. WRS potrebbe ignorare le intestazioni di memorizzazione nella cache. Questo potrebbe portare WRS a utilizzare risorse JavaScript o CSS obsolete. Il fingerprinting dei contenuti consente di evitare questo problema inserendo un'impronta dei contenuti nel nome file, ad esempio main.2bb85551.js. L'impronta dipende dai contenuti del file, quindi gli aggiornamenti generano ogni volta un nome file diverso. Per saperne di più, consulta la guida web.dev sulle strategie di memorizzazione nella cache a lungo termine.
7. Assicurati che l'applicazione utilizzi il rilevamento delle funzionalità per tutte le API critiche di cui ha bisogno e fornisci un comportamento di riserva o polyfill, dove applicabile.
   Alcune funzionalità web potrebbero non essere ancora state adottate da tutti gli user agent e alcuni potrebbero disattivare intenzionalmente determinate funzionalità. Ad esempio, se utilizzi WebGL per il rendering di effetti fotografici nel browser, il rilevamento delle funzionalità mostra che Googlebot non supporta WebGL. Per risolvere questo problema, puoi saltare l'effetto fotografico o decidere di utilizzare il rendering lato server per eseguire il pre-rendering degli effetti fotografici, il che rende i tuoi contenuti accessibili a tutti, incluso Googlebot.
8. Assicurati che i tuoi contenuti funzionino con le connessioni HTTP.
   Googlebot utilizza le richieste HTTP per recuperare i contenuti dal tuo server. Non supporta altri tipi di connessioni, ad esempio WebSockets o WebRTC. Per evitare problemi con queste connessioni, assicurati di fornire un elemento HTTP di riserva per recuperare i contenuti e di usare soluzioni efficaci di gestione degli errori e di rilevamento delle funzionalità.
9. Assicurati che i componenti web vengano visualizzati come previsto. Utilizza il Test dei risultati avanzati o lo strumento Controllo URL per verificare che l'HTML sottoposto a rendering includa tutti i contenuti previsti.
   WRS riunisce light DOM e shadow DOM. Se i componenti web che utilizzi non impiegano il meccanismo <slot> per i contenuti light DOM, consulta la documentazione del componente web per ulteriori informazioni in proposito o usa un altro componente web. Per saperne di più, consulta le best practice relative ai componenti web.
10. Dopo aver corretto gli elementi in questo elenco di controllo, verifica nuovamente la pagina con il Test dei risultati avanzati o con lo strumento Controllo URL di Search Console.

    Se il problema è stato risolto, viene visualizzato un segno di spunta verde e non viene segnalato alcun errore. Se continui a riscontrare errori, pubblica un post nel gruppo JavaScript Sites in Search Working Group.