Vue.js e SEO: come ottimizzare i siti Web reattivi per motori di ricerca e bot

I framework JavaScript reattivi (come React, Vue.js e Angular) sono di gran moda ultimamente e non sorprende che vengano utilizzati in un numero sempre maggiore di siti Web e applicazioni grazie alla loro flessibilità, modularità e facilità di test automatizzati.

Questi framework consentono di ottenere cose nuove, prima impensabili su un sito Web o un'app, ma come si comportano in termini di SEO? Le pagine che sono state create con questi framework vengono indicizzate da Google? Poiché con questi framework tutto, o la maggior parte, del rendering della pagina viene eseguito in JavaScript (e l'HTML che viene scaricato dai bot è per lo più vuoto), sembra che siano vietati se vuoi che i tuoi siti Web vengano indicizzati motori di ricerca o addirittura analizzati dai bot in generale.

In questo articolo parlerò principalmente di Vue.js, poiché è il framework che ho utilizzato di più, e con il quale ho esperienze dirette in termini di indicizzazione da parte dei motori di ricerca sui grandi progetti, ma posso presumere che la maggior parte di quello che tratterò è valido anche per altri framework.

Qualche informazione sul problema

Come funziona l'indicizzazione

Affinché il tuo sito Web possa essere indicizzato da Google, deve essere sottoposto a scansione da Googlebot (un software di indicizzazione automatizzato che visita il tuo sito Web e salva i contenuti delle pagine nel suo indice) seguendo i collegamenti all'interno di ogni pagina. Googlebot cerca anche file XML Sitemap speciali nei siti Web per trovare pagine che potrebbero non essere collegate correttamente dal tuo sito pubblico e per ricevere informazioni aggiuntive sulla frequenza con cui le pagine nel sito Web cambiano e quando sono state modificate l'ultima volta.

Un po' di storia

Fino a pochi anni fa (prima del 2009), Google utilizzava per indicizzare il contenuto dell'HTML di un sito Web, escludendo tutto il contenuto creato da JavaScript. Era risaputo SEO comune che collegamenti e contenuti importanti non dovessero essere scritti da JavaScript poiché non sarebbero stati indicizzati da Google e ciò avrebbe potuto causare una sanzione per il sito Web perché Google potrebbe considerarlo "contenuto falso" come se il proprietario del sito Web stesse provando per mostrare agli utenti qualcosa di diverso da quanto mostrato ai motori di ricerca e cercando di ingannare questi ultimi.

Era pratica molto comune tra i truffatori inserire molti contenuti SEO-friendly nell'HTML e nasconderli in JavaScript, ad esempio. Google ha sempre messo in guardia contro questa pratica:

"La pubblicazione di Googlebot con contenuti diversi da quelli che un utente normale vedrebbe è considerata cloaking e sarebbe contraria alle nostre Istruzioni per i webmaster".

Potresti essere penalizzato per questo. In alcuni casi, potresti essere penalizzato per aver servito contenuti diversi a diversi programmi utente sul lato server, ma anche per aver cambiato contenuto tramite JavaScript dopo che la pagina è stata caricata. Penso che questo ci dimostri che Google ha indicizzato i siti Web che eseguono JavaScript per molto tempo, almeno per confrontare l'HTML finale del sito Web (dopo l'esecuzione di JavaScript) e l'HTML grezzo che stava analizzando per i suoi indici. Ma Googlebot non eseguiva JavaScript tutto il tempo e Google non utilizzava il contenuto generato da JavaScript per scopi di indicizzazione.

Quindi, dato il maggiore utilizzo di AJAX per fornire contenuti dinamici sui siti Web, Google ha proposto uno "schema di scansione AJAX" per aiutare gli utenti a indicizzare i siti Web basati su AJAX. È stato molto complicato; fondamentalmente richiedeva al sito Web di produrre un rendering di pagine con contenuto AJAX incluso. Quando richiesto da Google, il server fornirebbe una versione della pagina con tutto (o la maggior parte) del contenuto che sarebbe stato generato dinamicamente da JavaScript incluso nella pagina HTML, pre-renderizzato come snapshot HTML del contenuto. Questo processo per fare in modo che una soluzione lato server fornisca contenuti che (per tutti gli altri scopi) dovevano essere generati lato client, implicava che coloro che desideravano avere un sito che si basava fortemente su JavaScript indicizzato in Google dovevano passare attraverso molti problemi tecnici.

Ad esempio, se il contenuto letto da AJAX proveniva da un servizio web esterno, era necessario duplicare le stesse chiamate del servizio web lato server e produrre, lato server, lo stesso HTML che sarebbe stato prodotto lato client da JavaScript — o almeno uno molto simile. Questo era molto complicato perché, prima dell'avvento di Node.js, richiedeva di duplicare almeno in parte la stessa logica di rendering in due diversi linguaggi di programmazione: JavaScript per il frontend e PHP, Java, Python, Ruby e così via, su il backend. Questo è chiamato " rendering lato server " e potrebbe portare a un inferno di manutenzione: se hai apportato modifiche importanti al modo in cui esegui il rendering dei contenuti nel frontend, dovevi duplicare quelle modifiche sul backend.

L'unica alternativa per evitare di duplicare la logica era analizzare il tuo sito con un browser che eseguiva JavaScript e salvare i risultati finali sul tuo server e servirli a Googlebot. Questo è un po' simile a quello che ora viene chiamato " pre-rendering ".

Google (con il suo schema di scansione AJAX) ha anche garantito che avresti evitato sanzioni dovute al fatto che in questo caso stavi offrendo contenuti diversi a Googlebot e all'utente. Tuttavia, dal 2015, Google ha deprecato questa pratica con un post ufficiale sul blog che diceva ai gestori dei siti web quanto segue:

"Oggi, a meno che tu non impedisca a Googlebot di eseguire la scansione dei tuoi file JavaScript o CSS, siamo generalmente in grado di visualizzare e comprendere le tue pagine web come i browser moderni".

Ciò che questo ci ha detto non è che Googlebot avesse improvvisamente acquisito la capacità di eseguire JavaScript durante l'indicizzazione delle pagine Web, poiché sappiamo che lo faceva da molto tempo (almeno per verificare la presenza di contenuti falsi e truffe). Invece, ci ha detto che il risultato dell'esecuzione di JavaScript sarebbe stato indicizzato e utilizzato nelle SERP.

Ciò sembra implicare che non dobbiamo più preoccuparci di fornire a Google l'HTML con rendering lato server. Tuttavia, vediamo tutti i tipi di strumenti per il rendering lato server e il pre-rendering resi disponibili per i framework JavaScript, sembra che non sia così. Inoltre, quando si ha a che fare con le agenzie SEO su grandi progetti, il pre-rendering sembra essere considerato obbligatorio. Come mai?

In che modo Google indicizza effettivamente le pagine create con framework front-end?

L'esperimento

Per vedere cosa indicizza effettivamente Google nei siti Web creati con un framework front-end, ho costruito un piccolo esperimento. Non copre tutti i casi d'uso, ma è almeno un mezzo per saperne di più sul comportamento di Google. Ho creato un piccolo sito Web con Vue.js e ho reso diverse parti di testo in modo diverso.

I contenuti del sito sono tratti dalla descrizione del libro Infinite Jest di David Foster Wallace nel Wiki di Infinite Jest ( grazie ragazzi! ). Ci sono un paio di testi introduttivi per l'intero libro e un elenco di personaggi con la loro biografia individuale:

• Del testo nell'HTML statico, al di fuori del contenitore principale Vue.js;
• Parte del testo viene renderizzato immediatamente da Vue.js perché è contenuto in variabili già presenti nel codice dell'applicazione: sono definite nell'oggetto data del componente;
• #Un po' di testo viene visualizzato da Vue.js dall'oggetto data , ma con un ritardo di 300 ms;
• Il BIOS del personaggio proviene da un insieme di API di riposo, che ho creato apposta utilizzando Sandbox. Poiché presumevo che Google avrebbe eseguito il codice del sito Web e si sarebbe fermato dopo un po' di tempo per acquisire un'istantanea dello stato corrente della pagina, ho impostato ogni servizio Web in modo che risponda con un ritardo incrementale, il primo con 0 ms, il secondo con 300 ms, il terzo con 600 ms e così via fino a 2700 ms.

