How to Add Schema Markup to a Website

First, you need to identify the type of schema you need. The most common ones are:

• Local business
• Website
• Review

We are going to be focusing on Local Business. If you need another type of schema, you can always go to http://schema.org/docs/schemas.html to check existing schemas and their attributes.

A Local Business schema represents a particular physical business or branch of an organization.

In this guide i will show you how to add microdata markup and JSON schema markup.

Microdata Markup

Local Business Info without any markup

Address: 170-422 Richards St, Vancouver, BC V6B 2Z4
Phone: (604) 265-5817

Local Business or NAP using Microdata Markup

[html]<div class="localnap" itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name" class="hidden">Wonderstruck Events</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">170-422 Richards St</span><br />
<span itemprop="addressLocality">Vancouver</span>,
<span itemprop="addressRegion">BC</span>
<span itemprop="postalCode">V6B 2Z4</span>
</div>
<span itemprop="telephone"><a href="tel:+16042655817">+1 (604) 265-5817</a></span>
</div>[/html]

now that we have our microdata markup ready, we will proceed to add it to our site. What we are going to do is replace our current Business info with the new NAP microdata, and style as needed to make it look the same as when no microdata is present.

Once you have the markup in place, you will need to test it.

Go to https://developers.google.com/structured-data/testing-tool/ and check for any errors. If no errors are found, you can move on to the next microdata implementation.

JSON-LD Markup

Lately, I been using this the most. Why? because it is added to the source code and because you can add as much information as you want without creating a situation where you need to mess with layout or add extra styling.

Here is an example of a NAP with some extra info like social profiles and geolocation.

The process here is a little bit different. You will not need to replace your existing information on the page, but instead add this piece of code to the section. All of this needs to be done via FTP.

The testing process is the same as above. You go to the testing tools and validate:

[js]<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"address": {
"@type": "PostalAddress",
"addressLocality": "Vancouver",
"addressRegion": "BC",
"postalCode":"BC V6B 2Z4",
"streetAddress": "170-422 Richards St"
},
"description": "We are professional wedding planners in Vancouver, offering a wide range of event planning services.",
"name": "Wonderstruck Events",
"telephone": "+1 (604) 720-7748",
"openingHours": "Mo,Tu,We,Th,Fr 09:00-17:00",
"geo": {
"@type": "GeoCoordinates",
"latitude": "49.283874",
"longitude": "-123.112039"
},
"sameAs" : [
"http://www.facebook.com/wonderstruckvan",
"http://www.pinterest.com/wonderstruckvan",
"http://www.twitter.com/wonderstruckvan",
"https://plus.google.com/116662004474352812706/about"]
}

</script>[/js]