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.
