A topic that often comes under the limelight is that of Microdata, or Structured Data as it may also be referred to as. What is microdata, how do you use it and will it affect your SEO? They're 3 questions that we're going to look into.

HTML5 Microdata - Does it affect my SEO?

Microdata has been around since the early specification releases of HTML5, and has slowly become an important SEO factor or consideration after the summer of 2011 when Google, Yahoo and Bing came together to implement one of the largest web ontologies, Schema.org.

Schema.org and Microdata is an adaptation of RDFa that allows developers to tell search engines more about your content in a representation that's agreed and understandable by both developers and robots. RDFa has been around since early HTML4, though many webmasters opted to avoid implementing it due to its complexity and XML-like nature. It required a large amount of time and effort to implement relatively simple information. Though.. it was a start.

With HTML5 there was an entire specification dedicated to Microdata - how to implement it, how to use it and how to properly create a network of 'linked data'; a topic that has grown hugely in popularity recently.

What is Microdata?

Microdata is a HTML specification that allows you to nest metadata within existing content on your pages. It provides search engines that don't have a conceptual understanding of your content (like humans do) to actually understand your data. It allows browsers and search engines to extract richer snippets of information to provide a better user experience.

In terms of HTML5, we're going to look at two new attributes which are enough to get rich data snippets onto your website.

How Can I Use Microdata?

To start adding extra semantic information and context to our content, we need to look at the available attributes that link name-value pairs from an ontology. These attributes are:

  • itemscope, defines a group of name-value pairs - typically referred to as an item.
  • itemprop, from its literal mean 'property' it assigns a property to a microdata item.
  • itemtype, defines the item's type when used on the same HTML element as the itemscope attribute. The itemtype value is a URL identifier for the semantic vocabulary (if you're wondering what this means.. we'll cover it below).

To be able to use these attributes properly, we need to look at each one and understand what it does in terms of implementing the microdata.

Using itemscope and itemprop

Lets take the microdata implementation we use here on ALJT Media. We'll begin by abstracting out the information we're not interested with yet.

<div itemscope>
    <div class="thumbnail">
        <a href="http://www.madebymagnitude.com/blog/how-to-create-an-rss-feed-using-php-and-pdo" itemprop="url">
            <img src=".." alt="How to Create an RSS Feed Using PHP and PDO"  itemprop="thumbnailUrl" width="335" height="200" />
        </a>
    </div>
    <h3>
        <a href="http://www.madebymagnitude.com/blog/how-to-create-an-rss-feed-using-php-and-pdo" itemprop="url">
	    <span itemprop="headline">How to Create an RSS Feed Using PHP and PDO</span>
	</a>
    </h3>    
</div>

We start by adding the itemscope attribute onto our main element. Semantically, this identifies a new microdata item and will contain a nesting of name-value pairs. We then add the itemprop attribute onto any descendant elements that define some property of the item. In our example, we're defining the URL, thumbnail URL and the headline of the article. The itemprop names only apply to vocabulary-defined semantics (we'll look at this below).

In order to be a valid microdata item, we must have at least one itemprop attribute on some element that's a descendant of the itemscope element.

It's important to notice that different itemprop attribute names will get different values from their associated element. Take our example above, the URL itemprop receives its value fro the href on the a element, whilst the headline itemprop gets its value from the content within the element. Typically, image URLs and web URLs will get their values from the attribute (src / href) and not the element content.

Multiple itemprop Attributes

With Microdata it is possible to have one or more of the same itemprop attribute. There are no cardinal restrictions onto the range and amount you can have of the same itemprop attirbute. For example, here at ALJT Media when we're classifying tags and categories:

<section class="tags clearfix">
	<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/pdo">#<span itemprop="keywords">PDO</span></a>
	<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/php">#<span itemprop="keywords">PHP</span></a>
	<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/rss">#<span itemprop="keywords">RSS</span></a>
	<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/rss-feed">#<span itemprop="keywords">RSS Feed</span></a>
	<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/web-development">#<span itemprop="keywords">web development</span></a>
	<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/xml">#<span itemprop="keywords">XML</span></a>
</section>

 In the example above, we are stating that each of our 'tagged' terms for an article are taking the itemprop keywords.

Nesting itemprop Attributes

Microdata gives us large leeway in how we choose to most suitably represent our semantic data. Although there are ontologies such as schema.org that are developed and contributed to by Google, Facebook, etc. there is no universal agreed standard on how you should implement your semantically contextual information.

Nesting allows us to order itemprop's in some level of hierarchy, so we're assigning the most itemprop name-value pair to its most significant level.

Now lets extend our example  from above to implement the schema.org ontology and group our blog article under the 'blogPost' attribute:

<article itemprop="blogPost">
	<div itemscope itemtype="http://schema.org/BlogPosting">
		<div class="thumbnail">
			<a href="http://www.madebymagnitude.com/blog/how-to-create-an-rss-feed-using-php-and-pdo" itemprop="url">
				<img src=".." alt="How to Create an RSS Feed Using PHP and PDO"  itemprop="thumbnailUrl" width="335" height="200" />
			</a>
		</div>
		<h3>
			<a href="http://www.madebymagnitude.com/blog/how-to-create-an-rss-feed-using-php-and-pdo" itemprop="url">
				<span itemprop="headline">How to Create an RSS Feed Using PHP and PDO</span>
			</a>
		</h3>
		<p itemprop="about">A great thing about the recent developments in social media and social networking, is the ability to easily distribute and share great unique content. But how can you ..</p>
		<h6>
			Posted in <a href="http://www.madebymagnitude.com/blog/category/web-design"><span itemprop="articleSection">Web Design</span></a> on <time itemprop="dateCreated" datetime="2013-11-06T08:10:51">November 6th, 2013</time>
		</h6>
		<section class="tags clearfix">
			<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/pdo">#<span itemprop="keywords">PDO</span></a>
			<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/php">#<span itemprop="keywords">PHP</span></a>
			<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/rss">#<span itemprop="keywords">RSS</span></a>
			<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/rss-feed">#<span itemprop="keywords">RSS Feed</span></a>
			<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/web-development">#<span itemprop="keywords">web development</span></a>
			<a rel="tag" href="http://www.madebymagnitude.com/blog/tagged/xml">#<span itemprop="keywords">XML</span></a>
		</section>
	</div>
</article>

Now we can see how the semantic representation of our article is including the url, thumbnail, headline, summary information, section (category), the date the article was published and any related keywords or tags. So far we can see how we've already provided 5 additional pieces of information that search engines wouldn't typically extract and crawl from your information, regardless of how good your SEO may be.

Using itemtype

 The final and most important point that I want to consider is that of the itemtype attribute. The itemptype attribute is specified on an element alongside the itemscope attribute. The value of the itemtype attribute is a URL representing the microdata vocabulary. The URL is a string representation that acts as a vocabulary identifier. For those familiar with RDFa implementations and XML schema's, the identifier represents a new namespace for our element. After adding the itemtype attribute, we can now implement any of the names in the vocabulary.

As an abstract representation of our articles, we have:

<section itemscope itemtype="http://schema.org/Blog">	
	<article itemprop="blogPost">
		<div itemscope itemtype="http://schema.org/BlogPosting">
			<a href="..." itemprop="url">
				<img src="..." itemprop="thumbnailUrl" />
			</a>
			<h3>
				<a href="..." itemprop="url">
					<span itemprop="headline">A Look at Implementing HTML5 Microdata and Its Affect on Your SEO</span>
				</a>
			</h3>
			<p itemprop="about">HTML5 Microdata has slowly become an important SEO consideration after the summer of 2011 when Google, Yahoo and Bing came together to implement one of the largest web..</p>
			<h6>
				Posted in <a href="...">
					<span itemprop="articleSection">Web Design</span>
				</a> on <time itemprop="dateCreated" datetime="2013-11-12T04:19:22">November 12th, 2013</time>
			</h6>
			<section class="tags clearfix">
				<a rel="tag" href="...">#<span itemprop="keywords">HTML5</span></a>
				<a rel="tag" href="...">#<span itemprop="keywords">Microdata</span></a>
			</section>
		</div>
	</article>
</section>

Our example above defines that every article is a type of 'blogPosting' that are all microdata item descendants of the 'Blog' microdata item. In each of our 'blogPosting' items, we're retrieving the property 'headline' that is defined here on Schema.org

Using the URL of vocabularies allows us to add multiple vocabularies in the same code snippet. The hierarchical structure of most ontologies also allows us to take advantage of the inheritance to many properties, thus using the same property names in several different places.

How Does It Affect My SEO?

Microdata is often a heated debate as there is no verified research nor comment on the impact microdata has on your SEO. Using HTML5 semantic microdata elements and attributes on your content will more than likely not give your content higher search engine rankings.

However, with all the negative comments of people saying 'it has no impact' I can say, personally, here at ALJT Media we feel a large amount of additional traffic that comes from organic search keywords that have been extracted in some way from our microdata categories markup. 

I believe that as the importance of HTML5 and Microdata is growing (considering it was first published and hyped about back in 2011) the more important it'll become in where sites are ranking and how search results are displaying. This has been shown on Bing, whereby implementing Microdata on your site will have a significant impact on the organic search and rankings of your site results on its services.

Though as for Google, it doesn't currently 'reward' you in any way for implementing the new HTML5 semantic-data attributes and elements:

As HTML5 gains in popularity and as we recognize specific markup elements that provide value to our indexing system, this is likely to change, but at the moment I would not assume that you would have an advantage by using HTML5 instead of older variants….

Personally, I would recommend using HTML5 where you think that it already makes sense, perhaps reverting to HTML4 if you can determine that the browser won’t support the elements of HTML5 that you use properly. While this will not result in an advantage for your content in our search results, it generally wouldn’t be disadvantageous either.

Please share this article if you enjoyed or found it helpful.

2
Ignite your brand, utilise user-generated content no matter where you or your audience are ›