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).