Implementa il rendering dinamico con Rendertron

Molti framework di frontend si basano su JavaScript per mostrare il contenuto. Ciò può significare che Google potrebbe impiegare del tempo per indicizzare i tuoi contenuti o aggiornare i contenuti indicizzati. Un'opzione alternativa è implementare il rendering dinamico . Il rendering dinamico significa passare dal contenuto renderizzato al lato client a quello pre-renderizzato per programmi utente specifici. Questo codelab ti guiderà attraverso l'implementazione del rendering dinamico utilizzando Rendertron, una soluzione open source basata su Chromium headless.

Un diagramma che mostra come funziona il rendering dinamico. Il diagramma mostra il server che serve il contenuto HTML e JavaScript iniziale direttamente al browser. Al contrario, il diagramma mostra il server che serve HTML e JavaScript iniziali a un renderer, che converte l'HTML e JavaScript iniziale in HTML statico. Una volta convertito il contenuto, il renderer fornisce HTML statico al crawler.

Cosa imparerai

  • Come configurare un piccolo server express.js per servire l'app web
  • Come distribuire Rendertron su Google Cloud Platform
  • Installa e configura Rendertron come middleware per il rendering dinamico

Di cosa avrai bisogno

Clona il campione Glitch

Userai un'app Web di esempio per questo codelab. Per creare la tua copia modificabile per questo codelab, clona l'app di esempio in Glitch:

Clona l'app di esempio

Configura il progetto Google Cloud

Crea un nuovo progetto Google Cloud Platform . Avrai bisogno dell'ID progetto in un passaggio successivo.

Facciamo un giro della nostra app web nel test di ottimizzazione mobile . Questo ci darà un'idea di come la nostra app web viene vista dalla Ricerca Google. È importante che tutti i contenuti siano visibili alla Ricerca Google affinché la nostra app web venga indicizzata correttamente. Se i nostri gatti non sono visibili in questo test, gli utenti non saranno in grado di trovarli tramite la Ricerca Google. Ecco il risultato:

887fd885d6fba7fe.png

Lo screenshot mostra uno spazio vuoto dove dovrebbero essere le immagini del gatto.

Per scoprire perché la pagina non viene visualizzata correttamente, puoi fare clic su Visualizza dettagli .

d060e6bd3f005e99.png

Puoi vedere che Googlebot non può effettuare la richiesta API per ottenere le immagini del gatto, perché il file robots.txt dell'API non lo consente.

In questo codelab, utilizzerai il rendering dinamico come un modo per rendere il contenuto disponibile per motori di ricerca e crawler che non eseguono JavaScript e aggirare il problema robots.txt con l'API Cat Images esterna utilizzata da questa app web. Utilizzerai Rendertron per eseguire il rendering per crawler e bot.

Rendertron esegue un server che accetta un URL e restituisce HTML statico per l'URL utilizzando Chromium headless. Questa guida segue la raccomandazione del progetto Rendertron .

  1. Per clonare il repository Rendertron da GitHub, eseguire il seguente comando:
git clone https://github.com/GoogleChrome/rendertron.git
  1. Cambia directory:
cd rendertron 
  1. Per installare le dipendenze e creare Rendertron sul tuo computer, esegui il seguente comando:
npm install && npm run build
  1. Crea un nuovo file chiamato config.json nella directory rendertron con il seguente contenuto per abilitare la cache in memoria di Rendertron (vedi qui per maggiori informazioni sulle opzioni di configurazione disponibili di Renderton ):
{ "cache": "memory" }
  1. Dalla directory rendertron , esegui il seguente comando. Sostituisci YOUR_PROJECT_ID con l'ID progetto che hai impostato in Google Cloud Platform.
gcloud app deploy app.yaml --project YOUR_PROJECT_ID
  1. Seleziona una regione di tua scelta e conferma la distribuzione. Attendi che il comando finisca.
  2. Inserisci YOUR_PROJECT_ID.appspot.com nel tuo browser. Sostituisci YOUR_PROJECT_ID con l'ID progetto effettivo che hai impostato in Google Cloud Platform. Dovresti vedere l'interfaccia di Rendertron con un campo di input e alcuni pulsanti. bf6e4d57fd1200ff.png

Quando vedi l'interfaccia web di Rendertron, hai distribuito con successo la tua istanza Rendertron. Prendi nota dell'URL del tuo progetto (YOUR_PROJECT_ID.appspot.com) poiché ti servirà in seguito.

Per aggiungere Rendertron al server, installa Rendertron, aggiungi Googlebot all'elenco dei bot e configura il middleware Rendertron per inviare le richieste dei bot.

Installa Rendertron

Il server web utilizza express.js e Rendertron ha un middleware express.js. Per aggiungere rendertron-middleware alla tua copia dell'app di esempio, apri il file package.json nel tuo glitch remixato e aggiungi rendertron-middleware alle dipendenze in questo modo:

  "dependencies": {
    "express": "^4.16.4",
    "rendertron-middleware": "^0.1.5"
  },

Aggiungi il middleware rendertron al file server.js nel tuo Glitch remixato.

const rendertron = require('rendertron-middleware');

Configura l'elenco dei bot

Rendertron utilizza l'intestazione HTTP dell'agente utente per determinare se una richiesta proviene da un bot o dal browser di un utente. Per fare in modo che Rendertron visualizzi anche le richieste di Googlebot, aggiungi Googlebot all'elenco degli agenti utente. Incolla il seguente frammento nel file server.js nel tuo Glitch remixato:

const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

Utilizzerai questa espressione regolare nel passaggio successivo quando configurerai il middleware Rendertron.

Configura il middleware Rendertron

Per inviare richieste di bot all'istanza Rendertron, aggiungi il middleware al file server.js . Il middleware controlla l'agente utente richiedente e inoltra le richieste dai bot noti all'istanza Rendertron. Aggiungi il seguente codice al file server.js nel tuo progetto Glitch remixato prima della prima riga che inizia con app.get :

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://YOUR_PROJECT_ID.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

I bot che richiedono il sito Web di esempio ricevono l'HTML statico da Rendertron, quindi i bot non devono eseguire JavaScript per visualizzare il contenuto.

Per verificare se la configurazione di Rendertron è stata eseguita correttamente, esegui il test di ottimizzazione mobile con l'URL del tuo progetto glitch.com. Dovresti vedere "La pagina è ottimizzata per i dispositivi mobili" e lo screenshot dovrebbe mostrare l'intero contenuto della pagina (ad esempio, nessuna immagine mancante).

ba51a6928c0363e3.png

Le foto del gatto sono ora visibili. Nella scheda HTML, puoi vedere l'HTML che il codice JavaScript ha generato e che Rendertron ha rimosso la necessità di JavaScript per visualizzare il contenuto.

Hai creato una configurazione di rendering dinamico senza apportare modifiche al codice frontend dell'app Web. Con queste modifiche, puoi offrire una versione HTML statica dell'app Web ai crawler.

Cosa abbiamo trattato

  • Come configurare un piccolo server express.js per servire l'app web
  • Come distribuire Rendertron
  • Come installare e configurare Rendertron come middleware per il rendering dinamico

Per saperne di più

Continua a conoscere JavaScript e SEO: