Guida SEO Passo 5: UX / Esperienza Utente

Questo è il Passo 5 della Guida SEO in 13 Passi. L'esperienza utente è ora un fattore di ranking diretto: Google misura come i visitatori interagiscono con il tuo sito e premia i siti che forniscono esperienze rapide, accessibili e piacevoli.

La strategia dei contenuti (Passo 3) determina cosa pubblichi. Il link building (Passo 4) dimostra la tua autorità. Ma se i visitatori atterrano sulla tua pagina e se ne vanno subito perché è lenta, non funzionante su mobile o inaccessibile, nulla di tutto ciò conta. Google tiene traccia di questi segnali e li utiliza per regolare i ranking.

Dal 2021, l'aggiornamento sull'Esperienza della Pagina di Google ha reso l'UX un fattore di ranking confermato. Nel 2024, l'INP (Interaction to Next Paint) ha sostituito il FID come Core Web Vital. Nel 2026, questi segnali assumono ancora più peso man mano che Google dà sempre più priorità alle metriche di soddisfazione degli utenti rispetto ai segnali tradizionali.

Cosa Copre l'UX per SEO

L'ottimizzazione UX per SEO si estende su 6 aree:

Core Web Vitals — Le metriche ufficiali di UX di Google (LCP, INP, CLS)
Ottimizzazione Mobile — Design reattivo, target touch, viewport
Accessibilità (WCAG) — Rendere il tuo sito utilizzabile da chiunque
Segnali dell'Esperienza della Pagina — HTTPS, nessun interstitial, navigazione sicura
Modelli di Navigazione — Struttura del sito che aiuta utenti e crawler
Ottimizzazione Above-the-Fold — Ciò che gli utenti vedono senza scorrere

1. Core Web Vitals (CWV)

I Core Web Vitals sono le tre metriche di UX misurabili di Google. Sono monitorati nei dati del Chrome User Experience Report (CrUX) e influenzano direttamente i ranking.

Le tre metriche:

| Metrica | Misura | Buono | Da Migliorare | Scarso | |---------|--------|-------|---------------|--------| | LCP (Largest Contentful Paint) | Velocità di caricamento | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | Responsività | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | Stabilità visiva | < 0.1 | 0.1 - 0.25 | > 0.25 |

LCP — Largest Contentful Paint

LCP misura quanto rapidamente il contenuto principale della tua pagina diventa visibile. Il "contenuto più grande" è tipicamente la tua immagine principale, il titolo principale o il blocco più grande sopra la piega.

Problemi comuni di LCP e soluzioni:

| Problema | Impatto | Soluzione | |----------|---------|-----------| | Immagine principale non ottimizzata | +2-5s | Formato WebP, dimensionamento corretto, fetchpriority="high" | | CSS/JS che bloccano il rendering | +1-3s | Inline critical CSS, defer non-critical | | Risposta lenta del server (TTFB) | +1-4s | CDN, caching del server, distribuzione edge | | Caricamento di font web che bloccano il rendering | +0.5-2s | font-display: swap, preload font critici | | Script di terze parti | +1-3s | Defer analytics/chat widgets, lazy load ads |

Priorità per l'ottimizzazione LCP:

<!-- 1. Precarica l'immagine LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. Inline CSS critico (primi 14KB) -->
<style>/* Stili above-the-fold solo */</style>

<!-- 3. Defer CSS non critico -->
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

<!-- 4. Immagine principale con dimensioni esplicite -->
<img src="/hero.webp" width="1200" height="600"
     fetchpriority="high" decoding="async"
     alt="Testo alternativo descrittivo">

Guadagno rapido: Esegui PageSpeed Insights sulla tua homepage. Controlla l'elemento LCP che identifica. Se è un'immagine, converti in WebP, imposta larghezza/altezza esplicite e aggiungi fetchpriority="high". Questo spesso riduce LCP di 1-2 secondi.

INP — Interaction to Next Paint

