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.
Well, now what?
Work with Me
I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!
Leave some Feedback
Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. 😀
Longren.io is proudly hosted by DigitalOcean
I completely agree with this. When I read the statement “SEO Ready” or “Optimized for SEO”, I instantly think about structured markup, i.e. schema.org has been implemented. This is not the case and usually requires for me to go in and add the functionality or better yet money wasted.
I definitely feel your pain Viktor.
Often times, “SEO Ready” or “SEO Optimized” doesn’t even seem to take structured data into consideration.
I want to add this to my theme (http://wordpress.org/themes/willingness). But it looks complicated. Do I copy paste the codes you’ve shared, or do I have to add something else — like my theme’s domain name at some places?
Yah, this post isn’t the most concise, and I apologize for that. I’ll put together another post or something that explains in details how to apply this to any WordPress theme easily. I’m actually creating it now, so expect to see it later tonight or tomorrow.
I’ll update this post with it as well.
Hope this makes it a bit easier to follow.
http://www.longren.org/add-schema-org-markup-to-any-wordpress-theme/
Thanks for this – I downloaded that schema plugin and hate that box – they say it has to be shown but I have no idea why. My theme includes some schema but not all so this was useful to make the additions. BTW it would be good if you put that ‘this post is a mess’ link at the top of the page as I’d worked though this on my theme before being linked to your improved post 🙂
I am wondering how to implement JobPosting Schema for my WordPress Job listing website. Can you please give me an idea. No Plugin is supporting JobPosting. Please give me an idea to implement JobPosting Schema for my WordPress Website If I want to apply Schema automatically for every Job Posting in my website with Company Name, Job Name, Date and Place.
Did you mean to link to a pharma page from the bottom of your article? It’s goes to lonren.org, not io.
No biggy if you meant it, but in case you didn’t you might want to change it.