Pubblicato il 11/02/14e aggiornato il

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

tag-alt-title-immagine 

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

tag-alt-title

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.




24 commenti :

  1. Grazie mille :D
    Ho un blog con un sacco di foto (in un post ho sfiorato la cifra a due zeri!) e non avevo mai avuto il coraggio di affrontare il problema dei tag alt e title :D

    RispondiElimina
    Risposte
    1. PS: Posso permettermi di suggerire una piccola miglioria? In questo modo i tooltip compaiono anche sugli elementi del template (tipo l'header o eventuali pulsanti e banner) e sono un pelino antiestetici.
      Aggiungendo un tag condizionale finiscono solo all'interno dei post, lasciando la home pulita :D

      Elimina
  2. Quella di usare i tag condizionali è certamente una buona idea
    @#

    RispondiElimina
  3. Quindi inserire questo frammento nel modello HTML in teoria dovrebbe aumentare l'ottimizzazione Google del blog?

    RispondiElimina
  4. Se non sono stati inseriti i tag Alt è così
    @#

    RispondiElimina
  5. Ciao Ernesto,

    ti seguo da molto ma è un po' di tempo che per problemi non avevo più potuto aggiornare il mio blog e adesso sto cercando di rimetterlo in sesto... volevo aggiungere questa funzione del tag alt ma non riesco a trovare il body ... ho notato che negli ultimi mesi è tutto completamente diverso il "modifica html" ... ho visto qualche altro post in cui spieghi che il /body non c'è più ma è stato sostituito da un altro codice, ma non trovo neanche quello ... mi puoi aiutare?

    facendo ctrl+ f non trovo ne <body ne <body expr:class= .... dove devo inserire i lcodice che hai riportato sopra????

    grazie

    RispondiElimina
    Risposte
    1. Cercare il codice nel nuovo modello è più semplice di come sembri. Ci vuole però un po' di attenzione. Leggiti questi due post e se hai ancora dubbi guardati i video tutorial
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
    2. Hai perfettamente ragione, sono io che non ho fatto abbastanza attenzione alle tue istruzioni (chiarissime tra l'altro) ... entrato in modifica html, non cliccavo su Modifica Modello .... come sempre gentilissimo!!! sei la mia salvezza :)

      Elimina
  6. Ciao Ernesto, ho bisogno di una mano!
    ti spiego... la settimana scorsa volevo aggiungere il tag tile del mio blog così nella stringa title></title ho sostituito "data:blog.pageTitle/" con il nome del blog, successivamente volevo condividere un post su facebook, ma , mentre prima appariva il nome del blog, il titolo del post e l'immagine del post, adesso appare iltitolo del blog, l'immagine di testo del blog e il metatag description! ho provato a tornare come era prima ma n on ci sono riuscito!tu fhai qualche idea?grazie

    RispondiElimina
  7. Spero tu abbia salvato il modello e lo abbia archiviato in una cartella per ritornare indietro. In caso contrario dovresti rimettere il tag che hai tolto ma mi rendo conto che può essere difficile. Prova a cercare il nome del blog con Ctrl+F per cercare il punto preciso
    @#

    RispondiElimina
    Risposte
    1. no, purtroppo nn l'ho salvato! facendo la ricerca del nome del blog ho trovato qst stringa "b:widget id='Header1' locked='false' title='CERCA UN LAVORO (Intestazione)' type='Header'", posso rimediare in qualche modo?

      Elimina
    2. Nel commento numero 7 mi hai detto che hai sostituito il tag data:blog.pageTitle
      con il titolo del blog quindi oltre a quella che hai citato si dovrebbe per forza essere un'altra occorrenza. Vai su Invio per cercarle tutte. Forse non hai messo proprio il nome del blog ma lo hai leggermente cambiato
      @#

      Elimina
    3. Ciao Ernesto, alla fine ho risolto! ho lasciato sostituito il titolo modificato con il tag data:blog.pageTitle edopo un giorno si è risolto il problema, solo cheadesso è scomparsa l'annuncio adsense all'interno del post!
      ma cosa sarà successo?

      Elimina
    4. Per rispondere ci vorrebbero delle doti divinatorie :)
      @#

      Elimina
  8. Ciao! Scusa una domanda, ma per far sì che le immagini compaiano nei motori di ricerca quando vengono digitate determinate parole, basta inserire i terimini in "nome dell'immagine" separati da uno spazio? O vanno separati da una virgola come quando si inseriscono i tag da altre parti?

    RispondiElimina
    Risposte
    1. Questa è una domanda a cui neppure gli esperti SEO sono in grado di dare una risposta certa. Ti posso dire che io separò le parole chiave con un trattino - . Non con un underscore _ perché potrebbe essere interpretato come operatore booleano e quindi mostrare l'immagine a chi ricerchi contemporaneamente tutte le parole chiave inserite. Sono al cellulare e quindi non posso darti ulteriori informazioni ma ho scritto molti post sul tema. Puoi provare a fare delle ricerche con le queries alt title immagini guida SEO ecc.
      @#

      Elimina
    2. Questa è una domanda a cui neppure gli esperti SEO sono in grado di dare una risposta certa. Ti posso dire che io separò le parole chiave con un trattino - . Non con un underscore _ perché potrebbe essere interpretato come operatore booleano e quindi mostrare l'immagine a chi ricerchi contemporaneamente tutte le parole chiave inserite. Sono al cellulare e quindi non posso darti ulteriori informazioni ma ho scritto molti post sul tema. Puoi provare a fare delle ricerche con le queries alt title immagini guida SEO ecc.
      @#

      Elimina
  9. Salve Ernesto , grazie per l'articolo.
    Io di immagini nel mio blog di guadagno http://infoutili.blogspot.it/ ne ho poche e vorrei inserire l'alt sia alle immagini che ai banner che l'analisi mi da assenti di tale descrizione. Come faccio singolarmente? Se modifico i banner html non funzionano piu'. Grazie ancora

    RispondiElimina
  10. Salve Ernesto , grazie per l'articolo.
    Io di immagini nel mio blog di guadagno ne ho poche e vorrei inserire l'alt sia alle immagini che ai banner che l'analisi mi da assenti di tale descrizione. Come faccio singolarmente? Se modifico i banner html non funzionano piu'. Grazie ancora

    RispondiElimina
    Risposte
    1. Devi inserire il tag alt='nome-immagine' manualmente andando sulla modalità HTML dei singoli post. Per i banner se hai difficoltà a modificare il codice lascia pure che il danno è praticamente inesistente
      @#

      Elimina
  11. Grazie per la risposta Ernesto so che devo accedere alla versione html del post ma non trovo la dicitura alt ne nei banner che nelle semplici immagini.......sbaglio qualcosa?

    RispondiElimina
  12. Il commento non mi permette di inserire lo script

    RispondiElimina
    Risposte
    1. @# Non c'è il tag Alt. Per le immagini devi andare su Proprietà. Non so a che banner ti riferisci. Se c'è il codice di una immagine come questo
      <img src='URL_IMMAGINE' />
      devi inserire i tag alt e title in questo modo
      <img src='URL_IMMAGINE' alt='nome immagine' title='titolo immagine' />

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.