Schema.org and Microdata Markups for SEO

The top three search engine companies — Google, Yahoo and Microsoft’s Bing — came up with an initiative to release schema.org. Schema.org is basically an HTML markup standard to be used by search engines to help them better understand your website’s content. This article will show you how to make the best use of this standard.

At the time of writing (June 2011), schema.org uses microdata (HTML5), which is basically a specification to convey semantics within an existing web page’s content. Search engines, like most machines, can only read and extract information on the page, but are not capable of understanding the real meaning of the content as intended by the content’s author.

Using Schema.org and microdata makes it possible for search engines to understand your website content beyond simple HTML and text analysis. Schema.org markup has some highly specialized markups that will tell search engines that the content is actually talking about a “person,” “place,” “thing,” “movie,” “music” and so forth.

It is actually really simple and easy to use. This tutorial will teach you how to transform your existing HTML content to use schema.org and microdata markup. The Schema.org standard is not yet widely implemented by the webmaster community (as of 2011) and will not influence the rankings of your site in Google. But this article: http://www.strategyinternetmarketing.co.uk/semantic-data-schema-org-the-future-of-search/ explained clearly that semantic data and schema.org can become useful tools in the future by search engines for analyzing web content.

Benefits of using Schema.org markup

The following are the immediate benefits:

First, search engines, particularly Google, Yahoo and Bing will easily understand your content the way you intend it to be understood.

Second, if the content is well-understood, search engines such as Google will start showing “rich snippets” in search engine results which are actually based on your markup. For example, if you do a search in Google for “italian lasagna recipe,” you will notice that Google starts showing the markup pages in a more prominent position than ordinary results. See the screen shot below:

The results with ratings and recipe photos are made possible by using markup that will produce the rich snippets.

Third, prominent results in searches can translate to better click through rates and increased organic traffic. However, according to one source: http://www.google.com/support/webmasters/bin/answer.py?answer=1211158 , Google is not yet using these markups as the basis for evaluating ranking results. This might change in the future.

Finally, search engines are starting to create several search interfaces focusing on a specific category (e.g. Google Recipe search: http://www.google.com/landing/recipes/) that rely heavily on markup content. If you do not mark up your pages with schema.org or microdata, it will not affect your current rankings in Google. However, you will lose an opportunity to rank better in the future with the markup dependent search interface.

Implementation Tips of Schema.org and Microdata

According to schema.org’s getting started guide, the initial focus is on the microdata specifications. So this tutorial will focus on examples using microdata to mark up your content.

If you have a fairly large website with lots of content, implementing microdata on a site wide scale can take a lot of time and require some big changes in your HTML source code. Below is a major tip you can use to realistically implement this markup without consuming too many resources.

Select your most important content. Those items of content that are important need to be prominent in the search results. Prioritize the implementation by marking up this type of content first.

For example, suppose you have a dynamic MP3 download website. And you have three PHP templates:

a.) content.php – template for showing text content, music business related news.
b.) mp3.php – template for showing the MP3 download product.
c.) search.php – template for showing search results in your website.

You can concentrate on implementing the microdata markup on your mp3.php template first. You would choose this one first because it is directly responsible for displaying your most important products in the search engine results — namely, your MP3 downloads.

Microdata belongs to the HTML 5 standard. To comply, your most basic HTML layout structure would be:

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the web page document</title>
</head>
<body>
The content of the web page..
</body>
</html>

It should start with the <!DOCTYPE HTML> declaration. The rest is similar to other HTML standards. Let me show you an example. Suppose you have a website that sells MP3 downloads. Your most important page is the MP3 product download page, with very basic HTML source code, as follows:

<!DOCTYPE HTML>
<html>
<head>
<title>Song #1 MP3 Example(Without microdata markup)</title>
</head>
<body>
<h1>Song #1 MP3</h1>
<b>Artist:</b> The Super Rock band<br />
<b>Genre:</b> Rock<br />
Listen here:<br /><br />
<embed src="flashplayer.swf" /><br /><br />
<b>Lyrics:</b><br />
<i>The quick brown fox jumps over the lazy dog.<br />
Mary had a little lamb, little lamb.<br />
London bridge is falling down.<br /></i><br />
<a href="buy_and_download.htm"><b>Download this song</b></a>
</body>
</html>

