UX & Conversione

Visibilità Viewport

Nome Card UX: Visibilità Viewport

La card Visibilità Viewport analizza cosa vede davvero un utente quando apre la pagina su un dispositivo reale, prima ancora di scorrere. Misura quanti elementi chiave del contenuto sono visibili nella finestra iniziale del browser, quanti sono nascosti tramite CSS e quanti si trovano sotto la piega (below the fold). Questo dato è rilevante perché Google attribuisce più importanza agli elementi che compaiono immediatamente, e un H1 o un blocco di testo nascosto via display:none è tecnicamente presente nel DOM ma invisibile per l'utente nella prima esperienza.

Cosa analizza la card

Analizza elementi visibili, nascosti via CSS (display:none, visibility:hidden, opacity:0) e posizionati sotto la piega nello snapshot di rendering. Calcola un punteggio di visibilità e segnala penalità per elementi critici nascosti come H1 o primo paragrafo principale.

A cosa serve

Serve per evitare i falsi positivi SEO: pagine che sembrano ottimizzate tecnicamente ma in cui il contenuto importante è inaccessibile alla prima interazione. È particolarmente utile per verificare layout mobile dove il contenuto viene frequentemente nascosto o spostato.

L'Analogia: La vetrina del negozio al piano terra

Immagina di passare davanti a un negozio e la vetrina è completamente coperta da un tendone grigio. I prodotti ci sono, la merce è ottima, ma tu non lo saprai mai perché non riesci a vedere nulla dalla strada. Un H1 nascosto via CSS o un blocco di testo spostato sotto la piega fa esattamente questo: i contenuti esistono, ma l'utente che arriva sulla pagina non li vede finché non scorre, e spesso non scorre.

Esempio di vita reale

Un sito mobile ha un banner promozionale enorme che occupa l'intera schermata iniziale e spinge l'H1 e il testo principale sotto la piega. La card segnala questo squilibrio. Ridimensionando il banner, il contenuto rilevante diventa visibile nella prima schermata e il punteggio di visibilità migliora sensibilmente.

Domande frequenti su questa card

Google può leggere contenuto nascosto tramite CSS, ma gli attribuisce meno peso rispetto a contenuto visibile nella prima schermata. Soprattutto nei siti mobile-first, gli elementi above the fold ricevono maggiore attenzione. Nascondere intenzionalmente testo per manipolare l'algoritmo è considerato una pratica scorretta.

Sì. L'analisi di visibilità richiede un rendering reale della pagina tramite il motore Playwright, che simula il browser. In modalità Veloce (solo cURL) la card non può raccogliere questi dati e il valore risulta N/D.

La card valuta un campione degli elementi principali della pagina: H1, H2, paragrafi, immagini e link nel contesto del contenuto principale. Non analizza ogni singolo pixel ma si concentra sugli elementi semanticamente rilevanti per la SEO.

Above the Fold (ATF)

È l'area visibile all'apertura della pagina. Qui deve risiedere il titolo principale (H1). Se l'utente deve scorrere per trovarlo, Google interpreta la pagina come poco rilevante per l'intento di ricerca.

Below the Fold (BTF)

Tutto ciò che sta "sotto la piega". È lo spazio perfetto per approfondimenti, tabelle e grafici. Gli elementi in questa zona pesano meno nel calcolo immediato della pertinenza rispetto a quelli ATF.

Il Pericolo del Cloaking Invisibile

Lo strumento rileva se il testo è nascosto tramite CSS (es. display: none o opacity: 0) o se il colore del testo è troppo simile allo sfondo. Pratiche di questo tipo, anche se accidentali, possono portare a penalizzazioni severe da parte degli algoritmi anti-spam di Google. La trasparenza visiva è la base della fiducia.