Microdata Essentials – Practical Examples You Can Use Now

Adding microdata to your site’s content is a super way to make it stand out in search results. The most basic microdata properties can be added globally by your theme. But, you’ll want to get more specific than that for high-profile content on your site, such as your About page, events that you’re hosting like webinars, and products that you offer and/or review.

There are tools and tips galore to help you do that. There are even plugins for it. I’ll be covering several of those tools and plugins in detail in later posts.

But to pick the right tool for you, and get the most out of it, you’ll first want to know what you can do with microdata. So, in this post I want to help you understand the inner workings of microdata.

I know you’ll be as fired up as I am about all that you can do with it. I suggest you get a notepad handy to jot down all the ideas this is going to give you!

Here we go.

What Microdata Looks Like

It’s just a bunch of tags, really. They surround your content, much like regular HTML tags do. But, they are made for search engines. More specifically, you’ll want to make the most of what Google’s Rich Snippets support.

Now, don’t freak out. I’m going to show you a bit of that code, but I’m going to explain it so you get just the essentials that you actually need. And, I want you to start getting an idea of the kind of content that you can place microdata markup around. This is not a coding class. Okay?

Let’s start at the top.

Microdata Markup

Itemscope – this tells search engines that microdata is coming next.

Itemtype – this always starts with http://data-vocabulary.org/ After that, it defines what all the rest of the microdata will be about. A few that are supported in Google Rich Snippets right now are: Events, Music, Person, Product, Recipes, Reviews, and Videos.

Itemprop – these are properties of the Itemtype. So, if the Itemtype is a Person, then an appropriate property would be Name. Other properties for Person are: photo, title, address, and URL of website.

Has this got your gears spinning yet? Yep, me too. I bet you can see that this is the perfect type of microdata for your About page. The things listed in the Itemprop exactly match some of the most important info on the page to tell Google that this page is about a Person, and who that Person is.

Let’s Do It For Real

Okay, let’s put legs on this. Here’s the kind of content you can use to place the appropriate microdata around it on your About page.

Hi, my name is MaAnna Stephenson,
and I’m the owner of BlogAid.net, located in Nashville, TN.

Yep, it’s that simple. There can be eight instances of microdata markup in that one little sentence (including the image). And it tells very valuable info it needs to know about me. (Remember, this is about me, not BlogAid.)

Here’s a screenshot of the microdata code needed to do it.

The itemtype code is highlighted in yellow. The property is highlighted in blue.

Just have a look at those to get an idea of what goes with what.

Let’s See It

You can find the sample post with this markup on my sandbox testing site here. It will look like a perfectly normal About page to the viewer. But to Google, it is rich with specific info and details about that person.

And you can see all that microdata candy for search engines in this Google Rich Snippet Tool Test here. So, what the viewer sees and what the search engine sees are very different.

And here’s the Rich Snippet example. Keep in mind that it does not show everything that Google can index, or everything that Google will actually display in the real snippet in search. So, it’s a little misleading in that it doesn’t really show you all the goodies. I’m showing you this now so that you won’t be disappointed when you preview your snippet in the preview tool.

Now, you may also have noticed that the image in the snippet is not the same as the one in the actual post. That’s because Google is pulling in the image from my G+ profile. (I setup the most basic of authorship connections on this sandbox site in Part 3 of this series.)

See the Good Stuff

The point is, Google is indexing more than it is showing in this snippet preview. Scroll down the page of that Rich Snippet Tool Test and see the real candy that Google is indexing about me. Then run the tool test on your About page URL and see the difference.

At the time of this writing I have not updated the About page on BlogAid with microdata and I can hardly wait. But, I’m in the process of updating the whole site and theme first, and then I’ll add this extra markup. You’ll probably want to do the same. Be sure to see previous posts in this series for why and how it’s important to get your whole theme updated to output microdata.

Do I Have to Code?

No, not necessarily. I’m just showing you the code so you can see all of the properties you can include around certain pieces of content. In later posts I’ll show you easy ways to do it. Knowing what you can do will help you start thinking about how to write content to maximize microdata.

Plus, it will help you choose the type of tool or plugin that will most benefit the type of content on your site. For things like the About page, you may need the simplest of online tools because the info on that page doesn’t change much.

Let’s Do Another One

Let’s add an Event this time. Like me, I know a lot of you host webinars and Hangouts and post about it on your blog to promote them. So, let’s add one of those.

Here are some of the properties you can add:

summary – title of the event
url – to a page with the event details
description – what the event is about
startDate – can include both the starting date and time (requires special format)
duration – how long the event will last (requires special format)
performer(s) – the main performer (you and/or a guest)
eventType – there are several availble, but webinar is not one of them. See all of them at the bottom of this page. http://schema.org/Event I would consider a webinar to either be an Education or Business event.

Here’s the basic info we are including in our text.

Fix Your Google Accounts Webinar

Learn how to get your multiple Google Accounts squared away. We’ll cover how to map your current connections, plus resources to manage and merge your accounts.

Hosted by MaAnna Stephenson with special guest Ronnie Bincer

May 29, 2013 at 12:00PM EDT

Here’s a link to the post itself.

Here’s a look at all the nice markup in the code.

Here’s a look at the Rich Snippet. Notice at the bottom it has the date and a link on the title of the event.

Go have a look at all of the nice pieces of info that Google indexed about the event, me, and the guest. That’s what counts most.

Caveats

If you looked at the actual post, you may have noticed that I had issues with getting the text to line up next to the top of the image properly. It has to do with the < div > tags used by the markup code. There are ways around it, and I’m still playing with different layouts and formatting techniques as I research the best way to use microdata markup. Unfortunately, if you ask ten SEO pros, you get 10 different answers. That’s just the way it is with all code, not just microdata, and not just code for websites.

Also, when I used this XHTML5 Validation Tool, it freaked out on a few things that I found odd. First, it didn’t like it when I had the image code placed inside the event markup tags. That helped with the alignment issue, but made the code give a validation error.

Next, it really didn’t like the rel=publisher link, or the category for the post, which is the default Uncategorized.

It also flipped out when I included a link for a G+ profile on the names of the presenters. So, I left them out of this example.

These errors do not mean that Google will have any issue indexing the code. It means that the validator takes issue with it. In other words, it may work just fine for Google regardless of what the validator thinks.

Wrap Up

I hope from these examples you’ve seen just how powerful microdata markup can be. It’s well worth the effort to take the extra time to do it, especially on static pages where the content doesn’t change much, such as your About page. For events, it will be rather easy to use a cookie-cutter approach where you use the same markup code snippet over and over and just update what changes, like the name (title), description, and URL.

I’m already testing online tools and plugins that will help you create this kind of markup on the fly, and in a way that you have to deal with the least amount of code handling, and can make your content look natural for the people reading your site. So, watch for those posts, and bookmark this series. You can also subscribe directly to my RSS feed to get the posts delivered to your email inbox to ensure you don’t miss any.

More Help

If you’re not already on Genesis, why not? When you’re ready to step up to the best theme framework on the planet, I hope you’ll consider using my affiliate link.

If you just want a safe place out of the public eye to test all of this, or to get your feet wet with Genesis first, I’ve got a way for you to do that too.

In this test I did not maximize the configuration for either the WordPress SEO plugin or authorship. There is a lot more info to give Google by doing both. If you need help with those, check out the SEO and AuthorRank Video Course that covers both. Or, see the full BlogAid Video Tutorials Library for help with everything, all in one place.