Semantic markup for better search results

Search-engines have reached a impasse with respect to understanding of HTML data. Although most sites, especially databases centric sites use structured data in the backend, once the data is rendered as HTML the data looses all its structure and makes it difficult for search engines to understand them correctly. Until now most search engines have relied on extracting keyword text from the web pages and ranking the pages accordingly, taking the context around the keyword into consideration. This obviously has its limitations and it can only take you so far.

Proper markup allows a web developer to add meaning or semantics to a page, but HTML has very little vocabulary which can help a person add semantics to a page. To help in this Endeavor, Microsoft, Yahoo and Google have released a shared vocabulary on schema.org, which along with the microdata format can help web developers add proper semantics to their data. This will help search engines to properly extract meaning from a web page which will enable them to provide richer search results, increased visibility of your web pages and possibly increased ranking. When three major search rivals collaborate on something you can be sure of the importance of it.

Below is a sample markup using the schema.org vocabulary and microdata.

Original.

<img src="dell-30in-lcd.jpg" />
Dell UltraSharp 30" LCD Monitor
 
87 out of 100 based on 24 user ratings
 
$1250 to $1495 from 8 sellers
 
Sellers:
<a href="save-a-lot-monitors.com/dell-30.html">
  Save A Lot Monitors - $1250</a>
<a href="jondoe-gadgets.com/dell-30.html">
  Jon Doe's Gadgets - $1350</a>

With semantic markup added.

<div itemscope itemtype="http://schema.org/Product">
  <img itemprop="image" src="dell-30in-lcd.jpg" />
  <span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
 
  <div itemprop="aggregateRating" 
    itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">87</span>
    out of <span itemprop="bestRating">100</span>
    based on <span itemprop="ratingCount">24</span> user ratings
  </div>
 
  <div itemprop="offers" 
    itemscope itemtype="http://schema.org/AggregateOffer">
    <span itemprop="lowPrice">$1250</span>
    to <span itemprop="highPrice">$1495</span>
    from <span itemprop="offerCount">8</span> sellers
 
  Sellers:
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <a itemprop="url" href="save-a-lot-monitors.com/dell-30.html">
     Save A Lot Monitors - $1250</a>
  </div>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <a itemprop="url" href="jondoe-gadgets.com/dell-30.html">
     Jon Doe's Gadgets - $1350</a>
  </div>
  ...
</div>

Although this may seem a lot of extra work and time, the efforts will pay handsomely over a period as more people adopt semantic markup and companies come up with better tools and APIs to work with the new data.