Migliorare il SEO con Prerender.io

Nell'elenco recentemente pubblicato da Forbes delle principali statistiche sui siti web per il 2024, abbiamo appreso che attualmente su Internet sono presenti circa 1,09 miliardi di siti web (!). Su oltre un miliardo di siti web, come faranno gli utenti (e i potenziali clienti) a trovare il vostro sito? Molto probabilmente inizieranno da un motore di ricerca. Tuttavia, affinché il motore di ricerca conduca gli utenti al vostro sito, dovete fare i compiti di SEO.

La SEO assicura che il vostro sito web sia ben posizionato nei motori di ricerca. Se implementato correttamente, il SEO porta traffico al vostro sito. Tuttavia, i siti costruiti sui moderni framework JavaScript, come React o Vue.js, si basano molto sul rendering lato client e i motori di ricerca spesso faticano a indicizzare correttamente questi tipi di siti. Quindi, la visibilità nei risultati di ricerca è scarsa.

Questo ci porta al prerendering. Il prerendering consiste nel generare una versione HTML statica delle pagine web che un motore di ricerca può facilmente scansionare e indicizzare. Questa tecnica può avere un impatto notevole sul successo SEO del vostro sito.

In questo post vedremo come i servizi di prerendering di Prerender.io possono aiutarvi a superare gli ostacoli SEO nell'utilizzo di questi framework. Inoltre, vi indicheremo la direzione giusta per implementare il prerendering a livello di server web o di applicazione.

Facciamo un salto.

La sfida SEO con i framework JavaScript

Perché la SEO è una sfida quando si utilizzano framework come React o Vue.js? I bot tradizionali dei motori di ricerca sono progettati per leggere HTML statico. Altri possono gestire parte del JavaScript e renderizzare parzialmente le pagine, ma hanno i loro limiti. Quando il vostro sito è fortemente basato sul rendering lato client, un motore di ricerca molto probabilmente non effettuerà il crawling e il rendering della pagina fino in fondo, quindi non vedrà il contenuto completo ed effettivo per l'indicizzazione.

A titolo di esempio, Google fornisce le seguenti indicazioni ai costruttori di siti renderizzati lato client:

Il rendering dinamico era una soluzione di ripiego e non una soluzione a lungo termine per i problemi con i contenuti generati da JavaScript nei motori di ricerca. Si consiglia invece di utilizzare il rendering lato server, il rendering statico o l'idratazione come soluzione.

Qual è l'impatto sulla SEO? Naturalmente, un'indicizzazione parziale o ritardata avrà un impatto sulle classifiche di ricerca del vostro sito web. Di conseguenza, il vostro sito potrebbe subire ritardi nella visualizzazione nei risultati di ricerca, il che si traduce in una perdita di opportunità di traffico organico. L'indicizzazione incompleta o ritardata può significare che un motore di ricerca deve eseguire una seconda scansione del sito, con ulteriori ritardi.

Guardando ancora una volta il suggerimento di Google, vediamo la raccomandazione di usare il "rendering statico" e, in una certa misura, questo è ciò che si ottiene con il prerendering.

Come Prerender.io risolve questo problema

Il prerendering colma essenzialmente il divario tra le capacità dinamiche dei moderni framework JavaScript e la necessità di contenuti HTML statici con cui i bot dei motori di ricerca possano lavorare. Vediamo come funziona con Prerender.io.

Prerender.io esegue il JavaScript delle pagine in un browser headless, renderizzando il contenuto completo. Quindi, salva il contenuto renderizzato come HTML statico. Quando un bot di un motore di ricerca esegue il crawling del vostro sito e richiede una determinata pagina, Prerender.io serve l'HTML prerenderizzato invece della vostra pagina con un elevato contenuto di JavaScript. In questo modo, i motori di ricerca possono accedere rapidamente e facilmente al contenuto completo delle vostre pagine per l'indicizzazione, senza dover elaborare JavaScript complessi.

Quali sono i vantaggi di questo approccio?

