Inserire link dentro un'immagine

Normalmente quando leggiamo un articolo interessante su internet troviamo all'interno di esso delle parole cliccabili, queste come certamente sapete si chiamano link e sono stati inseriti dentro il testo. Un link si può inserire anche all'interno di una immagine, per esempio chi deve creare le icone per i social network e deve far corrispondere per ogni icona la pagina social del proprio sito utilizza proprio questo metodo, altri utilizzi potrebbero essere la pubblicizzazione di un siti amici creando banner per lo scambio visite oppure per mettere in evidenza una sezione specifica del proprio sito che magari è nuova e quindi poco conosciuta ai lettori.

Se la clicchi verrai spostato nella pagina iniziale.

Codice Immagine con Link

Il codice seguente vi permetterà sostituendo opportunamente le parti in rosso rispettivamente il link del sito e con il link dell'immagine di inserire un'immagine con dentro un link.

<a href="Indirizzo della pagina"><img src="link dell'immagine"/></a>

Codice per Immagine Ottimizzato SEO

Il codice precedente può andare bene per immagini usa e getta ma se invece dovete lasciarle per molto tempo o per sempre, è buona norma inserirle in maniera ottimizzata aggiungendo il tag alt (sarebbe la descrizione) ed il tag title (il titolo dell'immagine che appare passando il mouse sopra l'immagine); il tag alt è più impostante rispetto al tag title.

<a href="Indirizzo della pagina"><img src="link dell'immagine" alt="nome-foto" title="Titolo della foto"/></a>

Codice per banner di siti amici e affidabili

Se avete più di un sito e volete pubblicizzarli tra di loro dovete inserire all'interno del codice html il tag target="_blank" che apre i link che siano dentro il testo o dentro una immagina in una nuova finestra in modo che il lettore non perde di vista il sito primario.

<a href="Indirizzo della pagina" target="_blank"><img src="link dell'immagine" alt="nome-foto" title="Titolo della foto"/></a>

Codice per banner di Siti Sconosciuti o malevoli

Entrambi i codici scritti in precedenza vanno bene per linkare pagine interne del proprio sito ma se inserite link di altri siti è "quasi" d'obbligo utilizzare il Rel="nofollow" all'interno del codice html dove è presente il link del sito collegato all'immagine perché se questi un giorno dovessero contenere virus o non funzionare più è probabile che anche il vostro sito subisca tale penalizzazione con conseguente perdita di posizioni su Google; ho messo un caso drastico ma meglio prevenire che curare soprattutto con siti sconosciuti. Il codice più sicuro è:

<a href="Indirizzo della pagina" target="_blank" rel="nofollow"><img src="link dell'immagine" alt="nome-foto" title="Titolo della foto"/></a>

Ricordo che questi sono codici di esempio e che vanno sostituiti i link col testo che ho messo come esempio all'interno delle virgolette. Inoltre i codici precedenti non escludono i successivi ad esempio nell'ultimo codice inserito non ho messo i tag alt e tile ma potete aggiungerli manualmente copiandoli dai codici precedenti.