INP misura quanto rapidamente la tua pagina risponde quando gli utenti interagiscono (clic, tocchi, digitazione). Tiene traccia della peggiore interazione durante la visita alla pagina e utilizza quella come punteggio.

Problemi comuni di INP e soluzioni:

| Problema | Impatto | Soluzione | |----------|---------|-----------| | Compiti JavaScript lunghi | +200-1000ms | Suddividi in compiti più piccoli, utilizza requestIdleCallback | | Gestori di eventi pesanti | +100-500ms | Debounce, throttle, utilizza requestAnimationFrame | | Layout thrashing | +50-300ms | Raggruppa letture/scritture DOM, utilizza will-change | | Script di terze parti | +100-500ms | Defer, carica dopo l'interazione, utilizza Web Workers | | Chiamate API sincrone | +200-2000ms | Async/await, stati di caricamento, UI ottimistica |

Tecniche di ottimizzazione INP:

// Cattivo: Blocca il thread principale
button.addEventListener('click', () => {
  const data = heavyComputation(); // Blocca per 400ms
  updateDOM(data);
});

// Buono: Rilascia il thread principale
button.addEventListener('click', async () => {
  // Mostra un feedback immediato
  button.textContent = 'Caricamento...';

  // Suddividi il lavoro pesante in segmenti
  await scheduler.yield();
  const data = heavyComputation();

  await scheduler.yield();
  updateDOM(data);
});

Guadagno rapido: Apri Chrome DevTools > scheda Performance. Naviga il tuo sito e cerca "Long Tasks" (triangoli rossi). Questi bloccano il thread principale. Il compito lungo più grande è spesso uno script di terze parti: ritardalo o caricalo dopo la prima interazione.

CLS — Cumulative Layout Shift

CLS misura la stabilità visiva — quanto il contenuto della pagina balza mentre si carica. Nulla frustra gli utenti più di cliccare un pulsante e vedere la pagina spostarsi facendo clic su qualcos'altro.

Problemi comuni di CLS e soluzioni:

| Problema | Impatto CLS | Soluzione | |----------|-------------|-----------| | Immagini senza dimensioni | 0.1-0.5 | Imposta sempre width e height | | Annunci che si caricano in ritardo | 0.1-0.3 | Riserva spazio con min-height | | Font web che causano reflow | 0.05-0.2 | font-display: optional o fallback dimensionato | | Inserimento di contenuti dinamici | 0.1-0.4 | Riserva spazio, utilizza content-visibility | | Banner cookie che spingono il contenuto | 0.05-0.2 | Design overlay (non push-down) |

Checklist di prevenzione CLS:

<!-- Specifica sempre le dimensioni per i media -->
<img src="photo.webp" width="800" height="600" alt="...">
<video width="1280" height="720"></video>
<iframe width="560" height="315"></iframe>

<!-- Riserva spazio per contenuti dinamici -->
<div style="min-height: 250px;">
  <!-- L'annuncio si caricherà qui senza spostamenti -->
</div>

<!-- Utilizza aspect-ratio per media reattivi -->
<div style="aspect-ratio: 16/9;">
  <img src="..." style="width: 100%; height: 100%; object-fit: cover;">
</div>

Guadagno rapido: Aggiungi attributi width e height espliciti a ogni e sulle tue prime 10 pagine. Questa singola modifica elimina il problema di CLS più comune: immagini che si caricano e spingono il contenuto verso il basso.

2. Ottimizzazione Mobile

Google utilizza l'indicizzazione mobile-first: la tua esperienza mobile È la tua esperienza di ranking. Se il tuo sito non funziona su mobile, non importa quanto sia perfetta la versione desktop.

Checklist di ottimizzazione mobile:

