WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+12Pin on Pinterest4Share on LinkedIn5

schema-markup-add-wordpress

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.

schema-funny-cat

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.

Share on Facebook0Tweet about this on TwitterShare on Google+12Pin on Pinterest4Share on LinkedIn5
  1. webtady left a comment on September 28, 2016 at 3:53 pm |

    Thank you for your brief explanation for Schema markup for WordPress. Really appreciate it.

  2. Laro left a comment on May 13, 2016 at 3:21 am |

    articles are useful.

  3. Kodden left a comment on April 19, 2016 at 6:49 pm |

    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

  4. agence web maroc left a comment on April 15, 2016 at 5:10 am |

    Hello, i feel that i noticed you visited my web site thus i got here to go back the prefer?
    .I’m trying to find things to enhance my website!I guess its adequate to use some of your concepts!!

  5. yepi 2 left a comment on April 10, 2016 at 6:02 pm |

    Very impressive article. I have read each and every point and found it very interesting.

  6. Guide Us Online left a comment on April 9, 2016 at 9:57 pm |

    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.

  7. Abdul Haseeb left a comment on March 24, 2016 at 11:34 am |

    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.

  8. huagongkeji left a comment on March 21, 2016 at 8:51 pm |

    Electrostatic spray is to use solid powder solvent instead of the liquid form, the high voltage makes powder coating negatively charged, With the help of electrostatic attraction, it is adsorbed on the surface of the workpiece to be coated, it is the coating method obtained after being heated and melted (or cured). Electrostatic spray is a new technology, what the powder coating we used does not contain a solvent and a dispersion medium and other liquid ingredients, when we use it, there is no need of dilution and adjusting the viscosity, itself can not flow, after melting it can flow, it will not like a liquid coating adhered to the surface of the workpiece. Therefore, electrostatic spray coating has the features of high efficiency, excellent film properties, solvent evaporation, little environmental pollution, energy consumption less, simple process, short production cycle, low cost, easy to paint automation etc..

    FIPFG coating process can be directly coating the surface of the electrostatic spray products, to be closely integrated with the coating surface with a high degree of protection, good adhesion, anti-aging performance advantages. However, if the powder contains a small amount of PTFE and wax wrinkle agent, it will significantly affect the adhesion of the strip, therefore, we should pay close attention. At present, the technology has been widely used by the electrical industry.
    http://www.hgcx.cn/en/index.php?p=product&lanmu=12

  9. Sl blogger left a comment on March 21, 2016 at 8:03 pm |

    Thanks for tips..

  10. MohammedTahir left a comment on March 15, 2016 at 7:13 am |

    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?

  11. sunipeyk left a comment on October 15, 2015 at 12:46 am |

    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.

  12. ZT Mesh left a comment on September 1, 2015 at 8:14 am |

    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!

  13. Sanjeev left a comment on July 16, 2015 at 11:03 pm |

    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?

  14. Steven Gluyas left a comment on June 27, 2015 at 5:58 am |

    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

  15. Eduncle for education left a comment on June 27, 2015 at 4:34 am |

    I am also using wordpress theme on my blogs. These schema markup codes are what I really needed, Keep the great work up.
    Cheers!

  16. Patrick Coombe left a comment on June 25, 2015 at 11:51 pm |

    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

    • Jai left a comment on June 26, 2015 at 12:12 am |

      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.

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai 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

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project