Ogni biografia del personaggio è abbreviata e contiene un collegamento a una sottopagina, disponibile solo tramite Vue.js (gli URL sono generati da Vue.js utilizzando l'API della cronologia), ma non lato server (se chiami l'URL del pagina direttamente, non ricevi risposta dal server), per verificare se anche quelli sono stati indicizzati. Ho pensato che questi non sarebbero stati indicizzati, poiché non sono collegamenti appropriati che eseguono il rendering lato server e non c'è modo che Google possa indirizzare gli utenti direttamente a quei collegamenti. Ma volevo solo controllare.

Ho pubblicato questo piccolo sito di test sulle mie pagine Github e ho richiesto l'indicizzazione: dai un'occhiata.

I risultati

I risultati dell'esperimento (riguardante la homepage) sono i seguenti:

• I contenuti che sono già nel contenuto HTML statico vengono indicizzati da Google (il che è piuttosto ovvio);
• I contenuti che vengono generati da Vue in tempo reale vengono sempre indicizzati da Google;
• Anche i contenuti generati da Vue, ma resi dopo 300 ms, vengono indicizzati;
• I contenuti che provengono dal servizio web, con un certo ritardo, potrebbero essere indicizzati, ma non sempre. Ho controllato l'indicizzazione della pagina da parte di Google in diversi momenti, e il contenuto che è stato inserito per ultimo (dopo un paio di secondi) a volte è stato indicizzato, a volte no. Il contenuto di cui viene eseguito il rendering abbastanza rapidamente viene indicizzato per la maggior parte del tempo, anche se proviene da una chiamata asincrona a un servizio Web esterno. Ciò dipende dal fatto che Google abbia un budget di rendering per ogni pagina e sito, che dipende dai suoi algoritmi interni, e potrebbe variare notevolmente a seconda del ranking del tuo sito e dello stato attuale della coda di rendering di Googlebot. Quindi non puoi fare affidamento sul contenuto proveniente da servizi Web esterni per essere indicizzato;
• Le sottopagine (poiché non sono accessibili come collegamento diretto) non vengono indicizzate come previsto.

Cosa ci dice questo esperimento? Fondamentalmente, che Google indicizza i contenuti generati dinamicamente, anche se provengono da un servizio web esterno, ma non è garantito che i contenuti vengano indicizzati se "arrivano troppo tardi". Ho avuto esperienze simili con altri siti Web di produzione reali oltre a questo esperimento.

SEO competitivo

Ok, quindi il contenuto viene indicizzato , ma ciò che questo esperimento non ci dice è: il contenuto sarà classificato in modo competitivo? Google preferirà un sito Web con contenuto statico a un sito Web generato dinamicamente? Questa non è una domanda facile a cui rispondere.

Dalla mia esperienza, posso dire che i contenuti generati dinamicamente possono classificarsi nelle prime posizioni della SERPS. Ho lavorato al sito web per un nuovo modello di una grande casa automobilistica, lanciando un nuovo sito web con un nuovo dominio di terzo livello. Il sito è stato completamente generato con Vue.js, con pochissimi contenuti nell'HTML statico oltre ai tag <title> e alle meta descrizioni.

Il sito ha iniziato a classificarsi per le ricerche minori nei primi giorni dopo la pubblicazione e gli snippet di testo nelle SERP riportavano parole provenienti direttamente dal contenuto dinamico.

Nel giro di tre mesi si è classificato al primo posto per la maggior parte delle ricerche relative a quel modello di auto, il che era relativamente facile poiché era ospitato su un dominio ufficiale appartenente al produttore dell'auto e il dominio era fortemente collegato a siti Web affidabili.

Ma dato il fatto che abbiamo dovuto affrontare una forte opposizione da parte della società SEO che si occupava del progetto, penso che il risultato sia stato comunque notevole.

A causa delle scadenze ravvicinate e della mancanza di tempo concesso per il progetto, avremmo pubblicato il sito senza pre-rendering.

Testo animato

Ciò che Google non indicizza è un testo fortemente animato. Il sito di una delle aziende con cui lavoro, Rabbit Hole Consulting, contiene molte animazioni di testo, che vengono eseguite mentre l'utente scorre, e richiedono che il testo sia suddiviso in più blocchi su tag diversi.

I testi principali nella home page del sito non sono pensati per l'indicizzazione sui motori di ricerca poiché non sono ottimizzati per la SEO. Non sono fatti di tech-speak e non utilizzano parole chiave: servono solo ad accompagnare l'utente in un viaggio concettuale sull'azienda. Il testo viene inserito dinamicamente quando l'utente entra nelle varie sezioni della home page.