The code above will look like this in the browser:

To implement microdata markup in the above HTML code, below is the complete markup code (HTML comments are detailed in the explanation of the microdata/schema.org markup):

<!DOCTYPE HTML>
<html>
<head>
<title>Song #1 MP3 Example(With microdata markup)</title>
</head>
<body>

<!–This page is about music recording. Define schema.org for music recording–>
<!–This can be done by enclosing the music recording content by div tags then using itemscope element, see below–>

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

<!–The music recording title can be set by itemprop-name element–>

<h1 itemprop="name">Song #1 MP3</h1>

<!– The artist of the music recording can be assigned using itemprop artist property–>

<!– For full details of the entire properties for music recording, you can go to this page: http://schema.org/MusicRecording –>

<!– Defining item property can be conveniently implemented in your HTML source code using span tags, see below–>

<b>Artist:</b> <span itemprop="byArtist">The Super Rock band</span><br />

<!– Define the item property genre of the music recording –>

<b>Genre:</b> <span itemprop="genre">Rock</span><br />
Listen here:<br /><br />

<!– This is the audio of the music recording. However the audio content is contained in flash. To make the content of the flash readable; use noscript. You can then assign audio item property to the hyperlink so that search engines will understand that this is the link to play the audio content.–>

<embed src="flashplayer.swf" />
<noscript>
<a href="song1.mp3" itemprop="audio">Play this song</a>
</noscript>
<br /><br />
<b>Lyrics:</b><br />

<!– This is the lyrics of the music recording. This will fall under description item property –>

<i><span itemprop="description">The quick brown fox jumps over the lazy dog.<br />
Mary had a little lamb, little lamb.<br />
London bridge is falling down.</span><br /></i><br />

<!– The download link of the song is considered an offer to sell or buy the product. Define its item property–>

<a href="buy_and_download.htm" itemprop="offers"><b>Download this song</b></a>
</div>
</body>
</html>

You can see the complete web page illustrating the above examples below:

Without Microdata: http://www.php-developer.org/microdataexample/
With Microdata markup: http://www.php-developer.org/microdataexample/microdatamarkup.htm

Note that the example and the MP3 link in that page are fictitious and for illustration purposes only. For details, you can view the source code of each web page and see the difference.

Verify the Schema.org/Microdata Markup Implementation using Rich Snippets Tool

Since both pages look exactly the same (with or without the microdata markup), you will not have a clear idea as to whether or not you have correctly implemented the markup code. The best way to check is to use the Google Rich snippets tool here: http://www.google.com/webmasters/tools/richsnippets.

Let’s verify the above completed markup example. Enter this URL in the tool: http://www.php-developer.org/microdataexample/microdatamarkup.htm.

After entering the URL, click “Preview.” The results of the verification are as follows:

The error “Insufficient data  to generate the preview” is not an important result in the test. Google will only show preview for review sites and for profile sites (http://knol.google.com/k/google-rich-snippets-tips-and-tricks), so just ignore it.

The most important part of the results is under the ”extracted rich snippet data from the page” note. As you can see, Google correctly identified the type of content (music recording), and also obtained the correct values for the different item field properties.

For details about schema.org and learning about microdata, you can refer to the following links:

Introducing Schema.org for Search Engines: http://googlewebmastercentral.blogspot.com/2011/06/introducing-schemaorg-search-engines.html

The official Schema.org getting started guide: http://schema.org/docs/gs.html

Schema.org Frequently Asked Questions: http://www.google.com/support/webmasters/bin/answer.py?answer=1211158


Rich snippets (microdata, microformats, RDFa): http://www.google.com/support/webmasters/bin/topic.py?hl=en&topic=21997

Google+ Comments

Google+ Comments