Codeable info

Schemas and Microdata: The WordPress SEO You’re NOT Using

Posted on by in WordPress Tutorials

With 12 million downloads, they say “All in One SEO Pack” is the most downloaded WordPress plugin of all time. I would have no problem making the assumption that (based on those download numbers), SEO is top priority for most website owners (and not just those with WordPress websites).

Those people “in the know with SEO” might say that the “WordPress SEO Plugin by Yoast” is much more feature rich and effective (and has 2.6M downloads of it’s own) – why then is AIOSEOP more popular? Probably because it’s more of a “set it and forget” plugin (with little or no technical barriers to implement and use it).

What you’re about to read in this article about schemas and microdata is far from new information. It is slightly technical, but you should read through it – because I’ll not only give you some ways to implement this that don’t involve a developer, you’ll have a better understanding of how search engines will find and classify content moving forward.

Schemas and microdata aren’t just the future of search, they are a completely valid way to get a leg up on your competitors – and get better rankings.

The Background of Schemas

For years search results were driven by HTML titles and “meta tags”. The HTML title would be your search result title, and the “meta description” tag would be the text in search results beneath the title. The meta “keywords” tag would help the search crawler determine what search keywords your pages should appear for. Google has battled for years people trying to “game” the search results. Website owners constantly seek to find the holy grail of getting more free organic search traffic.

The web is maturing, and modern organized ways of categorizing content are evolving online. Much like the standardization of HTML (with the W3C), and the standardization of XML Sitemaps, Schema.org is standardizing tags and markup to classify and define web content. If you’re not using schema tags – you’re not getting the most from your search results moving forward.

It doesn’t matter at all for implementation, but if you’re curious Schema.org is not a standards based body like W3C – it’s just a collaboration from Google, Bing, Yahoo!, and Yandex of how to markup and better find content. Facebook Open Graph, for example, is a markup for content strictly used by Facebook (which has nothing to do with schema.org).

Schema Tags Help Define Relevance in Content

Even with pre-exising metadata, a search crawler can’t very well define context or relevance for many keywords.

Take the word “dog”.

Is this a pet? Is it a cartoon like Garfield, Marmaduke, or Snoopy? What about Snoop Dogg, or when Randy Jackson says “yo, dawg…”. You could be writing about hot dogs, or a movie or book called “Dog Day Afternoon”. What about dogma? “Dog Fancy” is about dogs, but it’s actually a magazine.

What we’re getting at here is – what’s the context of the word? Is it book, movie, magazine, audio, celebrity, event, medical term, product, business, organization, TV Series, retaurant, recipe, news article, photograph, diet, brand name, etc.? Check out the full list of schemas to get a picture of all the different ways you can classify content.

With schema.org – you use the “microdata format” to add information and context to your HTML code, so the search crawlers can figure out how to best classify the content. Microdata are tags you can use with HTML5 within the body of a webpage (unlike metatags which are in the head). This is called “on-page markup”.

Looking at some of the examples on the schema.org Getting Started page, let’s say you were writing a movie review about “Dog Day Afternoon”. Normally, you would have a heading, maybe an image, and some content. Somewhere you might stick the word “review”, and you might list things like the directory, actors, etc.

Microdata: About persons, places, or things

Think back to your school days when you learned about “nouns”. Is it a person, place or thing? You’ll find that microdata can also be a Person, Place, or Thing, but the difference is that in schemas both persons and places are also “things”.

Just like HTML, microdata is nestable. Let’s look at it using just simple plain text for a movie review:

ITEMSCOPE: Movie
name
genre
image

director ITEMSCOPE: Person
name
author ITEMSCOPE: Person
name
actor ITEMSCOPE: Person
name
actor ITEMSCOPE: Person
name
actor ITEMSCOPE: Person
name
aggregateRating: ITEMTYPE: aggregateRating
ratingValue
ratingCount
reviewCount

review
sourceOrganization ITEMSCOPE: Organization
name
url
employee ITEMSCOPE: Person
name
END ITEMSCOPE

That list is an example of nesting. The “Movie Review” itself falls under the microdata “ITEMSCOPE” of Movie Schema, which is a “Creative Work” defined as a “Thing”. So at the top level, the content of this page all falls within a “Movie”. A Movie has things directly related to it, such as name, genre, image, review – these are easily definable, and they are what they say they are.

