I’m using the Independent Publisher theme. I made a child theme to add schema.org markup a few days ago. Instead of hoarding it, I sent a pull request on GitHub with the schema.org markup for inclusion in Independent Publisher.
Not sure what schema.org is? It’s a widely adopted microdata format, similar to microformats. Schema.org, however, is supported by all the major search engines, giving it a definite edge over other microdata. The FAQ at schema.org is definitely worth checking out.
Google also has a Structured Data Markup Helper that helps you add structured-data markup to a sample page. Just give it a URL, select an element and choose which structured-data to apply.
It’s not like there’s no WordPress themes without schema.org markup built-in, but there’s certainly not many. I don’t even have this built into my WordPress themes, I should update Rootdip with schema.org markup. Unwakeable, however, hasn’t been maintained in forever, and schema.org didn’t even exist back then.
There’s plenty of plugins for adding schema.org markup to your WordPress site, but I think it makes sense to just integrate it right into the theme. The theme developers know exactly where their tags are, preventing the need to add additional info to the end of the post that’s wrapped in schema.org markup.
I tried out the All In One Schema.org Rich Snippets plugin, but it would require me to enter duplicate content (title, description, etc). It would also display a box at the end of each individual post page containing that extra, unnecessary content.
Because of that, I decided to just add the schema.org markup myself. It’s really very simple and only took about 15 minutes to do. Google likes schema.org data, and making Google happy is important to the ranking of your site. 15 minutes is definitely worth the time to do it right.
Paul Lund has an excellent write up on adding schema.org to your WordPress theme. This post by Isabel Castillo basically spelled out how to add the proper attributes to images, which was one thing missing in Paul’s post.
Anyway, here’s what I’ve put together as a basic starting point for integrating schema.org into your WordPress theme. Stuff is probably missing, some stuff may be incorrect. If so, please let me know in the comments.
Loading ...Before you begin
If your theme doesn’t include some of the tags mentioned below, like <header>, <footer> , <article> , and <time> , you can use regular <span> tags instead. Just make sure you keep the itemscope attributes and their values.
Modify single article file
This is usually single.php, content-single.php, or something similar. Find the <article> tag and add the following to the end:
itemscope=”itemscope” itemtype=”http://schema.org/BlogPosting” itemprop=”blogPost”
If your theme supports post thumbnails, find the_post_thumbnail(); function and replace it with something like this:
the_post_thumbnail( ‘thumbnail’, array(‘itemprop’=>’image’ ) );
Now find where the post date/time is being displayed. You’ll want to wrap it in a <time> tag like below. You can also use a regular <span> tag as well, just be sure to add the itemprop=”datePublished” and pubdate attributes.
<time class=”entry-date” datetime=”<?php the_time(‘Y-m-dTH:i:sO’); ?>” itemprop=”datePublished” pubdate><?php the_time( get_option( ‘date_format’ ) ); ?></time>
Next find where the title is printed, usually between h1 tags, add an itemprop attribute with a value of name, like so:
<h1 class=”entry-title” itemprop=”name”><?php the_title(); ?></h1>
Now add another itemprop attribute wtih a value of mainContentOfPage to the div containing the_content(); WordPress function:
<div class=”entry-content” itemprop=”mainContentOfPage”>
Modify header.php
Only a few easy changes in this file. First, change your <html <?php language_attributes(); ?>> to look like this:
<html <?php html_tag_schema(); ?> <?php language_attributes(); ?>>
Next, change your <body> tag to this:
<body <?php body_class(); ?> itemscope=”itemscope” itemtype=”http://schema.org/WebPage”>
If your theme has a <header> element, change it so it’s similar to this:
<header id=”masthead” class=”site-header” role=”banner” itemscope itemtype=”http://schema.org/WPHeader”>
Modify footer.php
If you theme has a <footer> element, modify so it resembles the code below:
<footer id=”colophon” class=”site-footer” itemscope=”itemscope” itemtype=”http://schema.org/WPFooter” role=”contentinfo”>
functions.php addition
Paul Lund wrote this function to define the schema type automatically for the type of content being displayed (ie: article, contact page, etc). You can see the <html <?php html_tag_schema(); ?> <?php language_attributes(); ?>> function in the functions.php file in the demo repo.
Ideal Implementation
Don’t modify the core files of the theme you’re using. It’s seriously wrong and makes upgrading your theme almost impossible. Instead, create a child theme. It’s really, really easy to do and will inherit all the functionality and styles of the parent theme. For your convenience, I’ve put an example child theme up on GitHub, tlongren/wordpress-child-example.
Since it’s a child theme for Independent Publisher, you’ll want to fork it and modify it to fit your theme. If you’re already using Independent Publisher, you should be good to download the repo, upload it to WordPress, and activate the new theme from the WP dashboard.
Why Implement Schema.org?
Because Google says so:
Historically, we’ve supported three different standards for structured data markup: microdata, microformats, and RDFa. Instead of having webmasters decide between competing formats, we’ve decided to focus on just one format for schema.org. In addition, a single format will improve consistency across search engines relying on the data. There are arguments to be made for preferring any of the existing standards, but we’ve found that microdata strikes a balance between the extensibility of RDFa and the simplicity of microformats, so this is the format that we’ve gone with.
It also helps you define the default image that’s pulled when sharing a link on Google+ or Facebook. Users will still have the option of choosing another image, but probably won’t when the featured image from your post is automatically there. And this is just one example of why you should at least consider implementing schema.org markup.
As usual, comments are open, so please let me know what I got wrong and what could be improved. I appreciate whatever feedback people offer.
This post is a mess
This one is much more concise and much easier to implement, you’re probably better off starting there.