• Miglioramento del SEO: Poiché Prerender.io è in grado di fornire ai motori di ricerca un HTML completamente renderizzato, i vostri contenuti saranno indicizzati correttamente e tempestivamente. Questo migliora le classifiche di ricerca e aumenta la visibilità del sito.
• Carichi di pagina più veloci: Quando si utilizza Prerender.io per servire HTML statico a un bot del motore di ricerca, si riduce il carico sui propri server. Con i crawler di innumerevoli motori di ricerca costantemente in funzione, scaricare le loro richieste su Prerender.io può migliorare i tempi di caricamento delle pagine e migliorare l'esperienza degli utenti reali.
• Migliore esperienza dell'utente: Un caricamento più rapido delle pagine e un'indicizzazione più accurata aumenteranno le possibilità degli utenti di trovare rapidamente il vostro sito e di vivere un'esperienza di navigazione più positiva. 

Abbiamo esaminato il cosa, il come e il perché. Ora passiamo ai dettagli.

Implementazione di Prerender.io nell'applicazione web

Per integrare Prerender.io nella vostra applicazione web, i due approcci più semplici sono il livello del server web o il livello del codice dell'applicazione. Consideriamo ciascuno di essi in modo più dettagliato.

Approccio 1: Sul server web

Se si sta distribuendo un'applicazione Node.js su Linode, è probabile che si utilizzi l'applicazioneNode.js one-click marketplace, che aiuta a essere rapidamente operativi. Dopo aver creato un nuovo Linode, l'applicazione vi aiuterà ad avviare Nginx, Node.js, NPM e PM2.

Per utilizzare Prerender.io con Nginx, si può seguire la guida all'integrazione di Nginx. Per prima cosa, si creerà una copia di backup del file nginx.conf del proprio sistema. Si userà il modulo ngx_http_map_module per creare alcune variabili in base ai valori di altre variabili.

Si modificherà il file .conf di nginx per inserire le sezioni del file di configurazione di esempio Nginx di Prerender.io. Per prima cosa, si aggiungeranno i seguenti blocchi di mappe alla sezione http.

map $http_user_agent $prerender_ua {         default       0;         "~*Prerender" 0;         "~*googlebot"                               1;         "~*yahoo!\ slurp"                           1;         "~*bingbot"                                 1;         "~*yandex"                                  1;         "~*baiduspider"                             1;         "~*facebookexternalhit"                     1;         "~*twitterbot"                              1;         "~*rogerbot"                                1;         "~*linkedinbot"                             1;         "~*embedly"                                 1;         "~*quora\ link\ preview"                    1;         "~*showyoubot"                              1;         "~*outbrain"                                1;         "~*pinterest\/0\."                          1;         "~*developers.google.com\/\+\/web\/snippet" 1;         "~*slackbot"                                1;         "~*vkshare"                                 1;         "~*w3c_validator"                           1;         "~*redditbot"                               1;         "~*applebot"                                1;         "~*whatsapp"                                1;         "~*flipboard"                               1;         "~*tumblr"                                  1;         "~*bitlybot"                                1;         "~*skypeuripreview"                         1;         "~*nuzzel"                                  1;         "~*discordbot"                              1;         "~*google\ page\ speed"                     1;         "~*qwantify"                                1;         "~*pinterestbot"                            1;         "~*bitrix\ link\ preview"                   1;         "~*xing-contenttabreceiver"                 1;         "~*chrome-lighthouse"                       1;         "~*telegrambot"                             1;         "~*google-inspectiontool"                   1;         "~*petalbot"                                1;     }     map $args $prerender_args {         default $prerender_ua;         "~(^|&)_escaped_fragment_=" 1;     }     map $http_x_prerender $x_prerender {         default $prerender_args;         "1"     0;     }     map $uri $prerender {         default $x_prerender;         "~*\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|woff2|svg|eot)" 0;     }

Il primo map esamina l'agente utente di una richiesta HTTP. Se l'agente utente è nell'elenco dei bot dei motori di ricerca, si attivano diverse altre variabili e configurazioni per preparare il reindirizzamento a Prerender.io.

Poi, all'interno della cartella principale location aggiungere quanto segue per riscrivere l'URL in modo da anteporre l'elemento prerenderio/ percorso:

if ($prerender = 1) {   rewrite (.*) /prerenderio last; }

