Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recognize phone numbers and do the linking for us, but not always.
There is enough web traffic on mobile devices and plenty of desktops apps that are capable of making calls, that it’s worth knowing more about phone links.
Default Usage
We have a snippet for phone links on this site that’s been hanging around since 2011:
<a href="tel:1-562-867-5309">1-562-867-5309</a>
This also works on text links:
<a href="tel:1-562-867-5309">Click to Call!</a>
tel:
is not so much a feature as it is a protocol, much in the same way that http:
and mailto:
are protocols for the <a>
tag feature. The spec itself has nothing to say about it, though HMTL5 did provide support for custom protocol handlers, which allow such a protocol to be used.
You’re probably wondering why tel:
can be considered default usage in the absence of an official spec on it. You can credit this to the fact that it was a proposed standard as far back as 2000 and later adopted by iOS, making it the de facto way to go by roughly 2007. There are other phone-based protocols (which we’ll get to later), but we’ll be focusing on tel:
given its relative prominence.
Browser Support
We see tel:
pop up as a protocol handler for links with no official documentation; and where there is no documentation, we often see differences in browser support and behavior. That’s not to say that browsers fail to recognize the <a>
tag itself. Instead, browsers might make different decisions on what to do when that link is clicked. For example, a browser may assume another app needs to open and will trigger a dialog asking which app to use. In other cases, the link might be ignored altogether.
Browser | Does it link? | When clicked it… |
---|---|---|
Android | Yes | Launches phone app |
BlackBerry 9900 | Yes | Initiates phone call |
Chrome | Yes | Triggers dialog confirming the use of another app |
Edge | Yes | Triggers dialog confirming the use of another app |
Internet Explorer 11 | Yes | Triggers dialog confirming the use of another app |
Internet Explorer 11 Mobile | Yes | Initiates phone call |
iOS | Yes | Triggers options to call, message, copy or add the number to the Contacts app |
Opera (OSX) | Yes | Triggers dialog confirming the use of another app |
Opera (Windows) | Yes | Triggers an error dialog that does not recognize the protocol |
Safari | Yes | Launches FaceTime |
Styling Phone Links
Styling telephone numbers is like any other link. In fact, it will inherit the default styling for anchors:
a {
color: orange;
text-decoration: none;
}
Let’s say we only styles to apply to telephone links. We can do that with a pseudo selector that searches out the tel:
text in a given URL:
a[href^="tel:"] {
color: orange;
text-decoration: none;
}
Tuts+ has a nice trick using the ::before
pseudo selector to add the unicode phone character before the number is displayed:
a[href^="tel:"]:before {
content: "\260e";
margin-right: 0.5em;
}
Alternative Phone-Related Links
Believe or not, tel:
is not the only way to initiate a phone call with a link. Here are a few other custom phone-based protocol handlers at our disposal.
callto:
Exactly liketel:
but used to initiate calls via the Skype app.- auto-detected: Many browsers will automatically detect a phone number in the HTML and link it up for you—no need to change the markup. iOS, for example, will totally do this, though it did not seem to be the case for Chrome on Android.
sms:
Skip the call and go straight to text message. This seems to be a lot less supported thantel:
is among browsers, including mobile.fax:
Go back to the future with fax machines. Again, spotty reliability.
Best Practices
It’s kinda funny talking about best practices when it comes to something without specifications. The spec does give a brief opinion on the “click to call” idea, but here are a few things to bear in mind when working with telephone numbers and links.
Consider the Context
A telephone link can make for an excellent call-to-action, especially on mobile phones where it reduces the friction between the content and the call. At the same time, telephone links could be considered a hindrance on a desktop experience where a phone call wouldn’t be possible if the device lacks an app that supports it.
One idea would be to create a class specifically for telephone links and attempt to show or hide them based on what we know about the browser. Modernizr and media queries are handy here, though totally imprecise.
Use Country Codes
A country code is not required but could be a nice touch for sites with international traffic. Country codes can be preceded by a +
but that too is not required.
<a href="tel:+01-562-867-5309">1-562-867-5309</a>
Search Engine Optimization
SEO experts might have more to add on this than I do, but Google offers a structured data format for local businesses and using it will make telephone links more recognizable to crawlers, formatting them on search results pages in a way that makes the number much more actionable. Dudley Storey provides an excellent overview with the following example:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Beach Bunny Swimwear</h1>
Phone:
<span itemprop="telephone">
<a href="tel:+18506484200">
850-648-4200
</a>
</span>
</div>
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2016/02/tel-links-seo.jpg)
On the flip side of wanting search engines to follow phone links, you can add rel="nofollow"
to discourage links from being followed and indexed. This might be a good idea for any link not being designated as a call to action since web crawlers would be inclined to try to follow it to nowhere.
<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>
Turning off Number Detection in iOS
If you plan to add phone links to your markup, then you may also want to consider disabling iOS from auto-detecting phone numbers and overriding your styles. Add the following the the document <head>
to turn that off:
<meta name="format-detection" content="telephone=no">
Further Reading
- Quick Tip: Make Telephone Numbers Do Something by Tuts+
- Adding Phone Numbers To Web Pages With HTML5 and Microdata by Dudley Storey
- Original Draft Proposal 2806 which has been obsolete by Proposal 3966
- Apple URL Scheme Reference
Been using [href^=”tel:”] links since 2009. While skype may use callto: it also does use “tel:” protocol links for machines with browsers using skype on my ubuntu and Windows 8.1 Laptop (may require their click-to-call plugin IDK).
I’ve never encountered a user with a modern smart-phone that could not call one, but for windows users, a registry entry may be needed to map the protocol identifier to a program if it does not initially work.
http://caniuse.com/#search=tel
nofollow
doesn’t tell Google not to follow the link; it tells it to not assign any value to the fact that it’s come from the site it exists on. Subtle, but it won’t dissuade crawlers (thetel:
protocol might though).Timely post, Geoff! Thank you for the deep dive into phone links. I’ve been puzzling over how to handle phone links on my past few projects. Good reminder about using Google’s structured data format.
Also you can add a logo, a street address, lots of cool things, be sure to check out schema.org for detailed information on localbusiness and organization, as it’s more useful than just phone numbers.
http://schema.org/Organization
http://schema.org/LocalBusiness
does anyone know how to generate a click to call in the meta description?
Super cool article! First thought after read: Lets make a js script that replaces a value of href dependable of the browser engine. On browser without support it could simply redirect to contact page instead of dialog boxes.
I belive that inlined schema is a little bit outdated. Google recommends to use json:ld instead.
Thank you for the note on JSON-LD (this is the spelling to look for in a search for SEO), this is exactly what I have been hoping for since I found out about schema.org.
The attribute soup and messy html makes my head spin. :P (I had seen JSON-LD before, but dismissed it as another Google “scheme” to manipulate sites into doing their bidding…. :P)
+01-562-867-5309
It’s a mistake. There is no such phone number. International code for North American Numbering Plan is +1, and +0 is reserved/not used.
That’s my understanding as well. I’ve always used just +1 for US numbers.
No mention of Firefox support?
I’ve tried tel: links on Firefox (Mac) from desktop and it tries to launch FaceTime which is the correct action for desktop.
Great read, Geoff. Leaning into the de facto standard is a great way to go. Phone numbers can be difficult to manage as even they have evolved very organically over time. In a common use case we will at some point inevitably collect phone numbers on forms.
For those interested here’s a machine-friendly and simple way to do so using String replacement while processing form data: https://gist.github.com/jhabdas/66abcf1ac862179cf4bf
Excelent post. Thanks!
Very useful post. Thanks!
I’m not sure I understand what you mean about there not being a spec. IANA handles the registry of URI schemes: http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
You can also use extensions in the number by appending a comma and then the extension. The comma represents a pause.
There is also Microformats 2.0, which is more terse than schema.org.
http://microformats.org/wiki/h-card
Nice article. but, need to concentrate on spelling like “automagically”, “HMTL5” and many more. You can search on this text also.
—
Regards,
Sourav Basak [Blogger, entrepreneur and thinker]
http://www.namasteui.com
Hehe, ‘automagically’ is a USA idiom. A portmanteau of automatic and magic. Something that is automatic and also you dont have to think about how to get it to happen; it happens like magic!