Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

| Views: 35168
Rich snippets provide a way for Google to display search results in a more structured way and give the user an idea of what is on the site with a quick glance of the search result. There is an overview on how to do this using microdata, which is non-intrusive to the web page and quite easy to get started with.
Update (2 September 2016) - Google has updated their structured data testing tool, I have written a post about it here so make sure to read it too.


I've updated my current FlatPress theme to start making use of this feature to mark up each of the blog entries. It only took minutes to do, then I used the Google Structured Data Testing Tool to verify that everything was working as intended.


The microdata I used was BlogPosting schema from http://schema.org/BlogPosting

First I've defined the itemscope for the blog entry. This is done by modifying the entry-default.tpl to have the following line for the entry div instead of what is there currently:
<div itemscope itemtype="http://schema.org/BlogPosting" id="{$id}"
class="entry {$date|date_format:"y-%Y m-%m d-%d"}">


The main thing that I've added to the div is itemscope itemtype="http://schema.org/BlogPosting". This defines the entire blog entry div element as a blog post. This is similar to declaring an object.

The next thing I've updated was the entry heading, which was in the h3 tag for me.
<h3 itemprop="name" class="title">
<a href="{$id|link:post_link}">{$subject|tag:the_title}</a>
</h3>


The thing that I've added here was itemprop="name", notice no itemscope. This is similar to declaring a property on an object that holds the name of that object.

Then I've added a span tag for the content as it didn't have any other encapsulating tag I could use:
<span itemprop="articleBody">{$content|tag:the_content}</span>


Similarly for the categories:
<span itemprop="articleSection">{$categories|@filed}</span>


Lastly, I've added another span tag around the author information:
<span itemprop="author">{$author}</span>


The values for the itemprop attributes are as per the BlogPosting schema. There are several other properties that I could have used but didn't.


It's really quite simple to add the other properties in either by adding a span tag around the data that should be marked up or if there is an existing tag to use already, just by adding the itemprop attribute to that tag.

Finally running one of the blog entries through the Google Structured Data Testing Tool produces the following, which indicates that the microdata is understood correctly.
mditemprops.png


-i

Have comments or feedback on what I wrote? Please share them below! Found this useful? Consider sending me a small tip.
comments powered by Disqus
Other posts you may like...