The Easy Way How To Add Rel Author Information

Posted on February 21, 2013 in Social Media, Tutorial, Web Development

We’ve all seen them starting to pop up. You know what I’m talking about: those profile pictures next to search results at Google.. Well, they’re super easy to implement in several ways.

Let’s take a quick look at what they are and how to add them to your website.

What Is That Thing Called, Anyway?

So what is that thing even called? Well, most of the time it is referred to as the “Author Rel Attribute”. There are a few different ways this can be applied, but all of them include adding code that looks something like “rel=author”. Other names include “Rich Snippets” (that sounds like a man’s name, doesn’t it? “Thanks for coming out today. My name is Rich Snippets.“) or, more recently, “Structured Data: Authorship”.

In any case, it just means you get to associate a page in your site with a personal description/photo.

Well, How Do I Add It?

That’s a great question! There are a few ways it can be added, two of which I’ll go over right now. These are the easiest two, so why make it complicated, right?

A few quick notes:

Option #1: Adding “Rel=Author” to a Link

One of the easiest ways to connect your page to your profile is to simply add a link on the page. In the code of the page you want to connect, simply add a link like the one below, replacing the “[PROFILE_URL]” with your own Google+ profile address (usually: http://plus.google.com/XXXXXXXXXXXXXX) and “YOUR NAME” with, well, your name.

It is extremely important that you include the “?rel=author” at the end. This will be what tells Google that this is the author profile of the page this link is on!

HTML


Article by <a href="[PROFILE_URL]?rel=author">YOUR NAME</a>

Option #2: Adding a “Link” Tag in the <HEAD> Tag

The next easiest way – and the one that might work the best when coding a CMS theme template – is to include the author information in the HEAD tag on each page that you need to designate authoring credit.

The code for this is very simple. Just replace the “[PROFILE_URL]” with your Google+ profile address (see above). The great thing is that this URL could be pulled in from a field in a CMS and replaced dynamically.

HTML


<link rel="author" href="[PROFILE_URL]" />

It couldn’t be simpler! It does need to be in the <HEAD> tag though, so make sure you have it in the right place.

Make Sure It Worked

No reason to do all that work and realize it’s not working. You can test to be sure that the authorship options are functioning as intended with the Google Structured Data Testing Tool. This will also provide some extra help, should your implementation not work.

Further Reading

Like with anything web related, that’s not the end of the story. There’s a lot more that you can learn about authorship and data structures, but that’s all we need for now.

To get a full rundown of the Authorship options, check out these resources:

Leave a comment

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