Add Rich Snippet Support in WordPress and Dominate Your Personal Brand

Tara Hornor

Google is providing a host of (relatively) new features that allow you to add “rich snippet” metadata to your web content. For those who design, write, and manage WordPress blogs, this is a powerful tool that can help you build your personal brand much more efficiently — the reason being that Google will display your author information in search results if you’ve properly labeled your metadata via the rich snippets markup!

The reward for adding rich snippets of metadata is that as you get more blogs published with your name, your face or logo keeps popping up in search results. This is just one more crucial way to get your personal brand in front of people, and it’s easy to achieve in WordPress.

What Are Rich Snippets?

Normally, HTML markup is used for displaying content in a web browser. “Rich snippets” are a format of HTML that allow you to carefully define pieces of information within a web page so that search engines and other programs know what the heck the data is good for.

Here’s an example of how you might normally introduce yourself:

<p>Hi there! My name is Tara Hornor! Nice to meet you.</p>

Using Rich Snippets, we can tell search engines who I am using code like this:

<p>Hi there! My name is <span itemprop="name">Tara Hornor</span>! Nice to meet you.</p>

You can define scores of items like logos, birthdays, product IDs, and much, much more. But, today I’m really only interested in me…or at least my standing as an author, so that my picture shows up prominently in Google search results.

For much more information on rich snippets, here’s everything you ever wanted to know:

Getting Started

For you non-web developer types out there, don’t worry about getting your hands a little dirty with some coding. I’ll walk you through it in baby steps.

Note: You will need access to the “Appearance” -> “Editor” area of WordPress, which means you’ll need to be an Admin for the site. You can still complete Steps 1-3 on your own and refer your admin to Steps 4-5 if you are not an admin yourself.

Step 1: Your Google+ Page

You’re going to need a Google+ page for this to work. If you haven’t got one already, go set up a page really fast (it just takes a few minutes), and come back to this walkthrough.

Go to the Signup Page for G+

Step 2: Contributor To…

To tell Google that you’re officially a contributor (author) for a site, you have to update the “Contributor to” field on your About page. Log in to your G+ page and click on the “About” tab:

Now click the “Edit Profile” button in the upper-right part of the screen:

Click on the “Contributor to” section. When you hover your mouse over the field, it will highlight the entire section:

It’s very important to not include the “www” to the URL, as this will break the connection and Google will give you an error.

Make sure the link is set to “Public,” and hit save to complete. You’ll need to click the “Done Editing” button as well in the upper-right.

Step 3: WordPress Profile

Log in to your WordPress website, go to the “Users” -> “Profile” section, and paste your G+ URL into the “Website” field:

NOTE: Make sure you add “?rel=author” to the end of your G+ URL. This is very important. Now, my URL looks like this:

https://plus.google.com/u/0/117883511520701899763?rel=author

Step 4: WordPress Editor

Next, we need to update your WordPress blog so that it automagically connects your G+ profile to your blog. If you don’t have admin access to your blog, then you’ll have to stop here. You will need to be able to access the “Appearance” -> “Editor” options within WordPress to complete this feature.

Sign into your WordPress blog as an admin, and cruise on over to the “Appearance” -> “Editor” option (I’m using WordPress 3.3.1 for this tutorial):

99% of the time, you will need to edit the “single.php” file, but your theme may have the info you need in the “content.php”, “loop.php”, “functions.php”, or other file. In our example, we’re going to “functions.php”.

What you’re looking for as you skim through your PHP files is the point where the WordPress theme posts the author content and date of the post. This is usually in the same area as the title of the post. In some themes, you can simply paste the following code and call it good:

<a href="<?php the_author_url(); ?>" rel="author"><?php the_author('display_name'); ?></a>

This calls your author website (updated in Step 3), and makes your name the link to your profile page. Most importantly, the href has the rel=”author” code, that tells Google that you are the author of the page.

For the rest of us, using the default Twenty Ten theme in WordPress, here’s where the content I want to edit is displayed:

