back to top

Link TEL: inserire link a numeri di telefono con HTML

In HTML è possibile inserire dei link a dei numeri di telefono, creando, quindi, un modo veloce ed immediato per effettuare una telefonata verso un numero telefonico presente all’interno di una pagina web. Tale opportunità è stata introdotta da HTML 5 che ha previsto la possibilità di creare dei link utilizzando una varietà di protocolli tra cui tel. Ma adiamo per gradi e affrontiamo l’argomento partendo da una doverosa premessa.

Creare link per effettuare telefonate in modo semplice e immediato

Perché inserire un numero di telefono cliccabile?

Con l’avvento degli smartphone e dei dispositivi mobili in generale si è presentata la necessità di poter inserire, all’interno delle pagine web, dei numeri di telefono cliccabili attraverso i quali avviare direttamente una telefonata.

Volendo fare un esempio si supponga di navigare, attraverso il proprio smartphone, sul sito web di un ristorante e di voler prenotare un tavolo. A questo punto, se il sito web integra un link verso il numero di telefono del ristoratore, sarà sufficiente un click per avviare la telefonata senza dover annotare il numero, chiudere il browser ed aprire il tastierino telefonico. Questa tecnica prende il nome, appunto, di Click to Call: per effettuare una chiamata basta un click.

Riconoscimento automatico dei numeri telefonici

Alcuni browser mobili (come ad esempio Safari Mobile) integrano un sistema di riconoscimento automatico per i numeri telefonici. Grazie a tale funzionalità, anche se lo sviluppatore non ha integrato l’apposito markup, i numeri di telefono possono risultare ugualmente “cliccabili”. E’ bene precisare, tuttavia, che tale funzionalità non è presente in ogni browser ed anche se presente non sempre risulta perfetta (il riconoscimento può fallire qualora la sintassi utilizzata per scrivere il numero telefonico non rientri tra quelle riconosciute).

Per questo motivo, è necessario che il bravo sviluppatore di siti web, nell’epoca di HTML 5 e del mobile, conosca ed utilizzi correttamente il markup per l’inserimento di link HTML verso numeri telefonici.

Con l’avvento di HTML 5 è possibile inserire dei link a dei numeri di telefono utilizzando una semplice variante della comune sintassi del tag <a>, cioè:

<a href="tel:+390123456789">
  Chiama +39.0123.456789!
</a>

Come potete notare, all’interno dell’attributo href ho inserito il prefisso tel: seguito dal numero telefonico da comporre, scritto con il prefisso internazionale e senza spazi o puntini di separazione. La sintassi, come i più attenti avranno notato, non è dissimile da quella utilizzata per inserire link ad indirizzi di posta elettronica.

Disabilitare il riconoscimento automatico

Se si è deciso (come consigliato) di integrare il markup per i link a numeri di telefono, è buona cosa disabilitare (attraverso l’apposito meta-tag) l’eventuale funzionalità di riconoiscimento automatico di cui si è discusso poco sopra. Per farlo sarà sufficiente aggiungere, all’interno dei tag <head> e </head>, la seguente linea di codice:

<meta name="format-detection" content="telephone=no">

Cosa succede se l’utente non sta usando un telefono?

Se l’utente sta navigando con un dispositivo dotato di funzionalità telefoniche, la sintassi proposta avvierà automaticamente la chiamata (di solito dopo un avviso di sistema che chiede se, effettivamente, si desidera avviare la chiamata). In mancanza di funzionalità telefoniche o programmi analoghi (come Google Voice, Microsoft Communicator, ecc.), il link non produrrà alcun effetto.

I link, come sappiamo, sono importanti per la SEO. Senza scendere nei dettagli mi limiterò a segnalarvi come l’utilizzo dei microdata possa rivelarsi utile per un corretto markup dei numeri telefonici in ottica Local SEO. Vediamo un esempio:

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h1 itemprop="name">Ristorante Da Mario</h1>
  Tel.: 
    <span itemprop="telephone">
      <a href="tel:+390123456789">
         +39.0123.456789
      </a>
    </span>
</div>

Lo scopo di questa sintassi è quello di aiutare lo spider di Google ad identificare il numero di telefono al fine di riportarlo anche all’interno della scheda della nostra attività.

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).