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

In order to see the process from start to fSchema Markup on Contact Usinish, I decided to use ourselves as the example. We have this lovely little information box on our own “contact us” 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.

For a closer look, here is the code that we generated for our address:Schema Code for Address

 

 

 

 

 

You can see that because of all the line breaks (<br>), the preview for our address now looks like the following image:Preview Address with Schema

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

Telephone Schema markupTo 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=”name”><strong>Leadgenix</strong></div>
<div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<span itemprop=”streetAddress”>2483 N. Canyon Rd.</span><br>
<span itemprop=”addressLocality”>Provo</span>
<span itemprop=”addressRegion”>UT</span>
<span itemprop=”postalCode”>84604</span><br>
<span itemprop=”addressCountry”>United States</span><br><br>
<span itemprop=”telephone”>1-801-805-2532</span><br>
<span itemprop=”email”>info@bigleap.com</span>
</div>
</div>

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!

photo credit: Thomas Hawk via photopin cc

Jamie Bates