SEO con Inertia: quando title, canonical e Open Graph spariscono dopo l'hydration
Il problema non era generare i meta tag, ma farli sopravvivere alla gestione dell'head lato client.
Generare meta tag sul server non garantisce che restino nel documento dopo che l'applicazione JavaScript prende il controllo.
Con Inertia e React, la gestione dell'<head> merita la stessa attenzione del body, soprattutto quando si introduce SSR.
Il problema iniziale: due sorgenti per il title
Se il template server genera già un <title> e la pagina React usa contemporaneamente il componente <Head>, il documento SSR può contenere due titoli.
Nel browser il problema può sparire dopo l'avvio dell'app, ma il crawler vede comunque l'HTML iniziale.
Il problema più serio: i meta tag rimossi
La situazione diventa peggiore quando description, canonical e Open Graph vengono stampati dal template con attributi che Inertia considera di propria competenza.
Dopo l'hydration, il client confronta gli elementi dell'head gestiti da Inertia con quelli dichiarati dalla pagina. Quelli che non risultano più presenti possono essere rimossi.
Perché è difficile accorgersene
Aprendo “Visualizza sorgente” i meta tag sembrano corretti. Guardando il DOM dopo il caricamento, invece, alcuni possono essere già scomparsi.
È quindi essenziale distinguere:
- HTML restituito dal server;
- DOM finale dopo l'esecuzione di JavaScript.
Una sola ownership per ogni elemento
La soluzione più pulita è decidere chi possiede cosa.
Per esempio:
- il titolo può essere gestito da Inertia
<Head>; - meta description, canonical, Open Graph e JSON-LD possono restare statici nel template se non devono essere riconciliati dal client;
- oppure tutta la SEO può essere centralizzata in un unico componente React alimentato da props.
L'importante è evitare che due sistemi differenti provino a gestire lo stesso elemento.
Testare l'head, non soltanto il body
Con SSR è naturale verificare che il testo dell'articolo sia presente nell'HTML. Ma la SEO vive in gran parte nell'head.
Vale quindi la pena aggiungere test che verifichino:
- un solo
<title>; - presenza della meta description;
- canonical corretto;
- Open Graph;
- JSON-LD quando previsto.
Controllare anche il DOM dopo hydration
Un test server-side non vede ciò che JavaScript modifica successivamente.
Per questo un browser automatizzato è utile anche per la SEO tecnica: permette di verificare che gli elementi presenti nella risposta iniziale restino coerenti dopo l'avvio dell'applicazione.
Conclusione
Con applicazioni ibride server/client, la SEO non finisce quando il backend ha stampato i meta tag.
Bisogna sapere quale runtime possiede l'head, cosa succede durante l'hydration e quale DOM rimane effettivamente dopo che React e Inertia hanno terminato il loro lavoro.