Ricevi gli ultimi aggiornamenti e approfondimenti dalla conferenza Google I/O 2019.
Sta succedendo grandi cose con la Ricerca Google e siamo entusiasti di condividerle al Google I/O 2019.
In questo post ci concentreremo sulle best practice per rendere le app web JavaScript rilevabili nella Ricerca Google, tra cui:
- Il nuovo intramontabile Googlebot
- Pipeline di Googlebot per la scansione, il rendering e l'indicizzazione
- Rilevamento delle funzionalità e gestione degli errori
- Strategie di rendering
- Strumenti di test per il tuo sito web nella Ricerca Google
- Sfide comuni e possibili soluzioni
- Best practice per la SEO nelle app web JavaScript
Ti presentiamo l'intramontabile Googlebot
Quest'anno abbiamo annunciato l'attesissimo nuovo Googlebot evergreen.
Googlebot ora utilizza un motore Chromium moderno per eseguire il rendering dei siti web per la Ricerca Google. Inoltre, testeremo le versioni più recenti di Chromium per mantenere aggiornato Googlebot, in genere entro alcune settimane da ogni release stabile di Chrome. Questo annuncio è un'importante novità per gli sviluppatori web e gli esperti SEO, in quanto segna l'arrivo di oltre 1000 nuove funzionalità, come ES6+, IntersectionObserver e Web Componenti v1, in Googlebot.
Scopri come funziona Googlebot
Googlebot è una pipeline con diversi componenti. Diamo un'occhiata a come Googlebot indicizza le pagine per la Ricerca Google.
La procedura funziona nel seguente modo:
- Googlebot accoda gli URL per la scansione.
- Quindi, recupera gli URL con una richiesta HTTP in base al budget di scansione.
- Googlebot esegue la scansione del codice HTML per individuare i link e accoda i link rilevati per la scansione.
- Googlebot mette in coda la pagina per il rendering.
- Non appena possibile, un'istanza di Chromium headless esegue il rendering della pagina, inclusa l'esecuzione di JavaScript.
- Googlebot utilizza il codice HTML di cui è stato eseguito il rendering per indicizzare la pagina.
La tua configurazione tecnica può influenzare il processo di scansione, rendering e indicizzazione. Ad esempio, tempi di risposta lenti o errori del server possono influire sul budget di scansione. Un altro esempio potrebbe essere la necessità di JavaScript per il rendering dei link, che può rallentarne il rilevamento.
Utilizza il rilevamento delle funzionalità e gestisci gli errori
La versione permanente di Googlebot ha molte nuove funzionalità, ma alcune non sono ancora supportate. Affidarsi a funzionalità non supportate o non gestire correttamente gli errori può impedire a Googlebot di visualizzare o indicizzare i tuoi contenuti.
Ad esempio:
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
In alcuni casi questa pagina potrebbe non mostrare contenuti perché il codice non è in grado di gestire il momento in cui l'utente rifiuta l'autorizzazione o quando la chiamata getCurrentPosition restituisce un errore. Googlebot rifiuta le richieste di autorizzazione come questa per impostazione predefinita.
Questa è una soluzione migliore:
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
Se hai problemi con l'indicizzazione del tuo sito JavaScript, consulta la nostra guida alla risoluzione dei problemi per trovare soluzioni.
Scegli la giusta strategia di rendering per la tua app web
Attualmente, la strategia di rendering predefinita per le app con una sola pagina è il rendering lato client. Il codice HTML carica il codice JavaScript, che a sua volta genera i contenuti nel browser durante l'esecuzione.
Diamo un'occhiata a un'app web che mostra una raccolta di immagini di gatti e utilizza JavaScript per il rendering completo nel browser.
Se puoi scegliere la tua strategia di rendering, prendi in considerazione il rendering lato server o il pre-rendering. Eseguendo JavaScript sul server per generare i contenuti HTML iniziali, il che può migliorare le prestazioni sia per gli utenti sia per i crawler. Queste strategie consentono al browser di iniziare a eseguire il rendering del codice HTML non appena arriva sulla rete, velocizzando il caricamento della pagina. La sessione di rendering all'I/O o il post del blog sul rendering sul web mostrano come il rendering e l'idratazione lato server possono migliorare le prestazioni e l'esperienza utente delle app web e forniscono più esempi di codice per queste strategie.
Se stai cercando una soluzione alternativa per aiutare i crawler che non eseguono JavaScript (o se non puoi apportare modifiche al codebase del frontend), prendi in considerazione il rendering dinamico, che puoi provare in questo codelab. Tuttavia, tieni presente che non otterrai l'esperienza utente o i vantaggi in termini di prestazioni che avresti con il rendering lato server o con il pre-rendering, poiché il rendering dinamico invia ai crawler solo codice HTML statico. Questo rappresenta un'interruzione piuttosto che una strategia a lungo termine.
Testa le pagine
La maggior parte delle pagine funziona normalmente con Googlebot, ma ti consigliamo di testarle regolarmente per assicurarti che i contenuti siano disponibili per Googlebot e che non ci siano problemi. Esistono diversi ottimi strumenti che possono aiutarti a farlo.
Il modo più semplice per eseguire un rapido controllo di una pagina è il test di ottimizzazione mobile. Oltre a mostrarti i problemi di ottimizzazione per i dispositivi mobili, ti fornisce anche uno screenshot dei contenuti above the fold e del codice HTML visualizzato così come lo vede Googlebot.
Puoi anche scoprire se si verificano problemi di caricamento delle risorse o errori di JavaScript.
Ti consigliamo di verificare il dominio in Google Search Console in modo da poter utilizzare lo strumento Controllo URL per scoprire di più sullo stato di scansione e indicizzazione di un URL, ricevere messaggi quando Search Console rileva problemi e scoprire ulteriori dettagli sulle prestazioni del tuo sito nella Ricerca Google.
Per suggerimenti e indicazioni generali sulla SEO, puoi utilizzare i controlli della SEO in Lighthouse. Per integrare i controlli della SEO nella tua suite di test, utilizza l'interfaccia a riga di comando Lighthouse o il bot di Lighthouse CI.
Questi strumenti ti aiutano a identificare, eseguire il debug e risolvere i problemi relativi alle pagine della Ricerca Google e dovrebbero essere parte della tua routine di sviluppo.
Resta al passo con gli aggiornamenti e contattaci
Per essere sempre al corrente di annunci e modifiche alla Ricerca Google, tieni d'occhio il nostro blog dei webmaster, il canale YouTube di Google Webmasters e il nostro account Twitter. Per scoprire di più su SEO e JavaScript, consulta anche la nostra guida per gli sviluppatori alla Ricerca Google e la nostra serie di video sulla SEO per JavaScript.