In last month’s post, I discussed how to decode Schema’s schemes and what Schema markup actually is. This post will focus on how to implement Schema markup for a local business, with an emphasis on the business’ address and phone number.
Markup for a Local Business Contact Page
The pieces we will want to markup with Schema are the physical address, the phone number, and the email. I will be doing this along with the tutorial in order to show you the before and after. So let’s dive in!
Marking Up a Business Address
The first step in creating Schema markup is to use schema-creator.org. Schema Creator is a great way to quickly generate Schema code for the piece you want to mark up. Once you get there, choose Organization > Local Business. You will see many empty fields that pertain to a local business. By simply filling in the information for each of these fields, you will see Schema code generate itself on the right-hand side. In addition, you will see a preview of your text just above the code section.
There are two main components to this code: the div opening that denotes that the following markup will be from Schema.org, as well as each item property (within a span tag) that tells the search engines what the text contains.
You can see that because of all the line breaks (<br>), the preview for our address now looks like the following image:
Since we want it to have a normal address layout, we will remove the necessary breaks and our address will look just like it appeared in the first image. Think of it as a bunch of invisible code that you have added to the existing address–this is the markup that the search engines are looking for, but that humans will never see.
Marking Up a Business Phone Number
To markup the phone number of a local business, you simply need to add another item property with the quotation marks containing “telephone”. The last line of our code will contain one more item property–that of “email”.
So, with the unnecessary breaks taken out, and with the last two properties included, that leaves us with the final markup of the following:
<div itemscope itemtype=”http://schema.org/LocalBusiness”>
<div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<span itemprop=”streetAddress”>2483 N. Canyon Rd.</span><br>
<span itemprop=”addressCountry”>United States</span><br><br>
Concluding Our Markup
Now, we have completed the markup of our local business. And, surprise! If you do Schema markup correctly, your contact page info will look exactly the same as it did when it started. You are just laying an invisible optimization blanket over your code, and the search engines LOVE that (not to mention your local rankings will as well).
Good luck in your future markup, and let us know if the comments below if you have any questions!