| Elemento | Requisito | Fallimento comune | |----------|-----------|-------------------| | Meta viewport | width=device-width, initial-scale=1 | Mancante del tutto | | Target touch | Minimo 44x44px | Link piccoli, pulsanti affollati | | Dimensione del font | Testo normale minimo 16px | 12px illeggibile su mobile | | Larghezza del contenuto | Niente scorrimento orizzontale | Elementi a larghezza fissa | | Spaziatura per il tap | 8px minimo tra i target | Link adiacenti che si toccano | | Immagini reattive | srcset con dimensioni appropriate | Immagini di dimensioni desktop su mobile |

Modelli di design reattivo:

/* Approccio mobile-first */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Target a prova di tocco */
.button, .link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Tipografia reattiva */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: clamp(1rem, 2vw, 1.125rem); }

/* Nessun overflow orizzontale */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

Segnali SEO mobile che Google controlla:

Testo leggibile senza zoom
Link/pulsanti non troppo vicini insieme
Contenuto che si adatta alla larghezza del viewport (niente scorrimento orizzontale)
Nessun Flash o tecnologie non supportate
Interstitial che non bloccano il contenuto all'ingresso
La pagina si carica velocemente su connessioni 4G/3G

Guadagno rapido: Apri il tuo sito sul tuo telefono. Cerca di cliccare ogni pulsante e link. Se accidentalmente tocchi qualcosa di sbagliato perché i target sono troppo vicini, o se devi pizzicare per ingrandire per leggere il testo, questi sono i tuoi problemi da risolvere.

3. Accessibilità (WCAG)

L'accessibilità non è solo etica, ma è anche un segnale SEO. Gli algoritmi di Google favoriscono siti utilizzabili da chiunque, inclusi utenti con lettori di schermo, navigazione solo da tastiera o disabilità visive. La conformità WCAG (Web Content Accessibility Guidelines) si correla con migliori ranking.

Requisiti critici di accessibilità:

| Elemento | Requisito | Impatto SEO | |----------|-----------|-------------| | Testo alternativo sulle immagini | Testo descrittivo per tutte le immagini significative | Diretto (SEO immagine + accessibilità) | | Gerarchia dei titoli | H1 → H2 → H3 senza saltare | Diretto (struttura dei contenuti) | | Contrasto dei colori | 4.5:1 per testo normale, 3:1 per testo grande | Indiretto (usabilità) | | Navigazione da tastiera | Tutti gli elementi interattivi raggiungibili tramite Tab | Indiretto (usabilità) | | Etichette ARIA | Etichette per icone, pulsanti senza testo | Indiretto (UX lettori di schermo) | | Indicatori di focus | Anello di focus visibile sulla navigazione da tastiera | Indiretto (usabilità) | | Etichette dei moduli | Ogni input ha un associato | Indiretto (usabilità) | | Testo del link | Descrittivo (non "clicca qui") | Diretto (SEO anchor text) |

Processo di testing dell'accessibilità:

Scan automatico — Esegui Lighthouse, axe-core, o WAVE (cattura ~30-50% dei problemi)
Test da tastiera — Naviga l'intero sito usando solo Tab, Enter, Escape
Test lettore di schermo — Usa VoiceOver (Mac) o NVDA (Windows) su pagine chiave
Contrasto dei colori — Controlla tutto il testo contro gli sfondi (utilizza il checker di contrasto delle DevTools)
Test di zoom — Zooma al 200% — tutto funziona ancora?

Correzioni comuni di accessibilità:

<!-- Immagini: testo alternativo descrittivo -->
<img src="chart.png" alt="Grafico a barre che mostra un incremento del 40% nel traffico organico da gennaio a marzo 2026">

<!-- Pulsanti: etichette chiare -->
<button aria-label="Chiudi menu di navigazione">
  <svg>...</svg> <!-- Pulsante solo icona ha bisogno di aria-label -->
</button>

<!-- Moduli: etichette associate -->
<label for="email">Indirizzo email</label>
<input type="email" id="email" name="email" required>