Nessuno dei testi in queste sezioni del sito web viene indicizzato da Google. Per fare in modo che Google mostri qualcosa di significativo nelle SERP, abbiamo aggiunto del testo statico nel footer sotto il modulo di contatto e questo contenuto viene mostrato come parte del contenuto della pagina nelle SERP.

Il testo nel footer viene indicizzato e mostrato nelle SERP, anche se non è immediatamente visibile agli utenti a meno che non scorri fino in fondo alla pagina e clicchi sul pulsante "Domande" per aprire il modulo di contatto. Ciò conferma la mia opinione che il contenuto viene indicizzato anche se non viene mostrato immediatamente all'utente, a condizione che venga visualizzato presto nell'HTML, invece di essere visualizzato su richiesta o dopo un lungo ritardo.

Che dire del pre-rendering?

Quindi, perché tutto questo trambusto per il pre-rendering, che sia eseguito lato server o al momento della compilazione del progetto? È davvero necessario? Sebbene alcuni framework, come Nuxt, lo rendano molto più facile da eseguire, non è ancora un picnic, quindi la scelta se configurarlo o meno non è facile.

Penso che non sia obbligatorio . È certamente un requisito se gran parte del contenuto che si desidera venga indicizzato da Google proviene da un servizio Web esterno e non è immediatamente disponibile al momento del rendering e potrebbe, in alcuni casi sfortunati, non essere affatto disponibile a causa, ad esempio, di , tempo di inattività del servizio web. Se durante le visite di Googlebot alcuni dei tuoi contenuti arrivano troppo lentamente, è possibile che non vengano indicizzati . Se Googlebot indicizza la tua pagina esattamente nel momento in cui stai eseguendo la manutenzione sui tuoi servizi web, potrebbe non indicizzare alcun contenuto dinamico.

Inoltre, non ho prove di differenze di ranking tra contenuto statico e contenuto generato dinamicamente. Ciò potrebbe richiedere un altro esperimento. Penso che sia molto probabile che, se il contenuto proviene da un servizio web esterno e non viene caricato immediatamente, potrebbe influire sulla percezione di Google delle prestazioni del tuo sito, che è un fattore molto importante per il posizionamento.

Letture consigliate : In che modo il Mobile Web Design influisce sulla ricerca locale (e cosa fare al riguardo)

altre considerazioni

Compatibilità

Fino a poco tempo, Googlebot utilizzava una versione abbastanza vecchia di Chromium (il progetto open source su cui si basa Google Chrome), ovvero la versione 41. Ciò significava che alcune recenti funzionalità JavaScript o CSS non potevano essere visualizzate correttamente da Google (ad es. IntersectionObserver, sintassi ES6 e così via).

Google ha recentemente annunciato che ora sta eseguendo l'ultima versione di Chromium (74, al momento in cui scrivo) in Googlebot e che la versione verrà aggiornata regolarmente. Il fatto che Google stesse eseguendo Chromium 41 potrebbe aver avuto grandi implicazioni per i siti che hanno deciso di ignorare la compatibilità con IE11 e altri vecchi browser.

Puoi vedere un confronto tra il supporto di Chromium 41 e Chromium 74 per le funzionalità qui, tuttavia, se il tuo sito stava già riempiendo le funzionalità mancanti per rimanere compatibile con i browser precedenti, non avrebbero dovuto esserci problemi.

Usa sempre i polyfill poiché non sai mai a quale browser manca il supporto per funzionalità che ritieni siano comuni. Ad esempio, Safari non supportava una nuova funzionalità importante e molto utile come IntersectionObserver fino alla versione 12.1, uscita a marzo 2019.

Errori JavaScript

Se ti affidi a Googlebot che esegue JavaScript per eseguire il rendering di contenuti vitali, è necessario evitare a tutti i costi gravi errori JavaScript che potrebbero impedire il rendering dei contenuti. Mentre i bot potrebbero analizzare e indicizzare HTML che non è perfettamente valido (sebbene sia sempre preferibile avere HTML valido su qualsiasi sito!), se c'è un errore JavaScript che impedisce il caricamento di alcuni contenuti , allora non c'è modo che Google indicizzi quel contenuto.

