Siti animati e SEO: motion e una pagina che si legge

In breve

• HTML prima di tutto: Google e i crawler delle AI leggono l'HTML. Il testo disegnato in WebGL, per loro, non esiste.
• Contenuto nel documento: titoli, paragrafi, lavori e link stanno nel markup.
• Nessun loader a tutto schermo: al primo caricamento arrivano testo e immagine, poi la scena.
• Movimento ridotto: prefers-reduced-motion è rispettato; su touch una scena pesante può restare spenta.
• Peso della prima risposta: immagini WebP o AVIF con misure reali, font ospitati dal sito, JavaScript 3D in un file separato.
• LCP e CLS senza punteggi: il contenuto principale compare presto e il layout non si sposta.

Google legge un sito animato?

Sì, se la pagina è un documento. I crawler leggono l'HTML della risposta: non eseguono Three.js, non leggono texture, non aspettano un loader. Un sito animato si indicizza quando titolo, testo e link sono nel markup.

• OTRO — sito custom in Three.js e GSAP, con un designer di riferimento, Awwwards Honorable Mention 2024. La scena è il pezzo visivo; nome, testo e link restano in HTML.
• Cosmic Crisp — Next.js, Prismic, React Three Fiber, Theatre.js e GSAP, con uno studio partner. Il racconto sta nei campi del CMS, quindi nell'HTML. La scena è uno strato.
• Victoria Music, Brionvega AR e Queer Beer — scene più brevi, stessa regola: prodotto, nome e invito sono scritti nella pagina. L'AR è il gesto, non il contenuto.

Contraste Milano, Think Liquid, Josetta Saffirio e Frame by Frame seguono la stessa regola senza 3D.

Il testo nel canvas viene indicizzato?

No. Il canvas è una superficie di pixel. Un titolo disegnato in Three.js, una frase su una texture, un menu fatto di mesh: per un crawler non ci sono.

La regola: tutto ciò che una persona deve poter citare sta in HTML — titolo, paragrafi, nomi dei lavori, link veri, didascalie. Il canvas sta sopra o accanto, e può non avviarsi.

Vale anche senza 3D. Animare un titolo in GSAP non significa toglierlo dal documento. Su Think Liquid i passaggi allo scroll restano testo; su Josetta Saffirio e Maoten il racconto è in paragrafi e il motion ne segna il ritmo.

I link interni sono link. Un'area cliccabile nel canvas non porta a una URL: un crawler segue gli href, non i raycast. Ogni lavoro, prodotto o ricetta ha un indirizzo.

Un loader a tutto schermo sul primo caricamento è un problema?

Sì. Ritarda proprio il contenuto principale della prima vista — di solito il titolo o l'immagine d'apertura. Chi arriva da una ricerca cerca quella frase, non una barra di attesa.

Non lo uso, né su un sito editoriale né su OTRO o Cosmic Crisp. Testo e immagine si vedono subito; la scena parte dopo. Se la scena non parte, la pagina resta una pagina.

Un preload corretto è un'altra cosa: dimensioni note, un'immagine ferma già al suo posto, il 3D che la sostituisce quando è pronto. Il layout non si sposta, perché lo spazio era riservato.

Vale anche per GSAP che copre la pagina in attesa di un font. I siti web animati che sviluppo mostrano prima il contenuto, poi il movimento.

Come tratto reduced motion e il puntatore grosso?

prefers-reduced-motion è una richiesta del sistema. Niente loop, niente scroll automatico, niente camera che orbita: riduco o spengo il movimento, il contenuto resta.

• Su Think Liquid i passaggi ci sono anche con il movimento ridotto.
• Su Contraste Milano racconto e prenotazione non dipendono da un hover.
• Su OTRO e Cosmic Crisp la scena può restare ferma; un'immagine tiene il posto.

Su touch non c'è hover: un'interazione che esiste solo al passaggio del cursore, su telefono, non esiste. Una scena pesante può restare spenta; immagine e testo fanno il lavoro.

Su Brionvega AR il gesto è corto — «vedilo nella stanza». Se il dispositivo non regge l'AR, restano nome, immagine e invito. Queer Beer, con model-viewer, segue la stessa logica.

Immagini, font e il peso della prima risposta

• Immagini con misure vere: larghezza e altezza riservate, così il testo non salta quando il file arriva.
• WebP o AVIF per le fotografie, con fallback dove serve. Un hero da diversi megabyte pesa più di qualsiasi animazione GSAP.
• Font ospitati dal sito, pochi e solo quelli del design. Un font esterno in ritardo sposta i blocchi.

