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:
- By far, the easiest way to make this work with Google search results is to connect to a Google+ account. If you don’t already have a Google account, you can sign up for one here.
- To allow Google+ to use your information on a posting, you must allow authorship access to the domain you are posting on. To do this (for any number of domains), visit the Google+ Authorship page.
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!
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.
<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.
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: