Rich Snippet Microdata Google Example

HTML5 Microdata, Schema.org and Rich Snippets – Explained and a Free Tool

Bob Tantlinger By · · Updated · 8 min read

2026 update: structured data describes the page; it does not promise a result

Structured data is easy to overstate these days. Since Google began enhancing some search results with extra pieces of information, site owners have been trying to update their pages with the metadata that may make a feature eligible. So what is the benefit of a richer result? Good question. It can give the searcher a little more detail, but that only scratches the surface.

Rich-result markup is semantic markup: data about data. A business page can make a service, organisation, address or review relationship clearer to a machine, just as photo metadata can make a collection easier to filter. That is useful only when the relationship is real and visible on the page. Google’s current guidance is to use the documentation for the supported feature, include complete and accurate properties, and validate the rendered result after a change.

The 2012 Microdata examples below remain a useful explanation of item scopes and properties. They are not a reason to mark up every possible fact. JSON-LD is often the easiest format to maintain, but the format is less important than the truthfulness of the result. If a telephone number, rating, address or service cannot be kept current in the visible page, it should not be asserted in the markup.

That leaves a practical 2026 checklist: name the real entity, connect it to the visible page, validate the public output, and revisit it when the template or business details change. A valid block of code does not guarantee a rich result, a ranking, or an AI citation. It does make a well-described page easier to understand.

Sources: Google structured-data guidance · SEO & AI Search

Rich Snippet Microdata Google Example

Rich snippets are all the rage these days. Ever since Google started enhancing their search results with these extra tidbits of information, everyone is rushing to update their web sites with the metadata to enable them. So what is the benefit of having a “rich” search result for your site? Good question. Other than giving the search engine user a little bit of extra bit of detail, I suppose there’s also a subtle psychological factor that kicks in. Someone might be more inclined to click on a search engine result that has a 5 star rating and a friendly face than one that doesn’t. Plus, they’re just plain cool. Who doesn’t want to add bling to their search results? But this only scratches the surface. There’s much much more to them than that.

Instant information aggregation: It’s only a matter of semantics

Rich Snippets, as Google calls them, are actually semantic markup. The idea of marking up some sort of document with meta information for the benefit of machines is not a new idea. Semantic markup is as old as information technology its self. For example, a Word document contains metadata about its author, and a digital photo contains meta data about the camera it was taken with. You might, for instance, store your digital snapshots in a photo archiving program which uses this semantic data to filter your photos by date taken, lens type, flash used, etc. So, in essence, metadata is data about data.

It’s should be clear, then, how this “data about data” can be extremely useful to search engines. It can provide a search engine the ability to derive a semantic meaning from a document’s meta information rather than having to rely purely on the abstract, human understandable, concepts within the text of the document. Searches can become less about keywords in text documents and more about relationships between semantical data types.

To illustrate this point further, consider the following search: Find all restaurants with a 3.5 star or better rating on the Las Vegas strip that specialize in Italian OR Mexican cuisine AND are open after 11 PM on Sunday nights AND do NOT require reservations. On the semantic web, rather than a list of links to restaurant web sites that may or may not match your given criteria, you might get a list of “restaurant result objects” that DO match exactly that criteria and never even have to visit the restaurant’s web site. This is where the real power of semantic data lies. Instant information aggregation.

A Microdata Example

This “semantic web”, also, is not a new idea. In fact, Tim Berners-Lee himself envisioned the world wide web as a kind of “Semantic Network Model” and even the earliest HTML specifications included the concept of meta tags, which you are undoubtedly familiar with. Later iterations, such as XHTML, took this idea a step further. Most notably is the RDFa specification, which has been around for quite some time.

These later meta data specifications brought with them the concept of a hierarchical type system. Within these type systems each data type (i.e an abstract representation of a real world object) might have any number of subtypes. So, you might have a base level abstraction such as “Thing” which has a derived type such as a “Business” and then a further derived type such as a “Store”, and further still a more specific type of store such as “Book Store.”

The latest and greatest HTML5 introduces yet another form of semantic web data called Microdata. You can view the documentation on http://schema.org. Whether or not Microdata will supplant the earlier semantic markups seems unclear at this point. However, the really interesting thing about Microdata is that all the major search engines have helped develop it and are beginning to standardize on it. E.g Google currently recommends its use for its rich snippets.

Adding microdata to your html does require a little leg work, but its advantages are likely worth the effort in the long term as it appears search engines are starting to make use of it for some really interesting stuff such as Rich Snippets. I have a feeling we’ll be seeing other uses for it as well as HTML5 starts to really take hold.

Marking up your pages with Microdata

Adding Microdata to your html is a relatively painless process, but you do need to consider the semantical relationships between the data on your page. Essentially, each element you want to specify as an “item” has an itemscope (i.e, where the item begins and ends) and a number of descriptive properties which may either be primitive types such as strings, dates, or numbers, or which may be other “items” which in turn have their own item scope and properties. Consider the following example of a “Book.” A Book has an author property, which is a Person item. In addition the Book has a publisher Property which is an Organization item. Thus, we have a single item that has a relationship between two other data types.

<div class="listItem" itemprop="itemListElement" itemscope itemtype="http://schema.org/Book">
    <img itemprop="image" src="footfall.jpg" />                
    <div class="details">
        <h3 itemprop="name">Footfall</h3>
        <div class="arating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
            <span itemprop="ratingValue">3.9</span> stars based on
            <span itemprop="reviewCount">25</span> reviews
        </div>
        <p itemprop="description">
            They first appear as a series of dots on astronomical plates, heading from Saturn directly toward Earth...
        </p>

        <div class="authInfo">
            <span itemprop="author" itemscope itemtype="http://schema.org/Person">
                By <span itemprop="name">Larry Niven</span>
            </span>
            and
            <span itemprop="author" itemscope itemtype="http://schema.org/Person">
                <span itemprop="name">Jerry Pournell</span>
            </span>
        </div>
        <div class="pubInfo" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
            <strong>Published by:</strong> <span itemprop="name">DelRey Books</span>
        </div>
        <div class="clr"></div>
    </div>
    <div class="clr"></div>
</div>

What type you actually ascribe to your items is, of course, dependent on your content. The type hierarchy on schema.org is fairly extensive, but it also allows you to define your own types, if you need finer grained data types than what the current spec provides.

As for the rest of the nitty gritty details, well the documentation at schema.org is pretty clear so I won’t rehash it here.

A Microdata Parser

To help with marking up your web pages with HTML5 microdata, and for discovering microdata embedded on other websites, I have developed a schema tool which can parse a page and give you a graphical overview of the data types embedded within the html. You can see the relationships between the semantic types on your page, as well as all their properties. Clicking on an object in the diagram will display the full list of properties and the html it parsed.

This simple web page is marked up with Microdata: http://tools.webmoves.net/microdata/example/

View it with the microdata parser here:

http://www.webmoves.net/tools/microdata?url=tools.webmoves.net%2Fmicrodata%2Fexample%2F

You can see each Microdata item embeded within the html.

Meta Utopia or Meta Baloney?

It seems unclear at this point whether the idea of a truly “semantic web” will ever be fully realized. The idea of being able to search not just for keywords in text documents, but for many different related types of data matching a vast array of criteria holds great potential. However, the skeptic inside me sees a few problems.

  • Not all abstract concepts can easily be described within a simple
    schema.
    E.g what is “art”
  • The data has to be abundant. Creating meta data and classifications is extra work with no real immediate benefit. There’s currently no real “killer application” that rewards people for adding semantic markup to their pages, so the vast majority won’t see any need to do it.
  • The data has to be reliable. Spammers will inevitably exploit it thereby making the data useless. I already see pages ascribing types to data that doesn’t fit the schema. For the semantic web to function the data must be reliable.

Ultimately, only time will tell if the semantic web evolves like its proponents envision. In the mean time, it is definitely worth experimenting with microdata, if only for the rich snippet goodness.

May 21, 2012 · 8 min read All articles
Bob Tantlinger
Written by

Bob Tantlinger

Developer

Bob is a full-stack developer with over two decades of professional programming experience spanning backend systems, database architecture, and modern frontend frameworks. He’s the technical backbone of Web Moves, responsible for building and maintaining the custom applications, integrations, and infrastructure that power client projects. His expertise includes PHP, Laravel, React, Node.js, and increasingly AI-powered development…
// Keep reading

Related articles

20+ years · SEO · Web Development · Paid Media · Talk to a strategist