Other items however, while they can be used for defining a movie, can have a multitude of properties associated with them. For instance, it seems simple to define someone as the “director” of a movie – the it’s defined as a “Person, a schema which has dozens of properties you could choose to use (or not). You may just use “name”, but you might also use “url”, “image”, “jobtitle”, “gender”, etc. Therefore, “directory” (while a property of “Movie), has it’s own “ITEMSCOPE” (and it’s own properties as well). All items with their own ITEMSCOPE in the list above are linked.

To further show nesting, look at “sourceOrganization” above. You could (for a movie review), list the sourceOrganization as “New York Times”, and the author would be “employee”. So in this example you see that “sourceOrganization” is a property of “Movie”, but sourceOrganization has it’s own Organization Properties, and some properties of Organization like “employee” have their own ITEMSCOPE (which is a Person.

Now let’s put that into action using some HTML code with HTML5 microdata tags:

 
<div>
 
  <h1>Dog Day Afternoon (1975)</h1>
  <span>Drama</span>
  <span></span>
 
	<div>
	  <span>Director: Sidney Lumet</span>
	</div>
 
  <h3>Dog Day Afternoon, Classic Must See Crime Drama</h3>  
 
	<div>
	  <span>7</span>/<span>10</span> stars from
	  <span>800</span> users.
	</div>
 
	<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet consequat tortor. In at tortor ante. Etiam arcu lacus, faucibus et consectetur in, cursus vitae libero. Aenean et purus turpis. In mauris justo, feugiat sed sollicitudin quis, sodales ut neque. Aliquam id tincidunt velit. Donec tristique bibendum mollis. Praesent in sapien tortor, id vestibulum lacus. 
	</div>
 
	<div>
	  Source: <span>New York Times</span>
		<div>
		  Author:  <span>John Doe</span>
		</div>
	</div>
 
</div>

You can apply the example above to nearly any type of content, using the appropriate properties that apply to your content. For all kinds of other examples, view the schema.org full list of types here.

Hey – How do I Apply Schemas in WordPress?

So the first thing you’re probably wondering is – hey, I thought this was a WordPress article – how do I use this in WordPress? You might also be thinking, I’m not a code monkey and this seems pretty technical, how can I implement schemas in my website, will I need a developer – how will that work?

You could just start adding the appropriate tags to your HTML for microdata to receive the benefits of schemas, but there are not only easier ways – there are more specific ways as well. Here are some different applications and uses of microdata inside WordPress.

hReview and AggregateRating in WordPress

You saw in the movie review above how you could apply microdata to nearly all facets of a content on a webpage. Maybe you just want to add a few properties, like a ratings system. Let’s take a look at how much difference something as basic as that simple change could make:

Let’s say we search for the movie “Old Yeller” in Google.

This is how a traditional search result looks: Title, description.

standard-movie-listing

Now let’s look at one that has some microdata:

movie-rich-snippet

You can see the one with microdata still has a title and description, but it also has a rating with visual and written x out of xx stars, and number of votes. After the description it has directory and actors – with additional links going to each of their personal pages. From the perspective of the website owner – this is HUGE! Your search result stands out, it looks more professional (enticing people to click), and you can potentially get more than one link back to your website (in a single search result).

In terms of Google results, enhancing your listings is what they call a Rich Snippet. At the time the format used was RDFa (which I believe you can still use), but now the schema.org microdata is the standardized way to do it (for all major search engines). If you’re still confused read this Google Webmaster Tools answer about rich snippets. You’ll see 3 different wants to create rich snippets, but “microdata” (schema.org) is the recommended method.

If you look into the HTML code of that IMDB page you’ll see the HTML5 microdata tags for “Movie” and it’s properties, right down to the rating:

 
<div class="star-box giga-star"> 
<div class="titlePageSprite star-box-giga-star">
7.3
</div>
<div class="star-box-rating-widget">
<span class="star-box-rating-label">Your rating:</span>
 
 
<div class="rating rating-list">
<span class="rating-bg">&nbsp;</span>
<span class="rating-imdb" style="width: 0px">&nbsp;</span>
<span class="rating-stars">

IMBD is a website you would expect to implement this standard – but you could add reviews to any applicable content in your WordPress website as well. The Author hReview plugin can do this for you. Basically once the plugin is installed, you get a new meta box when editing your posts:

hreview-meta-box

This is very simple, now you can add name, type, author name, version, URL, price, review summary,and rating for virtually ANY kind of content. The plugin not only handles the HTML5 tags for you, but it also makes the layout and display pretty on your webpage:

hreview-page-layout

There are a few other plugins that offer to add review microdata to posts, such as Author Product Review.

Use Schema Creator for WordPress Content

Schema Creator is a great all-around plugin for adding microdata to WordPress posts. It adds an “SC” icon next to the media upload icon above your content area, which gives you option for microdata insertion.

Here’s a sample of the form for inserting in “event” with Schema Creator:

event-microdata

This is what that shortcode looks like on the front end webpage:

event-microdata-frontend

And this is the HTML code it produces:

 
<div><p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
<div class="schema_event"><div><a class="schema_url" target="_blank" href="http://www.myconcert.com"><div class="schema_name">My Concert</div></a><div class="schema_description">Description of my concert </div><div>Starts: 11/30/2012 12:30 pm</div><div>Ends: 11/30/2012</div><div>Duration: 3 hours</div></div><div><div class="street">123 Main Street</div><div class="city_state"><span class="locale">Pittsburgh</span>,<span class="region"> PA</span></div><div class="postalcode">45454</div><div class="country">US</div></div></div>
</div>

With Schema Creator you can add a schema for a person, product, event, organization, movie, book, review, or recipe. This is a great basic plugin that will fulfill a lot of needs, but keep in mind that it doesn’t have every single schema, and for the ones included, it doesn’t have every property. For example, the “Movie” schema type has name, website, description, director, producer, and actor. It does not have headline, review, rating, genre, etc.

What About My Existing WordPress Content and Posts?

As you’re reading this article, you’re proabably thinking “how will I implement microdata for all my existing WordPress content?” While I did explain that microdata are usually HTML5 tags implemented in content of a web page, you could use Itemprop WP for SERP/SEO rich snippets. This is a plugin that creates usable microdata meta tags in the HTML body content like this:

itemprop-wp-serp-seo-meta

You might ask “Why would you do this?” Maybe your website can’t use HTML5 (yet) because of the visitor or technology base. Maybe you don’t have a need to make the microdata human visible in text (but want it there for search crawlers). Maybe you want certain microdata auto-pulled from WP itself (user comments, date published, date modified). This is an option for those types of scenarios.

Using Schemas in WordPress for Local SEO

We talked a lot so far about persons and things, but haven’t said much about places. Using the Local Spotlight plugin you can add a LocalBusiness schema:

localbusiness-schema

As in the image, you can add name, description, telephone, address, city, state, and zip. Instantly Google can use this for local SEO. All businesses should use this format on their about or contact page, but if you have a directory or multiple locations or offices – you could use it sitewide or for all pages.

The Local Spotlight plugin also allows you to add schemas to content for products (including ratings, reviews, and offers), reviews, events, organizations, and persons. You should use the plugin(s) the provide the microdata you require (or consider your own custom solution).

How does Google see my Microdata?

That’s easy, google has a structured data testing tool, just enter a URL to see how it would be seen in search results.

structured-data-testing-tool

Google also allows you to verify the author through a Google+ account, and you can see if your microdata is formatted and nested properly. You’ll see each item, the schema you associated with it, and it’s properties:

microdata

Conclusion

Every website has specific content that could be classified using a schema and microdata. There’s even a schema for BlogPosting. Adding microdata to content will only help search crawlers better send you (more) relevant traffic, and help distinguish your search results from the others. It’s WordPress SEO you should be using!

)
Codeable info

Comments (4)

Comment by Mark says:

How do I display the modified date in the correct format on WordPress? I can’t find the code anywhere.

Comment by JD says:

This is a great post as I have a movie website so the examples are fitting. If we download the itemprop plugin, will that have microdata on static pages and categories? Or will we have to manually do it for each page and post?

Comment by vaibhav dugar says:

thank you so much for this brilliant, concise yet a complete piece on scheme. i was lost and wondering on how to implement it. thank you for sharing. regards

Comment by Orange County Injury Attorney says:

The review stars is the Google search results have definitely increased the traffic to my website

Codeable info