<< by on June 14th, 2012
Here at Search Mojo, we have been implementing schema.org as part of our SEO efforts for clients. In an attempt to learn more about the different types of schema.org markup as well as dispel my knowledge to other less web code savvy individuals like myself, I decided to create a schema.org how-to guide. Let’s get started with the basics!
What is Schema.org?
Schema.org is a joint initiative by Google, Bing, and Yahoo! to create a common markup language to improve how websites appear in search engines. The schema markup that is added to the code of a web page signals to search engines that a certain page is about a particular item (i.e. person, place, product, video, recipe, etc.). By providing this information through the markup, search engines can better understand the content of web pages and therefore provide more relevant, useful results for users.
Schema.org markup can be applied to a plethora of different items. For a full list, check out schema.org’s website.
Schema.org Code Elements: div, itemscope, itemtype, itemprop
Regardless of the item you are marking up, the following will always be included in the schema markup code: div, itemscope, itemtype, and itemprop. Below is an example of schema.org code:
The div tag acts as a container and houses all of the relevant code and information about a particular item. Itemscope denotes that the code and information contained within the div tag is about a specific item. Itemtype in the div tag indicates the type of item being marked up. In the example above, the item being marked up is a TV series. To assign properties to an item, i.e. its name, description, etc., itemprop is used. In the example, itemprop is housed within a span tag. Itemprop can also be contained within other tags just as long as there is a close tag, like for instance, heading tags (h1, h2, etc) or the paragraph tag (p).
Now with the basic elements out of the way, we can move on to more advanced schema.org topics.
Sometimes a property of an item can be its own item with its own unique properties. For example, let’s say you are marking up content about the TV show How I Met Your Mother. As you can see from the example code below, although the actor Josh Radnor is a property of the TV show, he has properties of his own, like a birthday, that are not associated with the show.
The More Markup the Better, Unless If It’s Hidden
The more content you can markup on your page about an item, the better, because that is more information the search engine will know about your web page. With that in mind, it is also important to note that you should only markup content that is visible to visitors; therefore avoid using hidden div tags.
Sometimes, though, valuable information about an item cannot be marked up because of the way it is presented on the web page. For example, the information could be contained within an image or Flash object, or it could be implied but not explicitly stated, like the currency of the price of a product. In these cases, you can use meta tags. In the example below, the rating of a product is displayed as an image; therefore there is no text that can be marked up. To solve this problem, the meta tag is used to tell search engines the product’s rating.
Rich Snippets Testing Tool
Before publishing your web pages with schema, I suggest entering the code into the Rich Snippets Testing Tool. The tool shows the information that a search engine can pull from the schema code and offers a quick diagnosis of any errors in the code.
Stay tuned for How to Implement Schema.org into Your SEO Efforts: Part Two next week, where I will provide examples and explain the benefits of including schema.org as part of your SEO efforts.
Leave your questions and comments below or find me on Twitter.