Esperto in SEO tecnico, Accessibilità (WCAG 2.1+) e Web Performance Optimization per garantire score 100/100 su Google Insights.
🚀 Esperto SEO & Accessibilità (Google Insights 100/100)
Questa skill definisce gli standard rigorosi per lo sviluppo di applicizoni web performanti, accessibili e ottimizzate per i motori di ricerca in contesti multilingua.
Ogni componente dell'interfaccia utente (UI) e ogni pagina (Route) deve rispettare TASSATIVAMENTE queste direttive.
Il tuo obiettivo è il punteggio perfetto (100) su Mobile e Desktop.
Regole Core Web Vitals (CWV):
LCP (Largest Contentful Paint): < 2.5s. Precarica le risorse critiche (<link rel="preload">). Ottimizza le immagini above-the-fold.
FID (First Input Delay) / INP (Interaction to Next Paint): < 100ms. Minimizza il blocco del Main Thread. Usa Web Workers per calcoli pesanti.
CLS (Cumulative Layout Shift): < 0.1. Definisci SEMPRE width e height per immagini e iframe. Riserva spazio per banner/ads.
Ottimizzazione Risorse:
Immagini: Usa formati moderni (WebP, AVIF). Implementa il Lazy Loading nativo (loading="lazy") per immagini non critiche. Usa <picture> per responsive images.
Eccezione: L'immagine LCP non deve mai essere lazy-loaded.
Font: Usa font-display: swap per evitare FOIT (Flash of Invisible Text). Preconnetti (preconnect) ai domini dei font esterni.
CSS/JS: Minifica, comprimi (Brotli/Gzip) e differisci il caricamento (defer per JS non critico). Rimuovi CSS non utilizzato (PurgeCSS/Tailwind).
2. ♿ Accessibilità (WCAG 2.1 AA/AAA)
Il web deve essere accessibile a tutti, inclusi utenti con disabilità visive, motorie o cognitive.
Semantic HTML:
Usa i tag HTML5 corretti (<header>, <nav>, <main>, <article>, <aside>, <footer>) invece di generici <div>.
Intestazioni: Rispetta la gerarchia rigorosa (h1 -> h2 -> h3). UN SOLO <h1> per pagina.
Navigazione e Interazione:
Tastiera: Tutto deve essere navigabile via tastiera. Il focus deve essere sempre visibile (outline).
Skip Links: Implementa "Salta al contenuto principale" come primo elemento del DOM.
Modali/Dialog: Gestisci il focus trapping (il focus deve rimanere dentro la modale aperta) e la chiusura con ESC.
ARIA e Contrasto:
Usa aria-label, aria-labelledby, aria-describedby solo quando il testo visibile non è sufficiente.
Assicurati che il contrasto colore testo/sfondo sia almeno 4.5:1 (AA) o 7:1 (AAA).
Le immagini decorative devono avere alt="". Tutte le immagini informative devono avere alt descrittivo.
3. 🌍 Multilingua e Internazionalizzazione (i18n)
L'architettura deve supportare nativamente più lingue senza penalizzare la SEO.
URL: Struttura URL chiara per lingua (es. /it/chi-siamo, /en/about-us).
Hreflang: Implementa i tag <link rel="alternate" hreflang="x" href="y" /> per tutte le versioni linguistiche della pagina, inclusa l'auto-referenziale. Implementa x-default.
Meta Tags Localizzati:title e meta description devono essere tradotti e ottimizzati per le keyword locali.
Attributo lang: Il tag <html> deve avere l'attributo lang corretto per ogni pagina.
4. 🔍 SEO Tecnico Avanzato
Sitemap.xml Dinamica:
La sitemap deve aggiornarsi automaticamente quando vengono aggiunti nuovi contenuti.
Deve includere le date di ultima modifica (<lastmod>) e la frequenza di aggiornamento.
Deve includere le varianti linguistiche (alternates).
Robots.txt:
Configurazione chiara per permettere il crawling delle risorse utili e bloccare quelle sensibili (es. admin, api).
Ogni pagina deve avere un tag <link rel="canonical"> che punta alla versione preferita dell'URL per evitare contenuti duplicati (es. parametri query non necessari).
Absolute URLs Only: I tag canonical e hreflang devono SEMPRE contenere URL assoluti.
Safety Fallbacks: Le variabili d'ambiente usate per generare URL SEO (es. PUBLIC_SITE_URL) devono SEMPRE avere un fallback di sicurezza e un controllo che verifichi che il valore non sia la stringa "undefined".
5. 📱 Social Graph e Condivisione
Ogni pagina deve essere pronta per la condivisione sui social.
Open Graph (Facebook/LinkedIn/WhatsApp):
og:title (ottimizzato, < 60 car.)
og:description (accattivante, < 160 car.)
og:image (immagine di qualità, 1200x630px)
og:url (URL canonico)
og:type (website, article, etc.)
og:locale e og:locale:alternate
Twitter Cards:
twitter:card (summary_large_image)
twitter:title, twitter:description, twitter:image
Checklist di Verifica (Prima del Deploy):
Lighthouse Score: 100/100 (Performance, Accessibility, Best Practices, SEO).
Validazione HTML: Zero errori W3C.
Hreflang: Correttamente implementati e reciproci.
Sitemap: Aggiornata e valida.
Social Preview: Testare come appare il link su Telegram/Slack/FB.
Tab Navigation: Testare l'intera pagina usando solo TAB e INVIO.
Nota: Non accettare compromessi sulla velocità. Se una libreria esterna impatta negativamente il LCP o il TBT, cerca un'alternativa più leggera o implementala server-side.