In ogni caso, se ti affidi a JavaScript per visualizzare contenuti vitali per i tuoi utenti finali, è probabile che tu abbia già unit test approfonditi per verificare la presenza di errori di blocco di qualsiasi tipo. Tieni presente, tuttavia, che gli errori Javascript possono derivare da scenari imprevedibili, ad esempio in caso di gestione impropria degli errori sulle risposte API.

È meglio disporre di un software di controllo degli errori in tempo reale (come Sentry o LogRocket) che ti avviserà di eventuali errori del caso limite che potresti non rilevare durante i test manuali o dell'unità. Ciò aumenta la complessità di fare affidamento su JavaScript per i contenuti SEO.

Altri motori di ricerca

Gli altri motori di ricerca non funzionano bene come Google con contenuti dinamici. Bing non sembra affatto indicizzare il contenuto dinamico, né DuckDuckGo o Baidu. Probabilmente quei motori di ricerca mancano delle risorse e della potenza di calcolo che Google ha a palate.

L'analisi di una pagina con un browser headless e l'esecuzione di JavaScript per un paio di secondi per analizzare il contenuto renderizzato è sicuramente più pesante in termini di risorse rispetto alla semplice lettura di HTML semplice. O forse questi motori di ricerca hanno scelto di non scansionare i contenuti dinamici per altri motivi. Qualunque sia la causa di ciò, se il tuo progetto deve supportare uno di questi motori di ricerca, devi impostare il pre-rendering.

Nota : per ottenere maggiori informazioni sulle capacità di rendering di altri motori di ricerca, puoi consultare questo articolo di Bartosz Goralewicz. È un po' vecchio, ma secondo la mia esperienza è ancora valido.

Altri bot

Ricorda che il tuo sito sarà visitato anche da altri bot. Gli esempi più importanti sono Twitter, Facebook e altri bot di social media che devono recuperare meta informazioni sulle tue pagine per mostrare un'anteprima della tua pagina quando è collegata dai loro utenti. Questi bot non indicizzeranno il contenuto dinamico e mostreranno solo le metainformazioni che trovano nell'HTML statico. Questo ci porta alla considerazione successiva.

Sottopagine

Se il tuo sito è un cosiddetto "Sito Web One Page" e tutto il contenuto pertinente si trova in un HTML principale, non avrai problemi a far indicizzare quel contenuto da Google. Tuttavia, se hai bisogno che Google indicizzi e mostri qualsiasi pagina secondaria sul sito web, dovrai comunque creare HTML statico per ciascuna di queste, anche se fai affidamento sul tuo JavaScript Framework per controllare l'URL corrente e fornire il contenuto pertinente da inserire in quella pagina. Il mio consiglio, in questo caso, è quello di creare pagine lato server (o statiche) che forniscano almeno il tag title corretto e la meta descrizione/informazioni.

Conclusioni

Le conclusioni a cui sono giunto durante la ricerca di questo articolo sono le seguenti:

1. Se scegli come target solo Google, non è obbligatorio utilizzare il pre-rendering per avere il tuo sito completamente indicizzato, tuttavia:
2. Non dovresti fare affidamento su servizi Web di terze parti per i contenuti che devono essere indicizzati, soprattutto se non rispondono rapidamente.
3. Il contenuto che inserisci nel tuo HTML immediatamente tramite il rendering Vue.js viene indicizzato, ma non dovresti usare testo animato o testo che viene inserito nel DOM dopo le azioni dell'utente come lo scorrimento, ecc.
4. Assicurati di verificare la presenza di errori JavaScript in quanto potrebbero causare la mancata indicizzazione di intere pagine/sezioni o il mancato indicizzazione del tuo sito.
5. Se il tuo sito ha più pagine , devi comunque avere una certa logica per creare pagine che, pur basandosi sullo stesso sistema di rendering front-end della home page, possono essere indicizzate da Google come singoli URL.
6. Se hai bisogno di descrizioni e immagini di anteprima diverse per i social media tra pagine diverse, dovrai affrontare anche questo, lato server o compilando pagine statiche per ciascun URL.
7. Se hai bisogno che il tuo sito funzioni su motori di ricerca diversi da Google , avrai sicuramente bisogno di un pre-rendering di qualche tipo.