SEO

Strategie e tecniche di Rendering Javascript

Rendering 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.

“Purtroppo c’è una scarsa cultura nell’analizzare le “sorgenti di traffico”. Una campagna di successo non è quella che genera vendite e conversioni, ma è quella che genera un traffico interpretabile (durata sul sito, tempo di abbandono, pagine visitate, provenienza, ritorno). Le nostre soluzioni devono essere prima di tutto basarsi su Analytics Certificate.”
– MASSI VIGILANTE – SEO SEOHULK

Attraverso questo semplice schema andiamo ad analizzare le cinque aree principali e i punti chiave nella pipeline pixel-to-screen, vediamo le fasi del Rendering JavaScript.
1) JavaScript. Questo linguaggio è usato tipicamente per gestire le modifiche dell’aspetto visivo della pagina: animazioni, ordinamento di un set di dati o aggiunta di elementi DOM. Tuttavia, oltre a JS, anche CSS Animations, Transitions e le API Web Animations possono innescare una modifica visiva.
2) Style. Questo processo determina le regole CSS da applicare agli elementi della pagina. Una volta note, si applicano le regole e si calcolano gli stili finali per ogni elemento mostrato in pagina.
3) Layout. Non appena sa quali regole applicare a un elemento, il browser comincia a calcolare quanto spazio occupa e la sua posizione sullo schermo. Il modello di layout web implica che un elemento possa influenzare gli altri; per esempio, la larghezza dell’elemento body in genere impatta sulle larghezze dei suoi figli e così via fino alla fine dell’albero, pertanto il processo può risultare complesso per il browser.
4) Paint. Il painting è il processo di riempimento di pixel, consistente in disegno di testo, colori, immagini, bordi e ombre, sostanzialmente ogni parte visiva degli elementi. Di solito il disegno è eseguito su superfici multiple, spesso denominate layer.
5) Composite. Poiché le parti della pagina sono state disegnate in livelli potenzialmente multipli, devono essere composte sullo schermo nell’ordine giusto affinché la pagina venga visualizzata correttamente. Ciò è particolarmente importante per gli elementi che si sovrappongono tra loro, perché un errore potrebbe posizionare un elemento sovrapposto in maniera errata a un altro.

Nel discutere sulla capacità di Google di fare crawling e rendering con JavaScript, dobbiamo anche affrontare due concetti molto importanti: il rendering lato server (Server-Side Rendering, SSR) e il rendering lato client (Client-Side Rendering). È necessario che ogni esperto SEO che ha a che fare con il JavaScript abbia piena comprensione di questa distinzione.
Nell’approccio tradizionale (ovvero il Server-Side Rendering), un browser o Googlebot riceve un HTML che descrive in maniera completa una pagina web. Una copia del contenuto è già qui compresa e il tuo browser (o Googlebot) ha solamente bisogno di scaricare il CSS e “illustrarne” il contenuto sullo schermo. Solitamente i motori di ricerca non hanno alcun problema con i contenuti renderizzati lato server.
Il sempre più popolare approccio Client-Side Rendering, invece, è leggermente differente; talvolta, mette in difficoltà i motori di ricerca. Infatti, è abbastanza comune che durante il caricamento iniziale un browser o Googlebot riceva una pagina HTML vuota (con poco contenuto, se non nessuno). Poi, la magia: il JavaScript scarica asincronicamente una copia del contenuto dal server e aggiorna il tuo schermo (e cambia il DOM, Document Object Model).

Se hai un sito web renderizzato lato client, dovresti assicurarti che Google riesca a fare clawling e rendering correttamente.

Quando utilizzi dati strutturati nelle tue pagine, puoi usare il rendering JavaScript per generare il codice JSON-LD richiesto e inserirlo nella pagina. Assicurati di testare l’implementazione in modo da evitare problemi. 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.

In realtà, recentemente Google ha annunciato che la valutazione in due tempi (Scanning + Indexing / Rendering + Indexing) potrebbe nel futuro prossimo non costituire più un limite per le pagine Javascript. Infatti, man mano che le capacità del bot aumentano, Googlebot tenderà a far passare per la fase di Rendering tutte le risorse incontrate nel web, anche quelle che apparentemente non ne avrebbero bisogno.