Schema markup to help the web crawlers
Suppose you made a movie review for the science fiction movie Avatar. When the web crawlers come to your web page and see the word “avatar”, they do not know whether “avatar” is a type of profile picture or a movie. This shortcoming can be overcome using schema markup.
Google, Microsoft and Yahoo! have joined forces to help create schema markup. It’s called schema.org. It’s markup vocabulary that you add to your source code in addition to the regular HTML code.
For example, suppose you are selling a movie DVDs on your website. You are creating a page with a review of the movie Avatar and a “buy now” button so that people can buy the DVD. It may help your website ranking and therefore your sales if the search engines know that Avatar was a movie rather than a profile picture.
With schema.org you may include some HTML code on your web page that looks like this:
<div itemscope itemtype=”http://schema.org/Movie“>
<h1>Avatar</h1>.
The inclusion of the word “movie” in the right way will let the web crawlers know that “avatar” is a movie rather than a profile picture.
Earn a percentage of the selling price for every book sold.
What is microdata?
Microdata is just additional markup added to a page that adds meaning for computers, but has no effect on the page’s appearance. Websites that use schema markup will rank better in the SERPs than companies without markup.
Below are two examples of microdata along with a pink rectangle showing how they would appear on a web page.
<div itemscope>
My name is <span itemprop=”name”>Peter</span>
This links to <a itemprop=”url” href=”http://www.marketinggraphicstoolkit.com/v4/?hop=design77″>my website</a>.
</div>
Let’s have some vocabulary definitions for the terms you see in that snippet of code.
♦ Itemscope: This is used to create an item. The itemscope attribute is a boolean attribute that tells that there is Microdata on this page, and this is where it starts. The itemscope should always be paired with an itemtype attribute that defines the microdata vocabulary in use. Itemscope defines a group of name-value pair(s), called an item.
♦ Itemprop – An individual data element.
<div itemscope itemtype=”http://schema.org/Person”>
Here is some random data on the page, followed by my mailing address.<br />
<span itemprop=”name”>Peter Enns</span><br />
<span itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<span itemprop=”streetAddress”>3700 O’Hara Street</span><br />
<span itemprop=”addressLocality”>Tampa</span>,
<span itemprop=”addressRegion”>FL</span>.
<span itemprop=”postalCode”>33601</span><br />
<span itemprop=”addressCountry”>United States</span>
</span>
</div>
In general, the more content you mark up, the better. However, as a general rule, you should mark up only the content that is visible to people who visit the web page.
Schema markup overview
The above blog post is a simple introduction to schema markup. To really learn it and improve your search engine optimization, study each of the four related pages below.
Related pages
Improving Your Site with HTML5 Microdata
Web Developer Tutorial: HTML5 Microdata
Getting started with schema.org using Microdata
Full list of all microdata item types
SERP: search engine results page
Peter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.
