Gestione immagini in ottica Seo
Le immagini sono una parte importantissima di ogni sito. Creano un ambiente piacevole e spiegano visivamente ciò che si vuole far capire all’utente. Ma è anche necessario che le immagini si traducano anche in veicolo Seo. Molte ricerche si effettuano proprio attraverso le immagini. Quindi è molto importante gestirle correttamente.
La prima cosa da valutare è se l’immagine scelta è adatta all’informazione che si vuole veicolare. Utilizzare un’immagine di un tramonto per spiegare un testo che parla di vendite di scarpe non è il massimo! Molte bene l’utilizzo di icone per descrivere piccoli elenchi o capitoli di spiegazioni: rende bene l’idea di quello che si scrive e facilita la comprensione del testo.
La dimensione dell’immagine
Non bisogna dimenticare che sul web la velocità è un fattore che conta molto. E le immagini pesano e rallentano notevolmente un sito, quindi è opportuno che siano ridimensionate nelle dimensioni giuste, adatte alla pagina e inserite in un ambiente responsive.
Mai caricare immagini di dimensioni superiori al contenuto della pagina o allo spazio loro dedicato.
Risoluzione dell’immagine
Come abbiamo già detto, la velocità sul web è importante. Quindi una corretta risoluzione delle immagini è necessaria. La maggior parte dei programmi fotografici comprime automaticamente la risoluzione dell’immagine in una dimensione “web-friendly” (72 dpi e 92 dpi). Si può farlo anche in Photoshop con l’opzione “Salva per Web”.
Un consiglio per tutti: mai caricare foto o immagini rilasciate tramite WhatsApp o qualche altro Social media: perdono qualità e risoluzione, oltre ad avere nomi innominabili.
Formato immagine
Ecco i tipi di file di immagine più comuni, che sono supportati in tutti i browser (Chrome, Edge, Firefox, Safari, Opera):
Negli ultimi tempi si è andato via via sviluppando l’utilizzo di un nuovo formato per il web: le immagini WebP. Convertire un’immagine in WebP può ridurre le sue dimensioni di circa il 25-35% senza alcuna perdita di qualità, velocizzando notevolmente il caricamento di una pagina. Ma attualmente non tutti i browser supportano questo formato.
Nome file immagine
Il nome di un file di immagine è molto importante dal punto di vista Seo. La ricerca per immmagini è correlata proprio al nome dell’immagine e alla vicinanza con un testo relativo proprio al suo nome. Il nome deve essere comprensibile, relativo al contesto e non deve contenere spazi o caratteri speciali. L’uso degli spazi in qualunque nome file si traduce con: %, che non è il massimo per il Seo.
E mai utilizzare caratteri speciali come “/”, “\”, “*”, “$”, “&”, “)” o uno o più punti prima dell’estensione.
Esempio:
<img src="nome-immagine.jpg" />
Testo alternativo all’immagine
“ALT” è il testo alternativo dell’immagine e di solito contiene un testo descrittivo dell’immagine. Non è visibile sul sito ma è molto importante il suo utilizzo soprattutto per quei browser (come gli screen reader) che non supportano l’uso delle immagini. Infatti chi ha le immagini disabilitate vede uno spazio vuoto al posto della foto, ma se si è inserito un “alt” esso compare al posto dell’immagine.
Secondo le linee guida sull’accessibilità del W3C è importante perchè rende una pagina html valida. E questo rende la pagina stessa attrattiva per i motori di ricerca. Il tag “alt” è molto importante per il Seo. Quindi attenzione al suo uso. I motori di ricerca cercano sempre questo attributo dell’immagine per il posizionamento nelle ricerche dei media.
Esempio:
<img src="immagine.jpg" alt="Questo è il testo alternativo della foto" />
Titolo dell’immagine
Il tag “title” viene utilizzate per dare ulteriori informazioni su di una immagine. Compare quando si passa il mouse sopra. Basta di solito un titolo breve e accattivante.
Esempio:
<img title="Questo è il titolo della foto" src="immagine.jpg" />
Didascalie delle immagini
La Caption o didascalia di un’immagine è un piccolo testo che una volta inserito viene visualizzato sotto l’immagine. Di solito si usa per l’attribuzione dell’autore o per una breve descrizione dell’immagine. Non dovrebbe mai essere troppo lungo.
Esempio:
<figure><figcaption>La foto è di mia proprietà</figcaption><img src="immagine.jpg" /></figure>
Collegamenti alle immagini
Per l’ottimizzazione Seo un link sulle immagini è piuttosto importante. Va linkato sempre ad un approfondimento sull’argomento relativo al nome dell’immagine. Anche qui va inserito il tag “title” del link: una condizione assolutamente necessaria per un buon Seo.
Esempio:
<a href="nome-pagina.html"><img src="immagine.jpg" /></a>