Come Linkare le Immagini ad una Pagina Web {Image Links}



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



14 commenti :

  1. Sempre utilissimi post, grazie Alex. =)
    Daniela

    RispondiElimina
  2. Alle 6 di mattina è dura ragionare...ma stasera me lo studio per bene!! Grazie Alex! ^_^

    RispondiElimina
  3. Ciao Alex piacere di conoscerti sono Enrica...ormai il tuo è il mio blog di riferimento, soprettutto per quanto riguarda il corso di blogging...tu sei sei sempre molto chiara, ma io invece fatico ancora a rendere il mio blog come realmente lo vorrei da un punto di vista grafico soprattutto....ti saluto e a presto....ciaoo

    RispondiElimina
  4. ...volevo aggiungere....se capitassi mai per il mio blog, potresti dirmi sinceramente cosa dovrei cambiare perchè proprio brutto? accetto critiche...ciao...grazie...

    RispondiElimina
  5. Pur masticando un pochino di http, imparo sempre qualcosa di nuovo sul tuo Blog, grazie!
    Ora vado a leggermi l'articolo di Flickr, me lo ero perso...
    A presto!
    Daniela - Mani di Dani

    RispondiElimina
  6. Ciao Alex!
    Ti ho scoperta da poco e…che dire? Sei favolosa! Chiarissima e anche tanto paziente!
    Io ho usato i tuoi tutorial su come creare le pagine collegate alle etichette e su come inserire il pin it button a scomparsa sulle immagini (tutto è filato liscio, peccato giusto che l'immagine non sia più tonda, bensì si vedano gli angoletti bianchi…spero di trovare un modo x sistemarlo perché visivamente parlando non è granché), oltre che leggere tutti i tuoi consigli su come ottimizzare il blog e fidelizzare i followers! Grazie mille davvero!
    Io sono all'inizio della mia avventura, ho appena iniziato…però, veramente, quanto mi sei stata utile!! (E ho come l'impressione che lo sarai ancora…eheheh!)
    Tra l'altro ho letto che sei vegana… io, pensa, ho deciso di scrivere dei ristoranti con proposte vegetariane e vegane della mia città (Bologna)….magari ti può interessare!
    Un grande abbraccio,
    Chicca

    RispondiElimina
  7. Cara Alex, i tuoi consigli sono preziosissimi, anche per delle imbranate come me!!!!Adesso mi rileggo tutto con calma, parola per parola :-) e vedo di capirci qualcosa :-) Ti abbraccio forte Micol
    PS: se hai un "ricordo" in un cassetto...ed un attimo di tempo...ti aspetto da me :-)

    RispondiElimina
  8. Io non ci ho capito granché'...ma non dipende da te! Sono il un caso disperato!
    Comunque proverò' a rileggere con maggiore attenzione!
    Unabbraccio

    RispondiElimina
  9. Caspiterina, grazie... Oggi pom vedo di applicarmici un pò... Poi ti faccio sapere. Un bacione (davvero senza te, talvolta, non saprei come fare... Ho aggiunto anche la freccia per risalire velocemente seguendo le tue indicazioni e guardando il post spagnolo di cui, appunto, parlavi nel tuo post).

    RispondiElimina
  10. ciao e complimenti x il blog,abbiamo aperto un nuovo canale informativo,
    www.mondoanimalechiavenna.blogspot.it vieni atrovarci sul blog ok?!?
    sarai dei nostri daiiiii
    un abbraccio kristian

    RispondiElimina
  11. con grande soddisfazione ti dico che ce l'ho fatta... un giorno di lavoro perché non riuscivo a far riconoscere i codici... ma alla fine è andata... grazie, grazie, grazie...- ho anche inserito le icone sociali... sempre con un tuo tutorial... c'è ancora qualcosa da modificare... ma con calma! per fare ste cose ci vuole un sacco di tempo... tra l'altro ho anche messo mano all'intera grafica, sempre seguendo i tuoi consigli... (alex, se hai tempo, la vai a guardare e mi dici cosa ne pensi... ripeto, ci sono ancora un pò di cose da fare, ma nel complesso sono più che soddisfatta!). grazie ancora, baci, cris...ora vado a vedere l'ultimo post, quello per programmare, che mi interessa...

    RispondiElimina
  12. Oh Alex grazie per l'immagine che hai usato! In quanto a cose tecniche l'unica cosa che sono riuscita a fare è utilizzare Flickr per inserire le immagini nel mio blog...grande conquista!!!

    RispondiElimina
  13. a me da come se ci fosse un errore nell'immagine.. il codice immagine è il nome con il quale l'abbiamo salvata??? perchè magari sbaglio li

    RispondiElimina