How to Add Schema Markup to a WordPress Theme
In the world of computer programming, schema can be defined as the overall structure for a database. As per the Schema.org website, Schema markup is the code that you integrate with your website to help the search engines return more informative results for your users. If someone has ever used rich snippets, they’ll understand exactly what schema markup is all about. When you include content in your HTML pages, the search engines see it as plain textual content. They don’t know the content’s relevance or what the content is all about.
Schema tells the search engines what your data means and also helps structure your data. For example, when you post an article on your website and include the author’s name in the meta data, only you will know that the mentioned person is the author of the article. In order to make the search engines identify the author, you must include some kind of markup code around the author’s name and this is exactly what Schema.org empowers you with. Schema is a type of ‘rich snippet’ or HTML markup that adds extra information to the relevant content in a search result.
“In general, the more markup there is – schema, video or whatever – the easier it is for search engines to be able to interpret what really matters on a page,” – Matt Cutts.
To better explain the Schema concept, here is a funny image of a cat. I and you know it’s a cat, but a person who has never seen a cat in his life, doesn’t know anything about it. Consider the search engines as this novice person. The search engines only see it as an image and they try to pull relevant information from the ALT tag. To make this picture more search engine friendly, we have to put some indicator on the cat (a hat with”CAT” written all over it in this picture). So, when using the Schema Markup code, we are actually putting visual sensors for search engines. I hope that explains it better.
Why to Use Schema Markup?
A very small percentage of websites have integrated Schema Markup in their code till now, but despite the low number of sites carrying Schema integration, Google still delivers schema-generated markups in nearly 37% of search results. Adding the relevant Schema markup will make your website more semantic and prominent in the eyes of search engines. Also, there is a sure chance to rank higher on the search engines in the near future.
“Pages with Schema markup rank four positions higher in search results” – Searchmetrics.
Adding Schema to a WordPress Theme
A WordPress theme doesn’t contain Schema Markup by default. In order to add it to your theme, you should read the following steps and implement them.
1. First, we have to broadly define the page type for which we are adding the Schema Markup. According to the Schema.org website, a page can be an article, profile page, blog, search results page or just a general webpage. To do this, we must include this function in our functions.php file of the applied WordPress theme. With the help of this function, we can dynamically declare the page type for each kind of WordPress template.
function html_schema()
{
$schema = 'http://schema.org/';
// Is single post
if(is_single())
{
$type = "Article";
}
// Is blog home, archive or category
else if(is_home()||is_archive()||is_category())
{
$type = "Blog";
}
// Is static front page
else if(is_front_page())
{
$type = "Website";
}
// Is a general page
else
{
$type = 'WebPage';
}
echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';
}
The above code defines your single posts as an ‘article’ type of page. If you are using a static front page, then that will be defined as a ‘website’ and if you have your blog posts on the home page, it shall be defined as a ‘blog’ page type. If none of the conditions are true, it will be a generic ‘webpage’ type.
2. Open the header.php file from your WordPress theme and find the <html> tag at the beginning of the template. Now, call the function defined in the first step. So, your <html> tag should look something like this :-
<html <?php html_schema(); ?>>
3. In the header.php file, find the <title> tag and insert itemprop=”name” to define the name for your webpage/blog/website.
<title itemprop="name"><?php wp_title(''); ?></title>
This will set the name for your blog, website or webpage pulling it from the site title.
4. Again in the header.php file, find your logo(text or image) that is linked to your home URL. We will use the markup itemprop=”url” to set URL for the webpage/blog/website.
<a href="<?php echo get_option('home'); ?>/" itemprop="url"><?php bloginfo('name'); ?></a>
5. Now we need to define the site navigational elements. In order to do that, find the navigation menu (most probably in the header.php file) that is encapsulated in a <nav> or <div> tag and insert itemscope itemtype=”http://schema.org/SiteNavigationElement” to make it appear somewhat like the following code. Any links wrapped in this will become the Schema Navigation Elements.
<nav itemscope itemtype="http://schema.org/SiteNavigationElement"> <!--WORDPRESS NAVIGATION MENU--> </nav>
6. In order to mark up the navigation links using Schema, we need to add a function to the functions.php file. This will add itemprop=”url” markup to each link in the navigation menu.
add_filter( 'nav_menu_link_attributes', 'add_attribute', 10, 3 );
function add_attribute( $atts, $item, $args )
{
$atts['itemprop'] = 'url';
return $atts;
}
7. For a blog post type, you have to use the markup itemscope itemtype=”http://schema.org/BlogPosting” itemprop=”blogPost” to define it as a blog posting. Include this code in the <article> or <div> tag after your WordPress loop begins. Your post title, content, meta data etc. should be encapsulated within this markup code. Following is an example of how it should work.
<!--WORDPRESS LOOP BEGINS--> <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost"> <!--POST CONTENT--> </article> <!--WORDPRESS LOOP ENDS-->
8. Now in the post content we need to add markup code for the headline, URL, date of publishing, content and image. In order to do this, follow the code below.
For headline and URL (permalink) put itemprop=”headline” and itemprop=”url”.
<h2 class="post-header" itemprop="headline"> <a href="<?php the_permalink() ?>" rel="bookmark" itemprop="url"><?php the_title(); ?></a> </h2>
For the featured image inside your post or article, add itemprop=”image” inside the <img> tag like this.
<img src="" itemprop="image" />
For the date of publishing, add itemprop=”datePublished” around the post date.
<span itemprop="datePublished"><?php the_time('F jS, Y') ?></span>
For textual content, add itemprop=”text” in the surrounding <div> tag around your content or excerpt.
<div itemprop="text"><?php the_excerpt(); ?></div>
So, by now you should have a fair idea of how to use Schema Markup codes in your WordPress Theme. You can use the Google’s Structured Data Testing Tool to check if you have integrated Schema into your website efficiently.
For more details, you should research on Google and also visit Schema.org website. And if you need personal help in setting up Schema for your website, you can contact me.
Jai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster
Jai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles
thanks for throwing more light onb schema markup i learnt alot
Am a WordPress user also, thanks for this,nits really helpful. ..
That theme makes my work easy .. Done Dissertation Help
Nice article and after studying you article i am able understand more about scheme
Very useful info, thanks
I have a question, how to display post with image in search engine, I have searched many sites, but I could not find the answer please guide me.
Thanks
Hello Jai, is it possible to show automatic tables in search engine with these schemas?
I am stuck in this. Please tell.
Regards,
Roon (hotstar)
I find your article really nice. Thanks for sharing this tip, I am thinking of integrating schema.org in my website http://www.inoover.com.
Cheers,
Thank you for your brief explanation for Schema markup for WordPress. Really appreciate it.
Hello! Thanks for sharing, trying to learn how to implement in my site.
One doubt: I have a local business site with some pages that describe the service, which schema.org is best for this kind of pages? Blog/Website/Webpage
I’m using Zerif theme any tips ?
Thank you!! Best Regards
very nice information after watching my website on google webmaster tool and found that the schema.org and after a long search it is ended now, thanx for sharing this awesome information.
Hi,
I want to show my site’s favicon (http://domain.tld/favicon.ico) with each of my post in google search result. Can you give some code or tell me what should be modified in above code for this purpose, plz?
>I’m using wordpress.
>Yoast creates og: meta tags.
>I also have my favicon in png format 500 x 500.
>My every post has one or more embeded video(s) like Movie Trailers etc.
>I prefer embedding dailymotion videos.
Amazing tutorial. I was just moved our companies website from html to WordPress and wondering how can i use markup now? thanks you have solved my problem.
I have one more question: How can i add itemprop=”articlebody”. in my single blog post?
Thank you for your brief explanation for Schema markup for WordPress.
With your permisson i want to add a minor correction for the publish date;
<span itemprop="datePublished" content="">php the_time( ‘c’ ); part is a must for structured-data/testing-tool for google.
Nice
I am also using wordpress theme on my blogs. These schema markup codes are what I really needed, Keep the great work up.
Cheers!
Hello, Good tutorial. But i am trying to testing my site on Google Structure tool to find my theme has schema markup implementation by default or not, but don’t know the correct option there. Can u helps me?
I building a new site and it is not yet live…….what is the cost for you to put the code in for me? i am not too good at doing the php thing and would hate to screw it up
Thanks
Steven
I sent you an email Steven.
I am also using wordpress theme on my blogs. These schema markup codes are what I really needed, Keep the great work up.
Cheers!
Fantastic Post! Great advice, I’ve been slacking on implementing this on a few websites. One word of caution is to be careful if your theme already has this stuff or not. Also FYI – this post was shared on Inbound:
http://inbound.org/articles/view/how-to-add-schema-markup-to-a-wordpress-theme
Hi Patrick, Thanks for the appreciation. Yes, people have to be careful that Schema hasn’t already been integrated into the theme (highly unlikely). Also, I know about the Inbound link (I shared it there 🙂 ). Feel free to share the post in your social network.