In December 2013, mobile phone internet usage exceeded PC usage, and since April 2015, Google announced that not having a mobile-friendly version of your website will harm your rankings on those devices. At this point, I should not have to explain the importance of mobile and tablets on the search engine industry.
Now that we know that mobile usage is at an all-time high and is increasing, it’s time to be sure your website is prepared for mobile usage. No matter how great emails and form submissions are, sometimes the fastest way to reach someone is to just give them a call.
Adding click-to-call HTML code to your website is really simple, and in this blog post I’ll show you why you’ll want to add it to your site, several examples of how to use it, and even ways to track the effectiveness of click-to-call on your website.
What Is Click-to-Call?
Let’s say you’re out and about with your friends and you get hungry. You whip out your phone and you see a few restaurants on Google Maps. You find a few you like, visit their mobile site, and then read the menu. Once you find the restaurant that can serve your friend’s gluten allergy, you’ll probably want to know that you can call ahead and reserve a table.
Sure you could highlight the number and copy and paste it into your phone to call, or wouldn’t it be nice if you could just click the phone number to call? Or should we say “tap?”
You can now do this on your website, in fact you were able to do this for years, but today is the day you learn how to do it and implement it on your website.
How To Add Click-to-Call
If you know how to make an anchor tag or a mailto anchor, you already know how to add a telephone number. It’s just like a normal link:
Normal Link: <a href="https://www.tampa-seo.com">Tampa SEO</a>
But you’ll be adding “tel:” instead of “http://”
Telephone Link: <a href="tel:+18133300736">(813) 330-0736</a>
That’s it. Simple right? You don’t even have to have the phone number as the anchor text. You can do something like this:
- <a href=”tel:+18133300736″>Click To Call</a>
- <a href=”tel:+18133300736″>Free Pizza</a>
- <a href=”tel:+18133300736″ title=”Tampa SEO Training Academy”>Tampa SEO Training Academy</a>
In that last example above, you’ll see I added title text, which makes a simple hover-over tip. You can also make an image clickable too. Just replace the anchor text with an image tag.
Schema.org Click-to-Call Markup
Let’s make sure Google and the others know exactly what this phone number is for:
<div itemscope itemtype="http://schema.org/LocalBusiness"> <span itemprop="telephone"><a href="tel:01234555666">Link Text Here</a></span> </div>
The itemscope and itemtype help Google and others know that the following information is for a Local Business and the <span> wraps the phone number with an itemprop that truly lets others know that this is a phone number.
With this information, you can increase your engagement with users while letting search engines know exactly what your phone number is and it’s relationship to your website and business. Google might even display your phone number in search results if it’s marked up properly.
Good news! You really don’t have to do anything to track tel: numbers when they are clicked. Google Analytics will show these in your data when you navigate to Behavior > All Pages and then enter “tel” (without quotes) in the search bar. If there were indeed clicks, you’ll see them entered as page views.
However, you might not want to consider this as a page view. If you know how awesome Goal tracking is in Google Analytics, you might want to add that as well. That sort of thing isn’t too difficult at all.
Assuming you have Universal Analytics code installed, just add the following to your anchor:
onClick="ga('send', 'event', 'Category', 'Event');"
Just slap that into your anchor tag and then add your Category and Event labels. In my example below, I replaced “Category” with “Call” and “Event” with “Local Number”. So when someone does click this anchor, it will send Google Analytics an event that says a Call occurred and our Local Tampa phone number was called.
<a href=”tel:+18133300736” title="Tampa SEO Training Academy” onClick="ga('send', 'event', 'Call’, ‘Local Number');">Tampa SEO Training Academy</a>
Click-to-Call HTML Code
So here it is in all its glory. Please feel free to copy and paste this and adjust the settings as you need for your own website.
<div itemscope itemtype="http://schema.org/LocalBusiness"> <span itemprop="telephone"><a href="tel:+12345678901" title="Add Title Text" onClick="ga('send', 'event', 'Category’, ‘Event');">Add Anchor Text Here</a></span> </div>
Let me know if you added this to your website and if you saw an increase in calls? I’d love to know how well this works for your business.
Steve Scott is the CEO & Director of Training at the Tampa SEO Training Academy. He has taught SEO skills to people from around the world and currently offers his hands-on search engine optimization training workshops in Tampa to individuals and businesses of all sizes. Corporate SEO training classes and consulting are also available.