A Quick and Dirty Guide to Optimizing Your +1 Button for Speed, Placement and Conversion

There’s no denying it: slow page load will kill your conversion. This illustration from StrangeLoop demonstrates that:

Just one second and you can lose 7% of sales. Did you know that the original Google +1 button took 2 seconds to load?

That’s true…and I don’t know about you, but I would definitely want to do all I could do to speed up my pages….

And the +1 button has definitely gone mainstream so it needs to be part of your Google+ content strategy…but it also needs to be optimized to maximize its impact on your content…from speed to placement to meta descriptions. I’ll show you how to do all that and more in this guide.

Optimized for Speed

As I mentioned above, when Google first launched the button it took 2 seconds to load. Google has since optimized the button so it’s not such a drag on page speed by releasing synchronous code.

Have you made the change yet? A lot of people installed the button when it first came out and sort of forgot about it…but you need to update right now.

Go here to get the new Google+ code.

This simple change will cut the download speed of the +1 button to micro seconds…instead of the 2 seconds…keeping your page load speedy!

Make Google+ very visible

Now, it’s equally important where you place your social sharing buttons like +1. For instance, you never want to make people have to look for your social buttons…

You must make them obvious.

I use a social sharing plug-in called Scrolling Social Sidebar that allows my buttons to scroll up and down the post as people scroll through it:

But it also matters how many buttons you present. I recommend only using three. After many tests I’ve determined that most of my followers interact on Twitter, Google+ and Facebook:

Listen: if you keep it simple, you will get more shares. Too many choices often will trip people up and confuse them…and they won’t do anything.

You don’t want that, so minimize the number of buttons you display.

Look at these two sidebars…

The sidebar on the left is bad. The one on the right is good. Make your sidebar look like the one on the right.

Optimize the snippet

Your next step is to optimize the title, description and image of any content that gets shared with +1 button…in other words, the snippet.

That meta data is pulled from the URL of that content using one of these methods as seen on the Google+ Platform for Google Developers page:

I like the schema option the best.

It’s not as complicated as you think and actually I wrote about it in 6 On-Page SEO Strategies That’ll Boost Your Rankings.

The effort is worth it since Google will search your page for any kind of data to place in the title, description and image fields.

You don’t want it to look like this:

You want it to look like this:

However, you can use the Open Graph API or just plain-vanilla title and meta-description tags…Google is happy to look at either to pull information for the snippet.

The only thing you don’t want to do is fill out the meta data fields. Leaving it blank will force Google to search the page and parse together anything for the title, description and image info…which may end up not being what you like.

Creating a custom field

The one thing that is going to be difficult, but is probably the most important when it comes to optimizing your +1 button is the image field. The custom field will make it easy.

WordPress.org shows you how to create custom fields.

See, you create a custom field to drop the snippet image URL in. In the custom field for the post you are working on, enter a name like “Image URL” (keep it consistent!) and then put in the URL.

This creates a custom field in the database and then connects the URL with the post. This doesn’t connect this URL to every post…just the post you are working on.

Keep in mind, this custom field will be available for all future posts in a drop down menu.

Is this extra step worth it?

Well, it depends…do you value an optimized image snippet? Well, do you value optimized titles and descriptions? Your answer should be yes!

Use the right image

Now, you can’t just choose any image. There are some standards you need to be aware of:

  • Size – The best dimension of an image is square. But if you have to use a rectangle image, then make sure it is vertical…and not horizontal. Horizontal images do not look great when they show up. But also make sure it is not too vertical for really long vertical posts don’t look great either.
  • Location – You can use an image that isn’t even in the post. (If you’ve ever wondered how you see thumbnails of an image that is not in the actual post…this is one of the reasons why.) Why might you do this? Well, you might be using images in your post that don’t translate well when displayed in social media. The other reason is you might not have used images at all in the post for some reason.

Tweaking the header code

Now that you’ve got the custom field, you now need to use it in your WordPress theme. To do this go into your dashboard and select “Appearance”…

Then choose “Editor”…

And finally, click on the header.php…

Once on that page, copy all the code…

And drop it into a notepad or clipboard. This way if you screw something up while messing with the code you can simply drop the code back in and fix your site.

At this point take the Facebook Open Graph Image code and drop it before the tag and after the tag.

This will create an og:image tag and tie it to your custom field you created above. Now click “Update File.”

By the way, this work around code was created by starfly.

Testing your optimized Google+ snippet

You’re not done until you test and see if all the work you just did is showing up correctly. There are three ways to do this:

  • View it on Google+ – After you publish the post, share it using the +1 button and then go and inspect it over on Google+. Does it look like you want it to? share it on Google+ a
  • View source – Publish the post, go to that page and then right click. Choose “view source.” Do you see the og:image tag? Is it filled out right?
  • Facebook’s Debugger – Jump over to the Facebook Developer and drop in the URL for the page you just posted. You’ll see the og:type (article), og:title (9 Hard-Hitting Content Strategies for Small Business Blogging), the og:image and og:description

If you get it right the first time through…you are good! But usually it will take a lot of testing and tinkering.

Conclusion

Is all the time and effort to optimize your +1 button worth it? Let me close by saying there is a lot of press about nobody hanging out at Google+, and that it’s like a ghost town…which is true and false.

It’s true if you think the mainstream of America should be there…but it’s false if you think about all the early-adopters…people like Robert Scoble, Brian Clark and me…who are using it.

Don’t let that worry you. All social media goes through this…so it’s really a matter of time before adoption of Google+ goes viral. Besides, it’s best to have all your ducks in the row before that happens.

Can you tell me other ways you’ve been optimizing your use of Google+ and the +1 button?