What is Schema?
To understand Schema, first you need to understand how a search engine works. I wrote a blog fairly recently explaining how Google Search works, but you really only need to understand one aspect of it: how the web crawler (i.e. Googlebot) sees your website. Search engines are constantly crawling and remapping the Internet, perusing your content and determining what exactly you are trying to say. Keep in mind, these web crawlers, no matter how advanced they have become, are still only computer programs. They do not possess the same reading comprehension skills of a human. To get a basic idea of what a web page looks like to a search engine, copy and paste a URL into the box below.
Three years ago, the big 3 (Google, Bing, and Yahoo) combined to launch Schema.org to help solve this reading comprehension problem. If you are running a website, Schema.org tells you how to “tag” the data on your site to make it as digestible as possible for search engines. Each of these tags, or “schemas”, is totally invisible to someone just browsing the page. They use HTML, the standard markup language of the web, to tell the search engine what type of information is being displayed on the page. For example, medical sites describing some kind of condition can specifically tag that information so that instead of having a bot sifting through all of your text, it can simply read the tags and know “This page is about diabetes, and this information here are symptoms of diabetes, and this list over here is treatment options for diabetes patients,” etc.
In a perfect world, you should mark up everything that you can with Schema. So what can you mark up? A whole lot. And the list is always growing. Pretty much every time you see a proper noun in your content, there’s Schema code for it.
Let’s Get Technical
Now that we understand the basics, let’s actually mark something up so that we can see it in practice. We’ll use the example of adding Schema markup to your name, address, and phone number information. This is probably the best place to add Schema markup to as it tells search engines the most about your actual business location. We’ll use our main office address in the example.
Points Group LLC
6 Dumont Place, 4th Floor
Morristown, NJ 07960
Now let’s see what it looks like with standard HTML and Schema markup, and then we’ll walk through how we got there:
<div itemscope itemtype=”http://schema.org/Organization“>
<span itemprop=”name”>Points Group LLC</span>
<div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<span itemprop=”streetAddress”>6 Dumont Place, 4th Floor</span>
<span itemprop=”addressLocality”>Morristown</span>, <span itemprop=”addressRegion”>NJ</span> <span itemprop=”postalCode”>07960</span>
Breaking it down
Let’s start by defining the terms we used:
Regular HTML code:
div = a division or section of an HTML document that usually will format as a new line. Content appearing after the close of the div will appear underneath it.
span = span defines a smaller section of an HTML document and usually has no formatting associated with it.
itemscope = Using itemscope defines that the text or values held within the div or span you are working on will be about a specific item, though it will not define what that item is.
itemtype = itemtype actually tells you what the classification of the item we are talking about is. For example, above, we discover that our main div is about an Organization that that our sub-div is about a Postal Address. As you also probably noticed, itemtype appears as a link to the corresponding Schema.org page.
itemprop = itemprop or item properties is the keyword that Schema recognizes. For example, above we see itemprop telling us firstly that the “name” of our organization is Points Group LLC and that the “streetAddress” is 6 Dumont Place, 4th Floor.
name, address, streetAddress, addressLocality, addressRegion, postalCode, telephone = each of these terms were specific item properties that corresponded to the information held within the corresponding div or span. These can each be found on Schema.org under their appropriate itemtypes.
First, you need to head over to Schema.org and find the itemtype that applies to the information that you would like to mark up. In this case, we used two itemtypes, Organization and PostalAddress, where PostalAddress was a sub-type that described the Organization. On each of those pages, you will find all the necessary itemprop keywords that you will need to mark up your data. It’s easy to get lost as there are so many itemprops to choose from. Just remember, the point is to mark up the data that you have, not to build out more content so that you can satisfy all of the itemprops you see. Once you have the correct itemtypes and itemprops, it’s just a question of adding the actual markup to your page.
Admittedly, it does get a little complicated, especially if you are unfamiliar with HTML. But if you break it down piece by piece, it does make sense.
When you are all done marking up, head over to Google’s Structured Data Testing Tool and input your URL to see if Google is satisfied with your work.
Why add Schema markup?
According to Moz.com’s 2013 Search Engine Ranking Factors, Schema on it’s own does not do much to improve your search engine ranking. However, they do help Google generate what are called “Rich Snippets” for your page in the search results. These Rich Snippets look noticeably different from the standard look of search results, and as a result, raise your click-through-rates (CTR). The clickability of your search results is almost as important as the ranking itself.
As you can see in the above screenshot, one of these pages has properly marked up their review data. Even though the WebMD listing appears first in the results, I’m more likely to click on the BetterDoctor listing because…
- It has colorful stars.
- I know there are 4 reviews on that page. Who knows what’s on WebMD?
There are a ton of tools out there, from websites to WordPress plug-ins. We recommend the website Schema Creator because it generates the code for you based on the information you add, but is then easy to edit and make additions to. The code generated by most WordPress plug-ins tends to be a little clumsier and less editable. Whichever you decide to use, it’s always best to make sure that are able to create the code without the assistance of any tools because that will ensure that you understand it well enough to recognize when the tools are making mistakes.