Concetti di base della SEO per JavaScript

JavaScript è una parte importante della piattaforma web perché offre molte funzionalità che trasformano il Web in una potente piattaforma applicativa. Rendere le tue applicazioni web basate su JavaScript rilevabili tramite la Ricerca Google può aiutarti a trovare nuovi utenti e a rinnovare il coinvolgimento degli utenti esistenti, quando cercano i contenuti offerti dalle tue app web. Anche se la Ricerca Google esegue JavaScript con una versione sempre valida di Chromium, puoi comunque ottimizzare alcuni elementi.

Questa guida descrive il modo in cui la Ricerca Google elabora JavaScript e le best practice per migliorare le app web JavaScript per la Ricerca Google.

Elaborazione di JavaScript da parte di Googlebot

Googlebot elabora le app web JavaScript in tre fasi principali:

  1. Scansione
  2. Rendering
  3. Indicizzazione

Googlebot esegue la scansione e il rendering di una pagina, quindi la indicizza.

Googlebot sottopone a scansione un URL dalla coda di scansione e lo trasferisce alla fase di elaborazione. Nella fase di elaborazione i link vengono estratti e tornano nella coda di scansione e la pagina viene inserita in coda per il rendering. La pagina passa dalla coda di rendering al renderer, che ritrasferisce il codice HTML sottoposto a rendering alla fase di elaborazione,
      dove i contenuti vengono indicizzati e i link estratti per inserirli nella coda di scansione.

Quando Googlebot recupera un URL dalla coda di scansione tramite una richiesta HTTP, controlla innanzitutto se la scansione sia consentita leggendo il file robots.txt. Se nel file la scansione dell'URL è contrassegnata come non consentita, Googlebot non esegue né la richiesta HTTP per questo URL né la scansione dell'URL.

Googlebot analizza quindi la risposta per altri URL nell'attributo href dei link HTML e aggiunge gli URL alla coda di scansione. Per impedire il rilevamento dei link, utilizza il meccanismo nofollow.

La scansione di un URL e l'analisi della risposta HTML funzionano bene per siti web classici o per pagine con rendering lato server, in cui l'HTML nella risposta HTTP include tutti i contenuti. Alcuni siti JavaScript potrebbero utilizzare il modello shell dell'app, in cui il codice HTML iniziale non include i contenuti effettivi e porta pertanto Googlebot a eseguire JavaScript prima di riuscire a vedere i contenuti effettivi della pagina generati da JavaScript.

Googlebot inserisce tutte le pagine nella coda di rendering, a meno che un meta tag o un'intestazione robots non indichi a Googlebot di non indicizzare una determinata pagina. La pagina potrebbe rimanere in questa coda per alcuni secondi o per un periodo più lungo. Quando le risorse di Googlebot lo consentono, un Chromium headless esegue il rendering della pagina ed esegue il codice JavaScript. Googlebot analizza di nuovo i link delll'HTML di cui è stato eseguito il rendering e aggiunge gli URL individuati alla coda di scansione. Googlebot utilizza inoltre l'HTML di cui è stato eseguito il rendering per indicizzare la pagina.

Tieni presente che il rendering lato server o il pre-rendering sono comunque un'ottima soluzione, perché rendono il tuo sito web più veloce per utenti e crawler e anche perché non tutti i bot possono eseguire JavaScript.

Descrivere la pagina con titoli e snippet univoci

Titoli univoci e descrittivi e meta descrizioni utili aiutano gli utenti a identificare rapidamente il risultato migliore per il loro scopo. Scopri quali caratteristiche rendono efficaci i titoli e le descrizioni nelle nostre linee guida.

Puoi utilizzare JavaScript per impostare o modificare la meta descrizione e il titolo.

Scrivere codice compatibile

I browser offrono molte API e JavaScript è un linguaggio in rapida evoluzione. Googlebot presenta alcune limitazioni relative alle API e alle funzionalità JavaScript che supporta. Per assicurarti che il tuo codice sia compatibile con Googlebot, segui le nostre linee guida per la risoluzione dei problemi relativi a JavaScript.

Utilizzare codici di stato HTTP significativi

Googlebot utilizza i codici di stato HTTP per scoprire se si sono verificati dei problemi durante la scansione della pagina.

Dovresti utilizzare un codice di stato significativo per comunicare a Googlebot se una pagina non deve essere sottoposta a scansione o indicizzazione, ad esempio il codice 404 per una pagina non trovata o il codice 401 per le pagine disponibili previo accesso. Puoi utilizzare i codici di stato HTTP per comunicare a Googlebot se una pagina è stata spostata su un nuovo URL, in modo che l'indice possa essere aggiornato di conseguenza.