<!-- Link: testo descrittivo -->
<a href="/guide">Leggi la guida SEO completa</a>
<!-- NON: <a href="/guide">Clicca qui</a> -->

<!-- Salta navigazione per utenti da tastiera -->
<a href="#main-content" class="skip-link">Salta al contenuto principale</a>

Guadagno rapido: Esegui Lighthouse sulla tua homepage con la categoria Accessibilità. Risolvi tutto ciò che ha ricevuto un punteggio di "Fallo" per primo: questi sono solitamente testo alternativo mancante, etichette di modulo, e testo con basso contrasto. Queste correzioni richiedono spesso 30 minuti e migliorano il tuo punteggio di oltre 20 punti.

4. Segnali dell'Esperienza della Pagina

Oltre ai Core Web Vitals, Google valuta diversi altri segnali dell'esperienza della pagina che influenzano i ranking.

Fattori dell'esperienza della pagina:

| Segnale | Requisito | Controlla | |---------|-----------|-----------| | HTTPS | Intero sito servito tramite HTTPS | Contenuto misto lo interrompe | | Nessun interstitial invadente | Non bloccare il contenuto all'arrivo | Popup che coprono >30% su mobile | | Navigazione sicura | Nessun malware, phishing, contenuti ingannevoli | Stato di Google Safe Browsing | | Mobile-friendly | Supera il test di compatibilità mobile | Google Mobile-Friendly Test | | Nessuna pubblicità ingannevole | Le pubblicità non mimano il contenuto | Pulsanti di download mascherati |

Linee guida per gli interstitial (cosa è consentito vs. penalizzato):

| Consentito | Penalizzato | |------------|-------------| | Verifica di età (legalmente richiesta) | Popup a schermo intero all'ingresso della pagina | | Consenso dei cookie (legalmente richiesto) | Iscrizione via email che copre l'intero contenuto | | Muri di accesso per contenuti a pagamento | "Scarica la nostra app" che blocca il contenuto | | Piccole bande che utilizzano <30% dello schermo | Timer di conto alla rovescia prima dell'accesso al contenuto | | Dopo che l'utente scorre/interagisce | Prima che l'utente veda qualsiasi contenuto |

Checklist HTTPS:

[ ] Certificato SSL valido e non scaduto
[ ] Tutte le pagine reindirizzano da HTTP → HTTPS (301)
[ ] Nessun contenuto misto (risorse HTTP su pagine HTTPS)
[ ] Header HSTS abilitato (con includeSubDomains)
[ ] I link interni utilizzano HTTPS (non HTTP)
[ ] Sitemap utilizza URL HTTPS
[ ] I tag canonici utilizzano HTTPS

Guadagno rapido: Controlla il contenuto misto: apri la Console delle DevTools sulle tue pagine chiave. Qualsiasi avviso di "Contenuto Misto" significa che stai caricando risorse HTTP su una pagina HTTPS. Aggiorna quegli URL a HTTPS. Questo è uno dei problemi più comuni relativi all'esperienza della pagina.

5. Modelli di Navigazione

Una buona navigazione aiuta sia gli utenti che i motori di ricerca. Gli utenti trovano ciò di cui hanno bisogno rapidamente. I crawler di Google comprendono la gerarchia del tuo sito e distribuiscono efficientemente il PageRank.

Migliori pratiche per la navigazione:

| Modello | Vantaggio | Implementazione | |---------|-----------|-----------------| | Architettura piatta | Pagine entro 3 clic dalla home | Pagine hub, breadcrumb | | Breadcrumbs | Gli utenti sanno dove si trovano | Marcatura schema + sentiero visibile | | Struttura URL logica | Percorsi prevedibili | /category/subcategory/page | | Navigazione nel footer | Pagine secondarie accessibili | Legale, informazioni, contatti, sitemap | | Ricerca interna | Gli utenti trovano contenuti specifici | Casella di ricerca con suggerimenti | | Contenuti correlati | Riduce il bounce, aumenta la profondità | Sezioni "Articoli correlati" |

