Ever see those fancy looking search results in Google? They look a lot more attractive and give you more information than a regular search result snippet. They can have things like photos, addresses, reviews and all sorts of other info besides a basic title and description. We call these rich snippets and there is no reason why you can’t get your web pages displaying like this in Google’s search results.
Major search engines like Google, Bing and Yahoo! aren’t mind readers (despite how much they would like to be). So in order to give you the most relevant result for your search query, the more information they have about the content of a page, the better. Machines can’t categorise content very well, so when we code a web page we need to leave some hints to tell search engines what’s what. Including little bits of markup to define types of data on our page creates – what we call structured data.
If we are publishing a page with a recipe for example, sure, search engines can get a reasonable idea that the content of the page contains a recipe. The page title and keywords within it would make this pretty clear. But in order to display something like the time it takes to cook the meal, or how many calories it contains, search engines need more help. If we highlight all of these things using structured data, the search engine can provide users with a much more attractive and accurate search result for their query. Seeing this information may be the difference between a user clicking or not clicking on your search result.
In order to make this all work, we need to do a small amount of coding. There are 3 main markup formats for creating structured data that search engines can understand. These formats are microdata, microformats and RDFa. Each of these have their own history, vocabulary and syntax. For this article we will focus on using microdata, which is recommended by Google and is more widely understood. For all the information you need about microdata, head to http://schema.org/.
Let’s run through a quick example of adding some microdata to a site. Let’s say we run a local record store called Bob’s Record Store. It would be helpful to let search engines know we are a local business, where we are located and what our opening hours are. In this example, our website already has this information in the footer and the html code looks like this:
<span>Bob's Record Store</span><br>
<span>123 Fake St, Perth</span><br>
<time>Open Monday to Saturday, 9 - 5pm</time>.
Now when we insert the relevant microdata markup, it will be much more easily understood by search engines. The new markup looks something like this:
<div id=”address” itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="legalName">Bob's Record Store</span><br>
<div itemscope itemtype="schema.org/PostalAddress">
<span>123 Fake St, Perth</span><br>
<time itemprop="openingHours" datetime="Mo-Sa 09:00-17:00">Open Monday to Saturday, 9 - 5pm</time>
When we test this using Google’s structured data testing tool, we see Google can now read our businesses name, opening hours and our postal address.
If unlike this example you need to provide info differently from what is visible on the page, use meta tags instead – as seen here. Be patient if your rich snippet doesn’t start displaying straight away. It can take a while for the new data to be crawled.
There are virtually limitless types of structured data, and as a simple rule the more you use the appropriate markup to correctly identify the content on your page, the better! Just make sure the rich snippet markup accurately reflects the primary content of the page otherwise you could get on Google’s bad side.
Rich snippets are overlooked far too often. Maybe it’s because they seem boring and they have no visible impact on the frontend of your site. Maybe it’s because they are too ‘codey’ and too confusing to implement.
All that matters though is the edge they can give you over your competitors, and the fact they offer potential customers more information and incentive to click on your search result.