The Clickable Phone Number. We’ve come to expect it. We’re hungry and on our phone, we look up our favorite local pizza place, we see a number and if we click it, we’ll be ordering that Large Canadian Bacon, Pineapple with Extra Cheese in moments. Right?
So when that doesn’t happen, when we have to copy and paste the number, or worse yet, write it down, we get kind of cranky. Google knows it, which is why it’s a ranking factor for Local SEO. Google just wants you to be happy. 🙂
Here’s how to make your phone numbers clickable
What is an HREF?
What we call an HREF is simply just html that creates a link. Here’s how to create a simple html link that opens up as a phone number for mobile.
I’ll use mine as an example: It’s (925) 456-4567. That’s not a link, you can’t click it in your phone and have it bring up your dialer. If I wrap an ‘HREF’ around it we’ll make it a link. That would look like this:
<a href="tel:9254564567">(925) 456-4567</a>If you know basic html, you’ll see it’s a very simple concept and that would be the end of the story and we could go back to arguing about Pineapple on Pizza, but of course it’s not that simple.
THOSE FANCY PHONE NUMBERS…
I’ve seen your business card. I’ve seen your marketing materials. You think your number looks more modern, more cutting edge with no hyphens or parentheses, right?
It’s ok. Google says that it’s ok to display your number like 925.456.4567 if that’s what you want, just as long as in your html you do it their way. Their way is simply all hyphens.
Additionally The Google also wants you to always use the International Dialing Format. That’s the little + followed by the country code, followed by the area code, and then finally the number.
So my same funky number done as a link in the Google method would look like this:
<a href="tel:+1-925-456-4567">925.456.4567</a>Easy Peasy right? So go make your phone number a link!
QUESTIONS?
Nope, just the NAP but then again, why would you want to give your readers a phone number that isn’t clickable? I can’t think of a reason not to.
I totally understand why you would want to do this. We all get way too many robocalls and spammers. So the answer is yes you can or you could use an Icon in place of the number (future blog post idea). But then again, when the bad guys are collecting phone numbers, you are thinking of some guy cutting and pasting away, right? Nothing could be further from the truth. They have pretty smart bots that right now are crawling through millions of websites harvesting emails and phone numbers. They see right through your weak methods of obscuring your phone number – so don’t work too hard on that.
Yes you should. Depending on how you put them there, the job could be easy or hard.
– Let’s say you added your NAP to the footer section of your WordPress based website – if so, then changing just that section would change all of the pages. Of course if you listened to Episode 1 you know that the footer is good but not the best way to do this.
– Or maybe you added the phone number to the bottom of each of your posts much like your signature line is in your emails. Did you do that like a cut and paste each time? If so you have a lot of work to do.
– Or maybe you did that but you recently started using the Gutenberg Block Editor you might have done it once and created a ‘reusable block’. Did you do that? If you did, reach around your back and give yourself a big slap on the back! All you have to do is change the reusable block once and it’ll change it everywhere it’s used.
HIDDEN BONUS SECTION: (click the down arrow, eh?)
Not all browsers work the same way. Google knows this. As they suggest:
“Modern mobile browsers automatically detect phone numbers and enable click to call. Mobile Safari automatically converts phone numbers to links with the associated hyperlink styles. Chrome for Android automatically detects phone numbers and allows users to click to call, but does not wrap the phone numbers in hyperlinks or apply any special styles.”
To prevent this, you can add a simple metatag to all of your site’s headers. That would look like this:
<meta name="format-detection" content="telephone=no">
BONUS II: Did you know that some /most modern browsers also support the “sms:” schema? That means I could replace the tel in the html with sms and your browser would text me instead! Try it! 925.456.4567
Follow the entire Local SEO Series:
This series has the potential of being huge! (like 50 posts huge) You can follow along in two different ways. The first would be by clicking or bookmarking this tag: 2MTLOCALSEO That will load an archive page with all the posts as we go. A better, or additional way would be to subscribe to the newsletter. This way, each of the posts will be delivered straight to your inbox each week.
Get My Newsletter
All I need is your email
So… Should Pineapple be on a Pizza?
Photo by Quino Al & Miguel Andrade & bckfwd on Unsplash
He's an avid hockey fan, rides a mountain bike, sometimes rides a road bike, has a few motorcycles (he had a really fast one, bought a cool orange one, rode a really slow one, and now,a perfect "BDR Weapon"). If that isn't enough, he makes cheese and sourdough bread, loves strong beer and good red wine, and poorly plays the Mandolin.
- The Ultimate Guide to Writing the Perfect Blog Post - March 14, 2023
- 8 Questions Your Web Developer Should Have Asked - April 27, 2021
- Slack, Chat or Discord? - April 6, 2021