Tag img, attributo alt per la SEO, ottimizzare le immagini

Vedremo oggi come usare il tag img per inserire immagini in una pagina web.
Innanzitutto occorre dire che le immagini di un sito web costituiscono una parte importante per la SEO.

Inoltre è opportuno dare alle immagini nomi inerenti gli argomenti trattati, così da essere indicizzate anche da Google come immagini.

Se ad esempio andate su Google nella sezione immagini e cercate frazioni Scratch, vedrete che ci sono tante immagini in prima posizione del sito coding creativo, questo perché sono state opportunamente create con nomi idonei.

In sostanza bisogna raccontare al motore di ricerca che cosa si vuole comunicare con quell’immagine.

Ma il nome delle immagini non è l’unica cosa importante per la SEO, andando avanti nella guida scopriremo cosa inserire per essere apprezzati da Google.

Formato per le immagini di una pagina web

Innanzitutto conosciamo i formati delle immagini che si possono inserire nel nostro sito web.
Sono principalmente tre:

Banner Pubblicitario

gif – formato di immagini che include al massimo 256 colori, viene utilizzato principalmente per le immagini animate, in altri casi infatti si preferiscono formati che hanno una quantità di colori molto più elevata.

jpeg – è il formato più conosciuto e utilizzato per il web e per le fotografie digitali.

png – è il formato utilizzato soprattutto quando vogliamo inserire delle immagini con sfondo trasparente ed è un formato che garantisce un’alta qualità delle immagini.

Quindi scegliete il formato in base alle vostre esigenze.

Le immagini non devono essere troppo pesanti, ma devono essere dimensionate tanto da riuscire a mantenere una certa qualità.
Programmi come Adobe Photoshop o Gimp (free) vi consentono di salvare le immagini per il web. (Nella prossima guida sui programmi di foto-ritocco vi spiegherò come fare).

In alternativa esistono altri programmi tipo TinyPNG e JPEGmini che consentono di comprimere le immagini direttamente online.

È consigliabile non superare i 70 – 80 kB per immagine se si vuole avere una buona resa della pagina.

Banner pubblicitario

Ricordate che un’immagine troppo pesante appesantisce la pagina e penalizza il vostro sito per la SEO.

Tag img per inserire un’immagine in una pagina web

Adesso vediamo quale tag permette di inserire un’immagine in una pagina web.

Il tag per l’inserimento delle immagini è <img> ed è un tag che non ha bisogno di chiusura.

Attributo src

L’attributo src deve essere sempre presente perché è quello che specifica il percorso dell’immagine.

Ad esempio: <img src=”frazioni_scratch.jpg”>

Attributo alt del tag img

Anche l’attributo alt deve essere sempre presente, se non lo inseriamo l’immagine si vedrà lo stesso, ma questo attributo è importantissimo per la SEO.

In definitiva l’attributo alt è l’elemento che aiuta i motori di ricerca a identificare l’immagine grazie alla presenza di una o più keywords.

Quindi ad esempio nel caso delle frazioni di Scratch inserisco questo tag:

Facciamo un esempio completo:

<h1>Coding Creativo<h1>
<h2>Scratch</h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è molto intuitiva e semplice da usare
<br>Sul sito Coding Creativo troverete tanti esempi ed esercizi su scratch.</p>
<br><br>
<p>Alcuni esempi realizzati con scratch: </p>
<p><img src="frazioni_scratch.jpg" alt="frazioni con scratch"></p>
<p><img src="tabellina_scratch.jpg" alt="tabelline con scratch"></p>

Attenzione in questo caso le immagini si trovano nella stessa cartella della nostra pagina html.

Sarebbe opportuno creare una cartella, ad esempio di nome img, che contiene tutte le immagini e quindi, dopo aver fatto questa operazione, bisognerà cambiare il percorso:

<p><img src="img/frazioni_scratch.jpg" alt="frazioni con scratch"></p>
<p><img src="img/tabellina_scratch.jpg" alt="tabelline con scratch"></p>

Attributi width ed height del tag img

Width ed height sono gli attributi che indicano la larghezza e l’altezza dell’immagine, non sono obbligatori e se li utilizzate comunque indicate le dimensioni esatte dell’immagine in uso, perché non è questo infatti il modo per scalarle, ma come vi dicevo prima con i programmi appositi.

<img src="img/frazioni_scratch.jpg" alt="frazioni con scratch" width="260" height="120">

Si può utilizzare anche solo width per indicare la larghezza, in tal caso l’altezza sarà presa in automatico.

Il valore espresso è in pixel.

Attributo title del tag img

L’attributo title del tag img è quello che si visualizza quando con il mouse ci avviciniamo all’immagine.

Come fattore di indicizzazione è meno rilevante, ma inserirlo è buona norma.

<img src="img/frazioni_scratch.jpg" alt="frazioni con scratch" title="frazioni con scratch" width="260" height="120">

Tag semantici figure e figcaption

Con l’avvento dell’HTML 5 sono stati introdotti altri due tag semantici:

<figure>
  <img src="img/frazioni_scratch.jpg" alt="frazioni con scratch">
  <figcaption>Le frazioni con scratch</figcaption>
</figure>

L’elemento <figure> consente di rappresentare un insieme di elementi composti da immagini e testo, infatti all’interno si può includere <figcaption> necessario se si vuole inserire una didascalia. Si possono anche inserire più immagini all’interno di <figure>.

L’elemento figcaption non è obbligatorio.

Il mio consiglio è quello di utilizzare in ogni caso <figure>.

Vediamo un esempio:

<figure>
  <img src="img/frazioni_scratch.jpg" alt="frazioni con scratch">
  <img src="img/tabellina_scratch.jpg" alt="tabelline con scratch">
  <figcaption>Le frazioni con scratch</figcaption>
</figure>