Blog archive

Using HTML5 Microdata for Better Search Engine Results

Have you ever noticed when using search engines that some of the results look much better than others? Why do some of the results have pictures and other specific information and links?

A good way to provide this additional information to search engines is using microdata, which adds extra metadata to HTML to better describe the content. A repository of some common vocabularies (schemas) is available at schema.org. The "person" schema could be used to further describe information about a blog: 

<!DOCTYPE html>
<html>
<head>
  <title>Robert Boedigheimer</title>
</head>
<body>
  <section itemtype="http://schema.org/Person" itemscope>
    <h3 itemprop="name">Robert Boedigheimer</h3>

    <img src="/images/robert.jpg" width="206" height="250" itemprop="image" /><br />
    <nav>
      <a itemprop="url" href=" http://aspadvice.com/blogs/robertb/">Blog</a><br />
      <a itemprop="url" href="http://tinyurl.com/boedie-mvp">MVP Profile</a>
    </nav>
  </section>
</body>
</html>

The itemscope designates the area in the document where a particular schema is used. In this case it's using the http://schema.org/Person schema. The schema provides specific properties that can be attached to the content. The itemprop attribute with value of "name" indicates that this content represents the person's name. The <img> tag has added the itemprop of "image" so that search engines understand which of the various images on the page is a photo of the given person.

Adding microdata is really easy to do, and it's a great way to distinguish your products in search engine results and bring you new customers!

Posted by Robert Boedigheimer on 02/23/2015


Keep Up-to-Date with Visual Studio Live!

Email address*Country*