Oggi voglio riprendere un discorso già trattato diverse volte durante il corso di Blogging ma che sembra continui ad essere un mistero per alcune di voi nonché una domanda che ricorre spesso nella mia inbox “Come posso collegare una immagine a una pagina web?”
Ad alcune sembrerà una stupidaggine, altre blogger purtroppo ancora non sanno inserire un semplice link in un post e si limitano ad inserirlo nel testo {molto anti estetico!}. E poi vi assicuro che quando ho iniziato a scrivere il blog qualche anno fa e ho scoperto le Image Links, i blog italiani non mi sono stati molto d’aiuto a trovare la risposta {forse perché ponevo male la domanda al motore di ricerca?}.
Quindi, chi ha familiarità con l’ HTML non proceda nella lettura, questo post non è per voi. Per le nuove blogger e per chi è ancora in dubbio, saper linkare un’immagine ad un indirizzo web con una Image Link è utilissimo per molte cose come:
- Creare una galleria di post o di tutorial- Collegare le icone sociali ai nostri profili- Smettere di usare il gadget Immagini di Blogger e sostituirlo una volta per tutte con un gadget HTML- Usare un unico widget per caricare uno sotto l’altro tutti i banner di giveaway, blog amici, sponsor eccetta, magari tutti delle stesse dimensioni e centrati o allineati tutti allo stesso modo.
Questo è il codice html per una Image Link di base:
<a href= "http://www.iltuourl.com"><img src="http://www.codiceimmagine.jpg"></a>
Se usiamo questo codice, quando passiamo il mouse sopra all’immagine “linkata” il cursore diventerà una manina e se clicchiamo l’immagine verremo portati su un’altra pagina web.
Ma che fare se vogliamo che il nostro lettore rimanga sulla pagina corrente e che il link si apra in una nuova finestra?
Come far aprire il link in una nuova finestra o tab
Se usiamo questo codice, facciamo aprire il link in una nuova pagina mentre l’utente rimane nella pagina che già sta visitando, molto utile quando linkiamo le icone sociali con i nostri profili sociali. Useremo un codice come il seguente:
<a href="http://www.iltuourl.com" target=“_blank”> <img src="http://www.codiceimmagine.jpg"> </a>
L’attributo ALT per le parole chiave/descrizione
Poiché noi blogger scriviamo non solo per i nostri lettori ma anche per i motori di ricerca {vogliamo o no che i nostri contenuti vengano trovati da chi effettua una ricerca pertinente al nostro campo?}, sarà utile aggiungere l’attributo ALT alle nostre foto.
ALT consiste in un testo alternativo che descrive l’immagine, come per esempio le hotkeys usate nei motori di ricerca. Provate ad immaginare quando cercate una foto in Google.it. Se nessuno usasse la descrizione, non uscirebbe alcuna foto tra i risultati!
E a questo punto mi sento in dovere di sottilineare la sua importanza perché molte di voi usano ancora le foto con i nomi dati dalla macchinetta fotografica. E lo noto quando scarico una foto dai vostri blog per farvi pubblicità sui social o per segnalare un progetto dei linky party. Quindi ricordatevi di rinominare le vostre foto prima di caricarle online, mi raccomando!
<a href="http://www.iltuourl.com" target="_blank"><img src="http://www.codiceimmagine.jpg" alt= "descrizione dell’immagine/parole chiave"></a>
Come Sfruttare i codici immagine forniti da Flickr
Abbiamo fatto 30 e facciamo 31... vi ricordate quando abbiamo parlato di come usare Flickr per non far pesare le nostre foto sul blog? Trovate tutto in quest’articolo: Flickr - Come Usare i Codici Html delle Immagini
Ecco, Flickr ci fornisce il link bello che pronto, con l’aggiunta del title, ovvero il nome dell’immagine e le sue dimensioni. Ecco un’esempio:
<a href="http://www.flickr.com/photos/topogina/11872621225/" title="vasetti fatti a mano"><img src="http://farm4.staticflickr.com/3778/11872621225_cecabd337d_z.jpg" width="471" height="640"alt="vasetti fatti a mano, coniglietto alice nel paese delle meraviglie"></a>
Prima di copiare l’immagine nel nostro blog, possiamo aggiungere altre parole chiave direttamente nella sezione ALT o modificare il nome della foto da TITLE.
Come usare i codici qui sopra per il vostro blog?
Per usare questi codici, vi basterà copiarli e incollarli in un editor di testo come NotePad o Word {quest’ultimo può dare problemi di formattazione quindi meglio il primo} e compilare le parti mancanti facendo attenzione a non cancellare le virgolette {“ e ”} e gli altri caratteri speciali.
Spero sia tutto chiaro. Se avete domande, sparate pure nei commenti. Alex
Risorse utili:
Come Inserire un Link in un Post
Come Aggiungere Molteplici Link alla Stessa Immagine
Come Aggiungere le Icone Sociali in 5 Semplici Mosse {Blogger}
Fonti foto prima immagine: www.abeautifulmess.com e icoloridilaura