Architettura ideale del sito:

Homepage (1 clic da tutto ciò che è importante)
├── /prodotti/ (hub di categoria — link a tutti i prodotti)
│   ├── /prodotti/categoria-a/
│   │   ├── /prodotti/categoria-a/prodotto-1
│   │   └── /prodotti/categoria-a/prodotto-2
│   └── /prodotti/categoria-b/
├── /blog/ (hub di contenuti — link a tutti i post)
│   ├── /blog/topic-cluster-1/ (pagina pilastro)
│   │   ├── /blog/subtopic-1a
│   │   └── /blog/subtopic-1b
│   └── /blog/topic-cluster-2/
├── /strumenti/ (pagine utilitarie)
└── /informazioni/ (pagine di fiducia)

Implementazione delle breadcrumb:

<!-- Breadcrumb visibile -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li aria-current="page">Guida SEO Passo 5</li>
  </ol>
</nav>

<!-- Marcatura schema (BreadcrumbList) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
    { "@type": "ListItem", "position": 3, "name": "Guida SEO Passo 5" }
  ]
}
</script>

Bandiere rosse per la navigazione:

Pagine più di 4 clic dalla homepage (troppo profonde)
Nessun breadcrumb (utenti e Google perdono contesto)
Navigazione solo con JavaScript (i crawler potrebbero perdere link)
Pagine orfane (nessun link interno che puntano ad esse)
Mega menu con oltre 200 link (diluisce il valore per link)

Guadagno rapido: Controlla le tue pagine di conversione più importanti: quanti clic ci vogliono dalla homepage? Se più di 3, aggiungi link diretti dalla tua homepage o dai hub di categoria. Ogni clic in più riduce sia le visite degli utenti che la frequenza di scansione.

6. Ottimizzazione Above-the-Fold

Ciò che gli utenti vedono prima di scorrere determina se rimangono o se se ne vanno. I contenuti above-the-fold devono comunicare valore immediatamente e allinearsi con la query di ricerca che li ha portati lì.

Elementi imprescindibili above-the-fold:

| Elemento | Perché | Fallimento comune | |----------|--------|-------------------| | Titolo chiaro (H1) | Conferma la rilevanza per la query | Generico o mancante | | Proposta di valore | Perché dovrebbero rimanere? | Seppellita sotto la piega | | CTA principale | Cosa dovrebbero fare dopo? | Nascosta o poco chiara | | Immagine/media principale | Coinvolgimento visivo | Lento caricamento, causando problemi di LCP | | Segnali di fiducia | Perché dovrebbero fidarsi di te? | Nessun logo, recensioni o credenziali |

Modelli di layout above-the-fold:

Desktop (viewport 1440px):
┌──────────────────────────────────────┐
│ Barra di navigazione                  │
├──────────────────────────────────────┤
│                                      │
│  H1: Titolo chiaro che corrisponde alla query  │
│  Sottotitolo: Proposta di valore     │
│                                      │
│  [Pulsante CTA Principale]          │
│                                      │
│  Segnali di fiducia: loghi, statistiche, badge │
│                                      │
├──────────────────────────────────────┤
│ ↓ Il contenuto continua sotto la piega       │
└──────────────────────────────────────┘

Mobile (viewport 375px):
┌────────────────────┐
│ Nav (hamburger)    │
├────────────────────┤
│                    │
│ H1: Titolo         │
│ (più corto su mobile)│
│                    │
│ [Pulsante CTA]     │
│ (a tutta larghezza, 44px+)│
│                    │
│ Badge di fiducia   │
│                    │
├────────────────────┤
│ ↓ Scorri per di più │
└────────────────────┘

Regole critiche above-the-fold:

L'H1 deve essere visibile senza scorrere (corrisponde alla query di ricerca)
La CTA deve essere visibile senza scorrere (riduce il bounce)
Nessuno spostamento di layout nel contenuto above-the-fold (killer di CLS)
L'immagine principale deve caricarsi rapidamente (solitamente è l'elemento LCP)
Mobile: riduci i contenuti above-the-fold (meno spazio nel viewport)

Guadagno rapido: Fai uno screenshot della tua homepage su mobile (larghezza 375px). È l'H1 visibile? È un pulsante CTA visibile? Puoi capire cosa fa il sito entro 2 secondi? Se una qualsiasi risposta è "no", stai perdendo visitatori prima di farli scorrere.

La Checklist per l'Audit UX

Controlla questo per le tue pagine top:

[ ] LCP sotto 2.5 secondi (immagine principale ottimizzata, CSS critico inline)
[ ] INP sotto 200ms (nessun compito JavaScript lungo che blocca l'interazione)
[ ] CLS sotto 0.1 (tutte le immagini hanno dimensioni, nessun spostamento tardivo)
[ ] Mobile-friendly (target touch 44px, testo 16px+, nessuno scorrimento orizzontale)
[ ] Accessibile (testo alternativo, gerarchia dei titoli, contrasto dei colori, navigazione da tastiera)
[ ] HTTPS ovunque (nessun contenuto misto, HSTS abilitato)
[ ] Nessun interstitial invadente (overlay di consenso OK, popup che bloccano contenuto no)
[ ] Breadcrumbs presenti (con schema BreadcrumbList)
[ ] Profondità di navigazione sotto 4 clic verso qualsiasi pagina importante
[ ] Ottimizzato above-the-fold (H1 visibile, CTA visibile, LCP veloce)

Come LANGR Scansiona il Tuo UX

I moduli di scansione relazionati all'UX di LANGR includono:

Modulo Core Web Vitals — Misura LCP, INP, CLS dal Chrome User Experience Report (dati reali degli utenti)
Modulo PageSpeed — Audit completo delle prestazioni Lighthouse con punteggi per mobile e desktop
Modulo Mobile — Configurazione del viewport, dimensioni dei target touch, leggibilità del testo
Modulo Accessibilità — Verifiche di conformità WCAG, utilizzo ARIA, contrasto dei colori
Modulo Layout Scan — Valutazione AI basata su layout mobile e desktop
Modulo Page Experience — Rilevamento di interstitial, stato HTTPS, navigazione sicura

Questi moduli vengono eseguiti in ogni scansione, dandoti un quadro completo di come i visitatori sperimentano il tuo sito — e esattamente cosa correggere per migliorare i ranking.

Errori Comuni di UX (Classificati per Impatto)

Ignorare mobile — Più del 60% delle ricerche è mobile; mobile rotto = ranking rotto
Immagini non ottimizzate — La causa n. 1 di un LCP lento (e spesso la correzione più semplice)
Nessuna dimensione esplicita delle immagini — Gli spostamenti di layout distruggono i punteggi CLS
Bloat di script di terze parti — Widget di chat, analisi, pubblicità bloccano l'INP
Mancanza di basi di accessibilità — Nessun testo alternativo, nessuna gerarchia dei titoli, nessun contrasto
Interstitial che bloccano contenuti — Popup a schermo intero prima che gli utenti vedano il contenuto
Architettura del sito profonda — Pagine importanti sepolte a più di 5 clic dalla home
Nessun valore above-the-fold — Gli utenti non possono capire cosa fa il sito senza scorrere

Cosa Fare Dopo?

Passo 6: Monitoraggio & Ranking — Non puoi migliorare ciò che non misuri. Posizioni delle parole chiave, tracciamento dei punteggi, rapporti di cambiamento e monitoraggio dell'uptime.

Questa guida fa parte della serie SEO in 13 passi di LANGR. Esegui un audit gratuito per vedere a che punto si trova il tuo sito in tutte le 13 discipline.

Guida SEO Passo 5: UX / Esperienza Utente — Come L'Esperienza dei Visitatori Influenza i Ranking