Ecco un elenco dei codici di stato HTTP e del loro impiego:

Stato HTTP Quando usarlo
301/302 La pagina è stata spostata su un nuovo URL.
401/403 La pagina non è disponibile a causa di problemi di autorizzazione.
404/410 La pagina non è più disponibile.
5xx Si è verificato un problema lato server.

Evitare gli errori soft 404 nelle app a pagina singola

Nelle app a pagina singola sottoposte a rendering lato client, il routing viene spesso implementato come routing lato client. In questo caso, l'utilizzo di codici di stato HTTP significativi può essere impossibile o poco pratico. Per evitare errori soft 404 quando utilizzi il rendering e il routing lato client, adotta una delle seguenti strategie:

  • Usa un reindirizzamento JavaScript a un URL per cui il server risponde con un codice di stato HTTP 404 (ad esempio /not-found).
  • Aggiungi un elemento <meta name="robots" content="noindex"> alle pagine di errore utilizzando JavaScript.

Di seguito è riportato un codice campione per l'approccio di reindirizzamento:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    window.location.href = '/not-found'; // redirect to 404 page on the server.
  }
})

Di seguito è riportato un codice campione per l'approccio noindex:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Usare l'API History anziché i frammenti

Quando Googlebot cerca i link nelle tue pagine, considera soltanto gli URL nell'attributo href dei link HTML.

Per le applicazioni a pagina singola con routing lato client, usa l'API History per implementare il routing tra diverse visualizzazioni della tua app web. Per assicurarti che Googlebot possa trovare i link, evita di usare i frammenti per caricare contenuti diversi della pagina. L'esempio seguente rappresenta una prassi scorretta perché Googlebot non eseguirà la scansione dei link:

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="#/products">our products</a> and <a href="#/services">our services</p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // this function loads different content based on the current URL fragment
  const pageToLoad = window.location.hash.slice(1); // URL fragment
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

Puoi invece assicurarti che gli URL dei link siano accessibili a Googlebot implementando l'API History:

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

Utilizzare meta tag robots con attenzione

Puoi impedire a Googlebot di indicizzare una pagina o di seguire i link tramite il meta tag robots. Ad esempio, se aggiungi il seguente meta tag nella parte superiore della pagina, impedisci a Googlebot di indicizzare la pagina:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

Puoi usare JavaScript per aggiungere un meta tag robots a una pagina o modificarne i contenuti. Nel codice di esempio che segue viene mostrato come cambiare il meta tag robots con JavaScript per impedire l'indicizzazione della pagina corrente se una chiamata API non restituisce contenuti.

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

Se Googlebot rileva noindex nel meta tag robots prima di eseguire il codice JavaScript, non esegue il rendering o l'indicizzazione della pagina.

Utilizzare la memorizzazione nella cache di lunga durata

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 fingerprint 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 ulteriori informazioni, consulta la guida web.dev sulle strategie di memorizzazione nella cache di lunga durata.

Utilizzare dati strutturati

Quando utilizzi dati strutturati nelle tue pagine, puoi usare JavaScript per generare il codice JSON-LD richiesto e inserirlo nella pagina. Assicurati di testare l'implementazione in modo da evitare problemi.

Seguire le best practice relative ai componenti web

Googlebot supporta i componenti web. Quando Googlebot esegue il rendering di una pagina, unisce i contenuti DOM shadow e light. Ciò significa che può vedere solo i contenuti visibili nel codice HTML renderizzato. Per assicurarti che Googlebot possa ancora vedere i tuoi contenuti dopo il rendering, utilizza il test di ottimizzazione mobile o lo strumento Controllo URL ed esamina il codice HTML sottoposto a rendering.

Se i contenuti non sono visibili nell'HTML sottoposto a rendering, Googlebot non potrà indicizzarli.

L'esempio riportato di seguito crea un componente web che mostra i contenuti light DOM all'interno del relativo shadow DOM. Un modo per assicurarti che i contenuti light DOM e shadow DOM siano mostrati nel codice HTML sottoposto a rendering consiste nell'utilizzare un elemento Slot.

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

  window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>This is light DOM content. It's projected into the shadow DOM.</p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
            

Dopo il rendering, Googlebot indicizza i contenuti:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>This is light DOM content. It's projected into the shadow DOM<p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
    

Correggere le immagini e i contenuti con caricamento lento

Le immagini possono incidere molto negativamente sulla larghezza di banda e sulle prestazioni. Una soluzione efficace consiste nell'uso del caricamento lento che consente di caricare le immagini solo quando l'utente sta per visualizzarle. Per assicurarti di implementare il caricamento lento in modo ottimizzato per la ricerca, segui le nostre linee guida per il caricamento lento.