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

Alt text non necessario = meglio lasciare vuoto
Quando inseriamo delle icone di fianco ad un titoletto, l'alt text dell'icona non è necessario. Questo perché la persona non-vedente sentirebbe due volte la stessa cosa, e non sarebbe per lui di nessun valore aggiunto. Questo vale anche per le immagini decorative: l'alt text non è necessario. 

Alt text necessario
Per tutte le immagini che invece forniscono delle informazioni, un'ambientazione, un contesto, allora in questo caso occorre inserire l'alt text. Deve essere breve e chiaro, descrittivo ma conciso, ed eventualmente descrivere la conclusione che la persona vedente trae guardando l'immagine. 

Gerarchie dei titoli

Sappiamo che per la SEO e l'accessibilità è molto importante la gerarchia dei titoli (headings). 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 Into 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).