Google, Yahoo and Bing joined forces to launch Schema.org, an initiative that adopts HTML 5 microdata standard to improve the efficiency of search engine spiders. Anyone with a basic knowledge of HTML can easily apply the HTML 5 microdata attributes and Schema.org’s unique schemas as well. Microdata describe or qualify web content to give search engine crawlers and browsers a better picture of web content.
Microdata act like descriptive words that indicate the type of data inside specific HTML tags. For instance, the schema element “model” can be added inside <b> tag in order to indicate that the text within the opening and closing tags refers to a brand model.
The most common types of microdata under Schema.org are Product, CreativeWorks, Intangible, Person and Organization. These are called Item Types to be exact. For a complete list of Item Types, visit http://schema.org/docs/full.html.
Let’s begin by optimizing a simple web page that reviews a phone.
Locate the main HTML tag that contains all the content you want to optimize with microdata. The first microdata attribute or property that we need to add in the HTML tag is “itemscope”. This attribute indicates that all the content under the parent tag is of the same Item Type.
Let’s use the source code below throughout this tutorial.
// <div> <h1> iPhone</h1> <span>Made by: <b>Apple</b> </span> <p>iPhone 5 is the first 4G brand from Apple....</p> <li> </li></div> //
Notice that the relevant information is found in h1, p, span and b tags. Since all these tags are under <div>, this tag will be our parent tag where the “itemscope” is to be added as follows:
Next to “itemscope”, add the “itemtype” attribute. This attribute specifies the Item Type. In this example, we have to use “Product” for the Item Type since the web page is dealing with iPhone.
<div itemscope itemtype="http://schema.org/Product"> </div>
Notice that the value of the itemtype attribute is a URL. You can check the URL of a specific Item Type in http://schema.org/docs/full.html.
Go to http://schema.org/Product to see the different properties under this Item Type. You can use these microdata attributes inside all HTML tags under the parent tag (in this example, the <div> tag).
Notice that Product is part of a broader Item Type called Thing. Therefore, the properties listed under Thing can be applied to Product as well.
Let’s proceed by adding three Product properties : name, brand and review.
a. Add the “name” property inside the h1 tag. The property is referenced using the term “itemprop” as shown below. This property refers to the brand or generic name of the product.
<h1 itemprop="name">iPhone 5</h1>
b. Add the “brand” property inside the b tag. The “brand” property refers to the maker of the product.
<span>Made by: <b itemprop="brand">Apple</b> </span>
c. Add the “review” property inside the <p> tag . The “review” property refers to product descriptions and reviews.
<p itemprop="review"> iPhone 5 is the first 4G brand from Apple....</p>
Below is our optimized source code:
// <div itemscope itemtype="http://schema.org/Product"> <h1 itemprop="name">iPhone 5</h1> <span>Made by:<b itemprop="brand"> Apple</b> </span> <p itemprop="review"> iPhone 5 is the first 4G brand from Apple....</p> </div> //
Rich Snippets in Search Results:
Depending on the keywords used by search engine users, excerpts from web pages optimized with the Schema markups will be displayed in search results with structured data or rich snippets such as the one below.
*An example of rich snippets from a web page optimized with Music properties under Item Type CreativeWorks.
Strike While the Iron is Hot
Schema.org is just a few months old, so webmasters who adopt this on-page SEO technique before it becomes another run-of-the-mill practice are more likely to outrank their closest competitors. Such SEO advantage may only be short-term, but the opportunity to attract additional visitors is hard to ignore.