Fit for Google Search: Using Rich Snippets in WordPress

No Picture

Schema.org is a joint project by Google, Microsoft, and Yahoo to structure and markup the content of websites in a way that it can easily be recognized and indexed by search engines. This principle makes work easier for webmasters as they can concentrate on one single method and take as much advantage as possible of it. Furthermore, Schema.org is also very important for SEO. Google uses generated rich snippets according to Schema.org. These are bound to increase clicks and visits because of the visually more striking search results. Google doesn’t use rich snippets as a ranking factor (yet). Now read on to learn about using rich snippets in WordPress…

fitforgooglesearch-teaser

What Can Be Marked Up with Schema.org

Schema.org markup can be added to several website elements, for example:

  • Persons
  • Places, stores, restaurants
  • Health and medicine
  • Events
  • Creativity: creative work, book, movie, music, recipe, TV series
  • Organization
  • Review, rating
  • Product, offer

A complete list with elements that can be marked up and a documentation can be found at Schema.org.

Rich Snippets

The Schema.org markup is mainly used to create rich snippets. These snippets can be found on the search engine results pages (also called SERPs) and are supposed to bring added value to users. If you search, for example, for a recipe (which has been prepared with rich snippet information), you’ll probably see recipe suggestions or information such as cooking time or calories intake. Rich snippets differ widely from usual search results. They draw attention and, hence, get more clicks. Here are two examples of rich snippets:

Markup Example for a Recipe

rich-snippets-1

Marked up Pop Star Search Result Snippet

rich-snippet-2

A Short Video Introduction to Rich Snippets

How to Use Schema.org

If you want to use Schema.org, all you need to do is to add some extra HTML markup to your website. This is to let the search engine know what your page is about and what elements can be found there. If your page contains a video, you would have to start by finding the outer container and mark it up with the attributes itemscope and itemtype. See the code example:

<div itemscope itemtype="http://schema.org/Movie">

</div>

Each element in the video can be defined by using the attribute itemprop. To define the name of the video, you’ll only need to slightly modify the title:

<h1 itemprop="name">Avatar</h1>

This way each element within the video can be marked up to be recognized by search engines. Here’s an example of a complete markup:

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
</div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div> 

Use Schema.org with WordPress

Using Schema.org with WordPress is fairly easy as only the theme needs to be slightly modified. It would be a good idea to create a child theme before starting to modify the theme to preserve any changes after a theme update. Now, add the following function to the functions.php of your theme:

<?php
function html_tag_schema() {
    $schema = 'http://schema.org/';

    // Is single post
    if(is_single()) {
        $type = "Article";
    }

    // Is author page
    elseif( is_author() ) {
        $type = 'ProfilePage';
    }

    // Contact form page ID
    elseif( is_page(1) )
    {
        $type = 'ContactPage';
    }

    // Is search results page
    elseif( is_search() ) {
        $type = 'SearchResultsPage';
    }

    else {
        $type = 'WebPage';
    }

    echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';
}

This function automatically defines the right schema for the WordPress pages. To make sure that the contact page is correctly marked up, find out the contact page’s WordPress ID and change is_page(1) to the correct ID. This function can be extended to your needs. The markup works perfectly with custom post types.

Find your theme’s HTML tag (usually to be found in the header.php) and change it in the following way:

<html <?php html_tag_schema(); ?> <?php language_attributes(); ?>>

If you’re done, all pages will be correctly marked up. Next, look for the title tag which is also in the header.php. Change the tag as follows:

<title itemprop="name"><?php wp_title(''); ?></title>

Now it’s time to mark up the main content. Look for the div in the single.php that encloses the the_Content() function. Add the following information to the div:

<div id="content" itemprop="mainContentOfPage">
<?php the_content();?>
</div>

It’s always a good idea to let Google and other search engines know when an article was published or edited. These are, eventually, indicators for its currentness. Date tags are most likely to be found in the single.php. Add the following:

<time class="entry-date" datetime="<?php the_date('c'); ?>" itemprop="datePublished" pubdate><?php  the_time( get_option( 'date_format' ) ); ?></time>

Markup WordPress Article Images Correctly

The last step is the markup of post thumbnails. Open the functions.php of your WordPress theme and find the the_post_thumbnail() function. Here we’ll need to add another attribute – “itemprob => image”. This attribute tells the search engines that an article image with direct reference to the full article was used. The function should look like this:

<?php the_post_thumbnail('thumbnail', array('itemprop' => 'image')); ?>

If there’s already an array in the function, separate the arrays with a comma and add one after another.

Conclusion

Such easy-to-implement on-page SEO actions possibly attract more visitors and turn them into customers. You may get around these steps if you have a personal “web diary”, but they’re absolutely necessary if you (want to) earn money with your website. Standing out from the mass will potentially get you more visitors and, thus, a better sales volume.

Related Links

 (dpe)

Andreas Hecht

Andreas Hecht is a journalist and specialist for WordPress and WordPress Security. He roams the web since its inception. He has published an ebook on WordPress Security, which you might want to take a look at.

Sort by:   newest | oldest | most voted
Mick Kennys
Guest

Never heard about it before, but will give it a try. Should it work with non-english snippets?

Dieter Petereit
Noupe Team

Yes, any language Google itself supports.

Digital Marketing Solutions
Guest
Digital Marketing Solutions
That’s the best plugin for rich snippets. I might add to other viewers here who are not SEOs that basically, Google often creates its own rich snippet — especially if you don’t force your own rich snippet on them. This can lead to more flexibility, as Google will extract different phrases (meta descriptions and meta titles to create your rich snippets) based on different search queries. So there’s a lot of debate in my community on whether or not on-page SEO is even worth it. At best, on-page SEO is about 5% of your total overall search marketing efforts. There… Read more »
wpDiscuz