Structured Data First Steps: Adding Schema Location Markup to Your Website

Markup and microformats are becoming extremely important to local rankings. Schema.org was created last year to create a common language between major search engines Google, Bing and Yahoo that identifies types of content given to search engines via websites. We are just on the cusp of the possibilities with schema, but the reality is, if you don’t start now, you're going to be behind.

We'll start with the basics: adding schema markup to the address on your website or blog. If your business is location or service area dependent, having an address on your website is imperative.

Making sure search engines understand your exact location can, at the best of times, be a tricky proposition. Using the data markup makes it extremely easy for you to tell the search engines your physical street address as well as the latitude and longitude of your business.

Amending your straight location schema with code for your phone number takes a bit of "hacking" with the tools presently available. We'll go through how to markup the data to ensure accuracy as well as consistency and validity of the code.

Let's start with your street address. Use Schema-Creator.org to get the first steps down. You can choose Organization, and then choose a more specific type of organization if it's related to your business.

Once you've chosen the correct category(ies), simply fill in the pertinent data and the tool will wrap the code around your information for you. You're then provided with easy copy and paste code for your website.

schema-center-for-organization

You're given a preview of the data within the tool, as well as a box that contains the code for insertion on your website.

preview-schema-code-for-insertion

You can eliminate the description as a line item to conserve space with little issue. Be sure you leave the business name, URL, and address data intact. You can tweak it for styling, but be sure you're testing your changes in Google's Structured Markup Validation.

Schema-Creator.org will also add line breaks to the code that will make your address look "unnatural" on a page. Take out those line breaks between the city, state, ZIP code, and country before pasting the code in. You can see in the preview example above how the address looks "odd" to the reader.

After you've entered your address in the Organization tool and pulled out the code, you then add it to your website and check for style and validation. You're likely going to share your address in the footer or sidebar of your site, as well as on the about and/or contact us pages. Go for it, you can use this code as many times as you like.

If you'd like to add markup around your phone number, use a different tool, as right now Schema-Creator.org doesn’t have a line item for phone number under the Organization category. In this case, use Microtdatagenerator.com.

Here the Local Business Schema includes a line item for phone number. You'll then copy and paste the coding into your site. This version doesn’t have a description or link included, so you might want to mash the results from both tools together to get what you want.

Please note: the Business Name and Telephone number are part of the Local Business Schema, while the actual physical address of the store is part of the Postal Address schema. In my opinion, the most confusing aspect of Schema is the combination of different schemas. They can be combined, but we need to be careful that our combinations validate. One dropped < /div> and we have a mess on our hands.

You can take your markup a step further and add Latitude and Longitude. This is helpful for a variety of applications, including GPS or navigation directions from Google Maps.

We're going to do a little "hacking" to our code as it stands right now, but it will validate in the end! When we're done, you'll have a set of code that you can remove my data from, insert your own, and add to your site.

Our code looks like the snippet below. Go ahead and paste it into a notepad for editing. Word will add junk to our code that will hinder validation when we're done.

<div itemscope itemtype="http://schema.org/LocalBusiness">

   <span itemprop="name">Mindy\'s Kitten Movie Store </span>

   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

     <span itemprop="streetAddress">123 Angry Cat Lane </span>

     <span itemprop="addressLocality">Glenwood Springs </span>,

     <span itemprop="addressRegion">CO </span>

     <span itemprop="postalCode">81601 </span>

   </div>

   Phone: < span itemprop="telephone">970-555-CATZ <span>

</div>

The next step is to visit Schema.org and find the latitude and longitude itemprops. This data is actually part of a different type of schema, found under the "Thing > Intangible > StructuredValue > GeoCoordinates" sections at schema.org.

We need to be sure to add this information to our code carefully. You can see above that because the "LocalBusiness" and "PostalAddress" schemas are structured differently, they have different div tags. We can use what we've learned above to add another div for the Latitude and Longitude. Our code will then look like this:

<div itemscope itemtype="http://schema.org/LocalBusiness">

   <span itemprop="name">Mindy\'s Kitten Movie Store </span>

   <div itemscope itemtype="http://schema.org/PostalAddress">

     <span itemprop="streetAddress">123 Angry Cat Lane </span>

     <span itemprop="addressLocality">Glenwood Springs </span>,

     <span itemprop="addressRegion">CO </span>

     <span itemprop="postalCode">81601 </span>

   </div>

Phone: <span itemprop="telephone">970-555-CATZ </span>

</div>

<div itemscope itemtype="http://schema.org/GeoCoordinates">

<span itemprop="latitude"> 38.8977 N </span>

<span itemprop="longitude"> 77.0366 W </span>

   </div>

When I then tested this exact code in a live web page and ran the URL through the Structured Data Tester, I received the following results:

structured-data-tester-results

If you've done it wrong, and your markup is incorrect, you'll get this warning:

structured-data-warning

The basic rule of thumb here is the same as it was in elementary school: red ink is bad!

So you've now seen how to create, edit, hack, and validate the Schema.org address and location markup for your business. If you're using a better method, or have any questions, please share them below. I'm so excited about the possibilities of markup, I'm happy to help with tweaks and issues.