Infine, aggiungere il blocco di posizione per il file prerenderio/ percorso:

location /prerenderio {   if ($prerender = 0) {     return 404;   }   proxy_set_header X-Prerender-Token YOUR_TOKEN;   proxy_set_header X-Prerender-Int-Type Nginx;   proxy_hide_header Cache-Control;   add_header Cache-Control "private,max-age=600,must-revalidate";   #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs   resolver 8.8.8.8 8.8.4.4;   set $prerender_host "service.prerender.io";   proxy_pass https://$prerender_host;   rewrite .* /$scheme://$host$request_uri? Break;}

Questo location indica a Prerender.io di eseguire il rendering della pagina di destinazione prevista e di servire l'HTML statico. Per l'autenticazione, assicurarsi di sostituire YOUR_TOKEN con il token del proprio account Prerender.io. Nel caso in cui Prerender.io abbia già eseguito il rendering di questa pagina in passato, potrebbe servire una versione in cache (a seconda del modo in cui si impostare la cache nel vostro account Prerender.io).

La guida all'integrazione di Nginx di Prerender.io è abbastanza completa. Se si usa Apache invece di Nginx, si può fare riferimento alla guida all'integrazione del server web Apache .

I quattro passaggi fondamentali per l'integrazione di Prerender.io

In generale, indipendentemente dall'approccio, l'integrazione di Prerender.io nella vostra applicazione comporta i seguenti passaggi:

1. Rilevare i crawler. Ispezionare l'intestazione dell'agente utente nelle richieste. Nell'esempio precedente di Nginx , è sufficiente guardare l'header $http_user_agent variabile.
2. Reindirizzamento a prerender.io. Inoltra le richieste dei bot a Prerender.io per il rendering.
3. Modificare i percorsi delle richieste. Assicurarsi che i percorsi delle richieste siano formattati correttamente per Prerender.io, che si aspetta l'URL completo come percorso.
4. Gestire la cache. Trovate l'equilibrio tra l'utilizzo di Prerender.io per servire pagine HTML statiche nella cache (per la velocità) e l'indirizzamento di Prerender.io per la ricache di contenuti aggiornati sul vostro sito (per la freschezza). Consultate la guida sulla cache di Prerender.io.

Approccio 2: Nel codice dell'applicazione (Node.js Express)

Se si dispone di un'applicazione che utilizza un framework JavaScript (come React, Vue.js o Angular) per il front-end, è possibile configurare l'application server per il front-end in modo che esegua i quattro passaggi di base sopra elencati.

Se si usa Express per servire il front-end, si può sfruttare il middleware precostituito di Prerender.io, che farà tutto questo per noi. Per maggiori dettagli, potete consultare la guida all'integrazione di Node di Prerender.io. Per spiegarvi meglio, ecco cosa è necessario fare:

Installare il pacchetto Node.js :

npm install prerender-node --save

Aggiungere il seguente codice al file index.js o app.js principale, dove è definita l'applicazione Express server:

app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

Anche in questo caso, per l'autenticazione, assicurarsi di sostituire YOUR_TOKEN con il token dell'account Prerender.io.

Quindi, riavviare il server Express.

Non c'è altro da fare!

Conclusione

Il prerendering delle pagine può aiutare a risolvere i problemi SEO legati all'uso dei moderni framework JavaScript e del rendering lato client. Prerender.io esegue il rendering delle pagine in anticipo e poi fornisce l'HTML statico ai crawler dei motori di ricerca. In questo modo, è possibile assicurarsi che i contenuti siano pienamente accessibili ai bot dei motori di ricerca, con conseguente indicizzazione accurata e migliore posizionamento nei risultati di ricerca. Risolvendo questo problema SEO, il vostro sito web otterrà una migliore visibilità e un aumento del traffico organico.

Combinando queste tecniche di prerendering con le soluzioni di cloud computing di Akamai, facili da gestire, avrete siti ottimizzati per la SEO e funzionanti in pochissimo tempo. Per ulteriori suggerimenti e guide su come ottenere il massimo dai servizi di cloud computing di Akamai durante l'implementazione delle vostre applicazioni, consultate la nostra ricca libreria di documenti.