Come inserire i tag Alt e Title automaticamente nelle immagini di Blogger.

Inserire in modo automatico i tag Alt e Title nelle immagini di Blogger già pubblicate o che lo saranno inserendo un javascript nel template.

Google qualche tempo fa rilasciò le linee guida per l'ottimizzazione SEO delle pagine web con le istruzioni di come debba essere il titolo, il corpo del post, i link interni e esterni e come debbono essere inserite le immagini. Relativamente alle foto pubblicate negli articoli rivestono particolare importanza il tag Alt e Title. Soprattutto il primo è considerato essenziale dal motore di ricerca per antonomasia in quanto mostra del testo alternativo quando il browser non riesce a caricare la foto.

In effetti Alt rappresenta proprio l'acronimo di Alternative Text. Questi tag nell'HTML si inseriscono in modo molto semplice insieme all'URL della immagine

<img src="URL_IMMAGINE" title="titolo_immagine" alt="testo_alternativo"/>

Quello che viene inserito nel tag Title viene visualizzato dal lettore quando passa con il mouse sopra alla foto mentre il testo inserito nel tag Alt viene visualizzato nel browser quando per qualsiasi ragione non viene caricata l'immagine. Questi tag possono essere inseriti tramite Windows Live Writer mediante il plugin Sharper Photo oppure direttamente nell'Editor di Blogger. Si seleziona l'immagine, si clicca su Proprietà quindi si inserisce il testo dei due tag che può anche essere lo stesso

 

Dopo avere digitato il testo dei due tag e aver cliccato su OK se andiamo su HTML per visualizzare il codice vedremo che in effetti sono stati inseriti i tag Alt e Title.

Cosa fare se abbiamo un blog con centinaia di post e centinaia di immagini già pubblicate per metterlo in regola con le linee guida di Google?.  La cosa più giusta sarebbe quella di riaprire tutti i post e inserire i tag Title e Alt in tutte le immagini per poi ripubblicarli.

In alternativa si può inserire un piccolo javascript nel Modello che applichi in modo automatico tale tag a tutte le immagini già pubblicate e a quelle che lo saranno anche in futuro. Si va su Modello > Modifica HTML e con Ctrl+F si cerca la riga </body>. Subito sopra si incolla questo codice

<script src='http://code.jquery.com/jquery-latest.js'></script> 
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

Si salva il modello. Se nel nostro template è già presente la libreria JQuery si può fare a meno di incollare la riga evidenziata di giallo. Per rendersi conto di come questo script inserisca i tag Alt e Title basterà passare con il mouse sopra a una qualsiasi immagine del blog

Il testo visualizzato non sarà altro che il nome del file della immagine che è stata caricata oppure la parte finale dell'URL se fossa stata pubblicata tramite il suo indirizzo web.