Ecco tutto ciò che devi sapere su cosa è e perché dovresti implementarlo.
Il rendering dinamico è importante perché gli sviluppatori Web si rivolgono spesso a framework JavaScript come AngularJS per pubblicare contenuti.
Il problema è che i robot dei motori di ricerca spesso non “vedono” i contenuti come i browser li vedono quando visitano siti Web basati su script. Ciò comporta a problemi di indicizzazione.
Fortunatamente, Google ha una soluzione: il rendering dinamico.
Ora Google ha reso pubblica la documentazione per spiegare questo concetto
Che cos’è il rendering dinamico?
A volte, gli sviluppatori creano app Web complesse a pagina singola. In genere si basano su framework JavaScript per gestire l’interfaccia utente.
Questa è un’ottima soluzione per le persone che visitano il sito con un browser, ma non eccezionale per i robot dei motori di ricerca che cercano di analizzare i contenuti.
Perché? Perché i robot utilizzano un browser “senza testa”.
Un browser senza testa è un browser che striscia all’interno del cyberspazio senza interfaccia utente grafica. Non vede una pagina web nel senso tradizionale.
Invece, valuta elementi HTML statici.
I siti Web gestiti da JavaScript producono al volo gran parte dei loro contenuti. Non è servito come HTML statico.
Quindi i robot dei motori di ricerca non vedono altro che il codice JavaScript, dunque non possono indicizzarlo.
C’è una soluzione, tuttavia. Si chiama rendering dinamico.
Ecco come funziona: gli sviluppatori web creano una serie di pagine statiche che servono solo ai robot. In questo modo, i robot di ricerca possono vedere il contenuto e indicizzarlo.
Quindi, includono la logica nel sito Web che controlla ogni richiesta. Se la richiesta proviene da un bot, il sito fornisce il contenuto statico. Se la richiesta proviene da un browser “normale”, il sito fornisce il contenuto JavaScript.
Processo di rendering dinamico
Purtroppo, non è una soluzione facile. Richiede ulteriore lavoro per gli sviluppatori.
Forse un giorno Google e Bing svilupperanno robot in grado di analizzare correttamente gli elementi generati dallo script. Per ora, però, non è così.
Chi deve utilizzare il rendering dinamico?
Se stai gestendo un sito che offre contenuti da JavaScript devi utilizzare il rendering dinamico.
Ecco alcuni dei framework JavaScript che gli sviluppatori utilizzano spesso per creare contenuti Web:
Ricorda: jQuery viene utilizzato per una serie di motivi. Solo perché il tuo sito web esegue jQuery non significa che devi aggiungere un renderer dinamico.
Aziende come Dish, Twitch, Wix, Comcast e persino Domino’s Pizza si affidano tutte a un framework di rendering dinamico per ottimizzare i loro siti per la ricerca.
In che modo il rendering dinamico aiuta gli esperti di web marketing
Quando si tratta di web marketing online, la parola chiave è visibilità. Vuoi che le persone trovino i tuoi contenuti online.
Uno dei modi per farlo è con l’ottimizzazione dei motori di ricerca (SEO). Configura il tuo sito in modo che i motori di ricerca possano facilmente indicizzarlo e classificarlo nella parte superiore per le parole chiave correlate alla tua nicchia.
Come abbiamo visto, questa è una sfida se si dispone di un sito Web basato su JavaScript. I robot di ricerca non possono analizzare i tuoi contenuti.
Il rendering dinamico ti consente di massimizzare la tua portata traducendo efficacemente le tue pagine in un modo che i robot possano trovarle e analizzarle.
Rendering dinamico SEO: come iniziare
Se desideri utilizzare il rendering dinamico SEO nel tuo sito Web, probabilmente dovrai appoggiarti ad un framework.
Lo so. Non è quello che volevi sentire.
Sfortunatamente, sarà probabilmente necessario. Ecco alcuni framework Javascript che potresti aver usato:
- Angular
- Vue.js
- JQuery
- Meteor
- React
- …
la lista é lunga, e potresti aver scelto la modalità
SSR – Rendering lato server
Hai sviluppato un sito web con un framework in JavaScript, rendering lato client e Google fa fatica ad indicizzarlo? Il rendering budget è troppo basso e Google non esegue bene le tue pagine? Allora potresti valutare una soluzione di server side rendering – SSR.
CSR – Rendering lato client
Per Client Side Rendering (CSR) si intende la creazione, o rendering, delle pagine direttamente nel browser che usa JavaScript. In pratica ciò che serve a creare la tua pagina e visualizzarla, come il template, i dati e gli url che servono a caricare le varie risorse sono eseguiti dal client e non dal server.
SR – Rendering statico
Il rendering statico é invece genericamente associato alla creazione di pagine HTML prima con la possibilità di essere condivise tramite CDN.
Cosa che non succede nel rendering lato server, nel rendering statico si riescono a raggiungere valori di First Contentful, First Paint Paint e Time To Interactive buoni, soprattutto se c’è poco javascript lato client
Permette inoltre di ottenere un TTFB (Time To First Byte) veloce perché la pagina é già stata generata e quindi i tempi di risposta sono minori.
Dopo aver configurato e avviato il renderer dinamico, è tempo di scegliere il software da cui viene servito il contenuto HTML statico.
Se sei interessato all’indicizzazione, ovviamente vorrai “googlebot” e “bingbot” in quell’elenco. Tuttavia, ci sono altri agenti (come “linkedinbot”) che potresti voler ricevere anche contenuti statici.
Impostazioni per il rendering dinamico con tool. Immagine per gentile concessione
Come servire le pagine velocemente
Dopo aver integrato il framework di rendering dinamico e scelto i tuoi robot, potresti ancora dover modificare alcune cose.
Ad esempio, se ritieni che il renderer stia rallentando il tuo server, dovrai apportare delle modifiche, altrimenti il tuo sito non si classificherà bene.
È possibile risolvere il problema aggiungendo una cache per servire il contenuto statico. Inoltre, potrebbe essere necessario verificare che le richieste dei bot provengano da crawler legittimi.
Ad esempio, ecco come convalidare che una richiesta bot provenga davvero da Google:
Rendering dinamico: considerazioni per dispositivi mobili
Questo è un mondo mobile. Se il tuo sito non è ottimizzato per pubblicare contenuti che sembrano fantastici su una piattaforma mobile, quasi sicuramente fallirai.
Ecco perché devi assicurarti che il tuo renderer dinamico offra contenuti HTML facili da usare per gli schermi di smartphone più piccoli. Probabilmente dovrai utilizzare la pubblicazione dinamica per farlo accadere.
Ecco come funziona l’intero processo:
Questo è un concetto importante perché Google sta passando a un indice mobile-first. Vale a dire, esegue la scansione delle pagine con un agente mobile e le “vede” nel modo in cui le visualizzerebbero un utente mobile.
Pertanto, se sei interessato a indicizzare le tue pagine e guadagnare una posizione elevata, avrai bisogno del tuo renderer dinamico per pubblicare contenuti HTML ottimizzati per i dispositivi mobili.
Testalo
Dopo aver impostato tutto, è il momento di eseguire alcuni test.
Metti alla prova il tuo rendering dimamico utilizzando il Test ottimizzato per dispositivi mobili ospitato da Google. Basta collegare l’URL del tuo sito e lasciarlo analizzare
Dopo qualche secondo, Google ti mostrerà come appare il tuo sito dal punto di vista del suo agente. Se quel contenuto non corrisponde a ciò che desideri sia visualizzato esso, contatta il tuo team di sviluppo e spiega loro come vuoi che appaia.
Il Test ottimizzato per dispositivi mobili ti avviserà anche se ci sono problemi specifici per dispositivi mobili associati al tuo sito.
Quindi, utilizza “Scarica come Google” per testare l’efficacia del tuo renderer dinamico. Assicurati solo di fare clic sul pulsante “FETCH AND RENDER” o non vedrai nulla.
Ancora una volta, controlla la versione renderizzata del tuo sito e, se non sembra corretta, apporta le modifiche necessarie.
Se stai utilizzando dati strutturati sul tuo sito, vai allo Strumento di test dei dati strutturati. Inserisci il tuo URL e assicurati che Google stia rilevando tutto il tuo markup.
Certo il test finale è aspettare un pò e controllare i risultati effettivi della ricerca. Vengono visualizzati i tuoi contenuti? In tal caso, il renderer dinamico sta facendo il suo lavoro.
Risoluzione dei problemi di rendering dinamico
Ricorda, quando si tratta di sviluppo di software, la Legge di Murphy è rigorosamente applicata. È probabile che qualcosa vada storto la prima volta che si implementa un renderer dinamico.
Per cominciare, se il contenuto del tuo sito Web non viene visualizzato come dovrebbe, assicurati di aver configurato correttamente il framework. Ripassa tutte le impostazioni.
Potresti anche utilizzare un framework che semplicemente non è compatibile con la tua app web. In tal caso, passa a un altro framework.
Se il tuo sito non viene indicizzato, ciò potrebbe essere dovuto a tempi di caricamento lenti. Esamina la soluzione di memorizzazione nella cache sopra menzionata.
Infine, se non vedi dati strutturati, controlla il codice per i tag di script JSON-LD. Se mancano, Google non analizzerà il markup.
Conclusione
I framework JavaScript semplificano la creazione di contenuti Web straordinari e intuitivi. Tuttavia, i contenuto non sono adatti ai bot dei motori di ricerca quindi questo rendering dinamico può impedire che il tuo sito venga recepito propriamente.
Ci vuole un rendering dinamico SEO che permetta ai motori di ricerca di leggere come si deve il sito e indicizzarlo correttamente.
Ecco perché dovresti implementare il rendering dinamico se stai gestendo un sito che si basa su contenuti generati con il linguaggio JavaScript.
Il rendering dinamico SEO consentirà ai robot dei motori di ricerca di trovare i tuoi contenuti e indicizzarli in modo che il tuo sito Web abbia una maggiore esposizione nei risultati di ricerca.