In this example, we only need to make a single small change. In the part of the function that calls the href for the author URL, add the rel=”author” code:

You can cover all of your bases by adding “me” to the rel=”author” so that Google can connect other information, like the author’s name to the profile:

Now, we need to tell WordPress which URL to grab. By default, WordPress will link readers to your archive of posts, which is not what we want anymore. We want WordPress to link to the “website” field from the author profile page. To do this, we need to change this line of code:

You’re changing the line from:

get_author_post_url( get_the_author_meta( 'ID' ) ),

To the code for grabbing the Author’s website:

get_the_author_url( get_the_author_meta( 'ID' ) ),

Once those updates are completed, save the file and you’re done!

Step 5: Testing The Results

To test the results, you can go to Google’s Rich Snippet Test page: http://www.google.com/webmasters/tools/richsnippets

Paste the URL of a post with the author’s name on it, and hit the “Preview” button:

You’ll see the green confirmation at the bottom of the test, showing that the authorship has been verified.

Congrats! You’re now an officially verified author for the blog, and your face, logo, and other metadata will begin showing up in search results. You’re on you way to personal brand domination!

Have you grown your personal or company brand using rich snippets? Will you share any Google search queries to show off your results?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.paulund.co.uk Paul

    Hi Tara

    I did this a couple of weeks ago. Do you know how long it takes for your image to appear in the search results next to your articles?

    Thanks
    Paul

    • http://creativecontentexperts.com Tara Hornor

      It really depends on the site and how well Google is indexing the content. I’ve had some sites that show up within 24 hours while others took several weeks. Wish I could give you more scientific numbers!

      Hopefully it will be sooner rather than later for you!

  • http://4dtoday.eu Peter Schumacher

    Wow! Thanks a lot – I’d never figured this one out by my own.

  • http://www.studiorepublic.com/ Tom

    Great post. Definitely a good idea to start implementing this stuff now as Google moves towards using rich snippets to populate the search results. In the future I’m guessing websites will rely on these much more.

  • http://www.machaks.com/ Dave

    I found useful tutorial to add rich snippets fast and easy here http://richsnippetsbooster.com/

  • http://www.howtomake.com.ua/ Vladimir

    great article! thanx!

  • http://www.greenmantle.biz Mark Greennantle

    Thank you for the great tutorial here. Can’t wait to land in the office today to implement these modifications to my wordpress site. :)

  • http://crowdogs.com Peter Schreiner

    This takes care of the posts, but what about the pages.

    BTW, great, simplified article.

    Thanks!

  • http://www.modred.co.uk ModRed Design

    Thanks for the info… I’m going to try some of these tags out.

  • http://www.liamcarey.com Liam Carey

    I found the rich snippit code in the author.php file for the template I’m using.

    Are you sure about removing the www. from the G+ URL is it throws up an error and mine worked by leaving it in?

  • http://www.ddiy.co Geoff

    Tara, great tutorial! I’m overdue for getting off my butt and setting this up for myself, especially since I’ve been telling my readers to do it!

    Question: Do you know if you can set up the rel author tag in a way that Google will pick it up, but without actually displaying it on the post? I don’t display my name on my posts now and would like to keep it that way if possible, but I want to take advantage of showing it in the SERPs.

    Thanks for your thoughts!

    • http://www.gavinwray.com Gavin Wray

      The All in One SEO WordPress plugin has a field to enter your Google Plus Profile as a sitewide default. This adds in the head of each post and page. This seems like an easier solution than messing around in the theme code (especially if you’re already using this common plugin). My profile image appears when using Google’s Rich Snippet Testing Tool though I haven’t seen it in actual search results.

  • http://www.bdimedia.com BDI Media

    Interesting post and I will use your snippet code on one of my test sites. All for getting the extra traffic. Good Post Tara

  • http://fgmovement.org Sarah

    Is it possible to do this for a group rather than an individual? Like use a Google + Company page as the author rather than a person?

  • http://www.devonwebdesigners.com Elizabeth

    @Sarah – as far as I know right now no, it isn’t. But maybe Google will change their minds about this or roll out a way for Google+ pages to be authors (and therefore show a logo) rather than just people who have to show a face.

    On another note we’ve developed a WordPress plugin to help you set authorship up. It’s called AuthorSure.
    AuthorSure works for single and multi-author WordPress sites.

  • http://www.benhgout.com Gout Solution

    Hello, i want to show image follow in article in search result, How can i do it ?

  • http://www.thepromoverse.com Ryan

    Hey is there a way to have different images for different blog posts (by the same author).
    As an example:
    say I write a blog about the new iPhone and want my rich snippet to have an iPhone in it…..
    the next week I wirte a blog about kittens and I want my rich snippet to have a kitten in it
    On the third week I write a blog about best practices for postin on Facebook – for businesses and want a info graphic to appear in my rich snippet.

    Is this possible using rel=author or any other rich snippet tool?
    Thanks!

  • http://www.forstaidcoursesmanchester.org.uk Gary

    Great article and will try setting up my website and see what impact it will have with Google.

    Thanks for sharing

  • http://gremeir.com/ gremeir mitz ociones

    Thank you for this tutorial.. Really helped me a lot. As you can see in this img https://plus.google.com/u/0/114300215553966419660/posts?%E2%80%8Br%E2%80%8Be%E2%80%8Bl%E2%80%8B=%E2%80%8Ba%E2%80%8Bu%E2%80%8Bthor — it really worked ! thank you .. i am now currently writing for http://www.Gremeir.com ( http://www.blog.gremeir.com to be exact )

  • http://www.vitamineproteine.com Marius Lixandru

    The best definitive Tutorial to add rich snippet
    in my wordpress too.
    I have try like 10 tutorials, but no one work
    this was the best Tutorial and work 100% perfectly
    Thank you
    Tara!!

  • http://twrix.com Nayan Popatia

    Hi Tara,

    I didn’t get the code <span class="author vcard"……

    In my Theme Functions.php file. What is the alternate?

  • http://techishtv.com Ritish Verma

    Please explain me the step 4.
    What we have to change the code to.
    I have found that code in my funtions.php but what to modify in it.
    Thanks!

  • http://rewards4you.nl software

    Hi there, just wanted to say, I enjoyed this post. It was practical.
    Keep on posting!

  • http://www.rejseguide365.dk Flemming Rejser

    Do you have some advice on how to add pictures from a WP article to the SERP results? I have problems finding tutorials on this…

  • http://www.anjang.com Anjang

    Hello tara,
    I just read this post and do it on my web.
    It’s work thanks

  • http://www.seogrep.com Kiran

    Very Nice to see that you could manage Author Rich Snippet very easily in WordPress without having to apply a complex plugin.

    Thanks for the trick and expecting more from you.

  • http://chuckbarnes.com Chuck Barnes

    Tara,
    Thanks for this article however I have a question:

    Is it possible to setup Google authorship for both the http://www.yourdomain.com and the http://yourdomain.com. Thanks for your input
    Sincerely
    CB

  • http://www.boothpix.co.uk/ jon sharp

    I have mine set up to reflect the company brand is this wrong? The other part I never understood, though it appears to work on the rich snippets test tool, is there any way of finding a post on google to see how it appears there?

  • http://www.penometpenispumps.com Henry

    Hi

    I have been using a plugin for author profile snippet, do you think it is better to manually set up?

    Thanks

  • http://www.thiaudio.org natalya

    i followed by direction and now all my pages are blank (only home page is visible).. i tried to restore -still blank, now i donot know what to do

    • http://creativecontentexperts.com Justyn Hornor

      @natalya – do you have a link I can look at?

      Look at your code very carefully. It’s likely you have a misplaced apostrophe or semi-colon somewhere that has your code breaking.

      Because this code is in the header of your HTML, if your code breaks, the whole page can be blank.

      Another quick tip: go to your site, right-click, and select view source. See what code is visible. WordPress will execute your code up until the break, so you should have something.