Buone pratiche per SEO e Accessibilità

Immagini

Se l'immagine è completamente vettoriale (icona, grafico, illustrazione, ... ) meglio salvarla come .svg

Se l'immagine è bitmap oppure un ibrido bitmap-vettoriale, sarebbe ottimale esportarla come .webp – si può esportare .webp da Photoshop passando da file / Salva una copia / Webp oppure da Figma tramite dei plugin.

Alt text

Cos'è:
L'alt text (testo alternativo) è una breve descrizione testuale associata a un'immagine nel codice HTML di una pagina web. Serve a descrivere il contenuto visivo per persone ipovedenti tramite screen reader e ai motori di ricerca per comprendere l'immagine.

Regole pratiche di compilazione e lunghezza:

• I tag alt devono essere descrittivi ma concisi (sotto i 125 caratteri)

• Inserirlo direttamente nel file manager!!!

• No punteggiatura (screen reader leggono tutto d’un fiato)

• A seconda del tipo di immagine, l'approccio cambia:

  • Foto: Descrivere in modo oggettivo cosa si vede (es. alt="Persona al supermercato").
  • Grafici o Schemi: Scrivete un alt brevissimo per identificare l'immagine (es. alt="Dashboard social") e inserite i dati completi o la spiegazione analitica direttamente nel corpo del testo dell'articolo.
  • Immagine decorativa: Lasciare il campo “alt” vuoto (HS spesso lascia il nome dell’immagine come alt, bisogna ricordarsi di rimuoverlo)

Se c’è una KW per cui si vuole ottimizzare la pagina, integrarla in modo naturale nel breve testo dell’alt text. 

Gerarchie dei titoli

Sappiamo che per la SEO e l'accessibilità è molto importante la gerarchia dei titoli (headings).

Struttura corretta dei titoli:

• H1 → Titolo principale della pagina (uno solo)

• H2 → Sezioni principali

• H3 → Sotto-sezioni

• H4–H6 → Approfondimenti

• Sulle CTA non mettiamo gli Headings

👉 Seguire sempre un ordine gerarchico (no salti da H2 a H4)

Best practice SEO:

• Inserire keyword principali in H1 e H2
• Mantenere titoli chiari, descrittivi e naturali
• Evitare duplicazioni di H1 nella stessa pagina

Lo strumento di accessibilità di POWER, visibile nella preview di pagina, ci aiuta a identificare dove c'è un problema di gerarchia. 

Per risolvere questi problemi, occorre intervenire con un po' di codice. 

• aggiungere <h3></h3>, o <h4></h4>, e così via, se si vuole aggiungere un titolo. Questo va fatto quando il titolo ha dei contenuti particolarmente rilevanti per la SEO
• aggiungere <span></span> oppure aggiungere lo stile direttamente del <p></p> quando il contenuto non è così rilevante da avere keyword. 

Di seguito, una serie di stili usati frequentemente.  

Rendi il testo simile allo stile di un H3

Rendi il testo simile allo stile di un H4

Rendi il testo simile allo stile di un Intro Title

Lazy Load

1. Nelle impostazioni del tema, abilitare il Lazy Load

2. Nelle pagine, abilitare "is in a viewport" nel primo (o nei primi) elementi di pagina. Questa spunta si trova all'interno del modulo, tutto in fondo (dopo Custom Class). 

Aria label

L’aria label è la descrizione per gli elementi senza testo → aiutano a chiarire il significato di elementi non testuali (icone, bottoni, link) 

Best practice:

• Usare aria-label per descrivere elementi senza testo (es. Icone che portano all’azione)

• Scrivere label chiare, concise e descrittive (es. Apri menù)

Esempi corretti:

• Menù hamburger → "Apri menu"

• Icona carrello → “vai al carrello”

• Icona ricerca → “Cerca nel sito"

Esempi errati: 

• Menù hamburger → "Button"

• Icona carrello → “CTA”

Anchor text

Testo cliccabile di un link che aiuta utenti e motori di ricerca a capire la destinazione della pagina

Best practice:

• Usare anchor descrittivi e naturali

• Integrare keyword senza forzature

• Variare gli anchor text (evitare ripetizioni)

• Inserire link in modo coerente con il contenuto

Do:

• Scopri le nostre strategie di content marketing

• Approfondisci la guida su SEO on-page

Don't:

• Anchor generici (“clicca qui”) senza contesto

• Keyword stuffing

• Anchor non coerenti con la pagina di destinazione

• Uso eccessivo della stessa keyword

Dati strutturati

Sono informazioni aggiunte al codice HTML della pagina che aiutano i motori di ricerca a capire il contenuto (non solo a leggerlo). Sono basati su standard come Schema.org (= vocabolario condiviso per scrivere dati).

Perché sono importanti per la SEO

• Trasformano contenuti “leggibili” in contenuti “comprensibili” per Google
• Abilitano rich results (stelle, FAQ, breadcrumb, ecc.)

✔ + impression

✔ + traffico qualificato → sito mostrato in modo diverso rispetto al link blu

Le tipologie di dati strutturati

✔ Come aggiugerli

Se un sito è su un CMS la cosa migliore è usare un plugin che inserisca un dato strutturato automaticamente sul contenuto, altrimenti, possiamo inserire il dato nell’HTML tramite una particolare sintassi.

Come? → Con AI + lo strumento di test dei rich results + GSC