Su Diesel Farm, NAYT e Bradiboo le immagini prodotto accanto al racconto seguono le stesse regole: niente layout che si muove mentre lo shop risponde.

Il 3D va nel file della prima pagina?

No. Three.js e React Three Fiber pesano. Se stanno nel file che blocca la prima lettura, il titolo aspetta una libreria che serve solo ai pixel.

Separo il codice: la scena si carica quando la vista la usa. HTML, CSS e immagine di fallback sono già la pagina. Su Cosmic Crisp il racconto è nella risposta del CMS; su OTRO, sito custom, la separazione è la stessa.

Se la scena è il primo schermo, la avvio dopo che testo e immagine sono già disegnati, oppure mostro un fermo e lo sostituisco. Una scena lenta o che fallisce non cancella il contenuto.

Victoria Music ha una presenza WebGL forte ed è Next.js: il documento arriva prima della scena. Le esperienze 3D e WebGL nascono con questo vincolo.

Cosa sono LCP e CLS, senza un punteggio

LCP è il momento in cui compare l'elemento più grande della prima vista — spesso un titolo o un'immagine. Se quell'elemento è un canvas nero dietro un loader, arriva tardi. Se è un titolo in HTML o una foto già in pagina, arriva con il documento.

CLS è quanto la pagina si sposta mentre carica: immagini senza misure, font che cambiano, blocchi inseriti sopra il testo, una scena che spinge giù il resto. Misure sulle immagini e spazio riservato al canvas tengono il layout fermo.

Un numero senza URL, data e dispositivo non è una misura; non ne attribuisco ai progetti. Una verifica reale si fa sull'indirizzo, in un'analisi SEO.

GSAP da solo non decide LCP e CLS. Li decidono loader, misure, font e momento in cui parte il 3D.

Il server deve mandare l'HTML già pronto?

Sì. Sui siti in Next.js la risposta contiene già titolo, testo e link: Cosmic Crisp, Frame by Frame, Contraste Milano, Josetta Saffirio, Diesel Farm, NAYT, Villa Brasini, Victoria Music. Prismic, o Shopify per il catalogo, alimenta quella risposta; il browser aggiunge motion e scena.

Su NAYT prodotti e testi esistono in HTML senza aspettare Three.js. OTRO non è Next.js, ma la regola è la stessa.

Anche WordPress manda HTML: GreenWaves, POLI.design, Wolf VA e Colombo New Scal sono temi con GSAP, e il movimento arriva dopo il documento. Su POLI.design D3 disegna i dati, e ciò che va letto è anche in forma testuale.

Il 3D sposta l'ordine di grandezza del lavoro, GSAP no: ne parlo in quanto costa un sito web animato.

Quali regole applico su ogni progetto?

1. Il testo sta in HTML; il canvas non è l'archivio del contenuto.
2. Niente loader a tutto schermo sul primo paint.
3. prefers-reduced-motion riduce o spegne il movimento.
4. Su touch, la scena pesante può non partire; resta un fermo.
5. Immagini con dimensioni, foto in WebP o AVIF.
6. Font ospitati dal sito, solo i pesi usati.
7. Codice 3D in un file separato.
8. Spazio del canvas riservato, così il layout non salta.

Valgono per OTRO come per un tema WordPress come Colombo New Scal. Cambia il peso della scena, non la regola.

Domande frequenti

Un sito animato viene penalizzato da Google?

Il movimento no. Lo penalizzano testo solo nel canvas, loader sul primo contenuto, scena che blocca il caricamento.

Devo rinunciare al 3D per essere indicizzato?

No. Basta non usare il 3D come unico posto del testo. OTRO e Cosmic Crisp sono scene e restano pagine.

prefers-reduced-motion spegne tutto il sito?

Spegne o semplifica il movimento, non i contenuti. La scena resta su un'immagine ferma, i link restano link.

Un punteggio Core Web Vitals basta come prova?

No. È una misura in un momento, su un dispositivo. Senza HTML vero, un buon numero non rende la pagina leggibile a un crawler.

La mia scelta

Motion e WebGL sono livelli che si aggiungono a una pagina, non la sostituiscono. Quando un brief richiede una scena, la prima domanda è dove si trova il testo. Su OTRO, su Cosmic Crisp e su un sito solo GSAP, la frase principale è nel documento prima che qualsiasi libreria venga caricata.