Could Your Google+ Button Use A Little Love?

Google+ ButtonIt’s the small things in life that please me these days.

Whilst they’re not big in the scheme of things, they’re incredibly huge in my world as I know it.

My daughter learning new words; my son making headway at swimming; my incredible wife doing all that she does.

They’re all things that keep me going and inspire me to keep grinding away.

My mission from blogging is to help people find solutions to their problems.

I want to blog about every day life and about things that I’ve learnt online.

So, today I want to tell you about some issues I’ve had with a social media plugin I have installed.

I’m not really sure whether it is actually the plugin’s fault or not but at last I’ve found an answer and hope it may help you if you’re having the same problem.

The plugin I use for my social media buttons is Social Sharing Toolkit and for some time now it hasn’t been picking up the correct image for previews on the Google+ button.

I want it to pick up the featured image on each post but all I could get it to use was my header and the sidebar banners.

I’d thought about looking for another plugin, possibly a paid one, but this plugin does everything I need and more.

So the research began along with the experimenting…

Google+ Snippet

If you’re inclined to read the Google+ developers’ guide, you’ll discover that you need to have one of three things on your site in order for the preview (or snippet) to pick up the correct information.

These are listed in order of Google’s preference. Microdata microdata allows additional information or tags to be added to your webpage to identify things such as images, names and descriptions.

It helps search engines to understand what your web pages are about.

The Google+ preview uses the name, image and description to find the information it needs to populate the snippet correctly.

Open Graph Protocol

The Open Graph protocol was created at Facebook and similarly to microdata, allows you to add more tags to your webpage.

The Google+ snippet will use the Open Graph information for the title, image and description.

Title And Meta “Description” Tags

If your website’s header contains title and meta “description” tags, then the Snippet will use these and it will attempt to find a suitable image on the page to use.

Best Guess From Page Content

If none of the data mentioned above is present, Google will attempt to find the best title, description and image.

My Google+ Snippet Solution

And there was the answer, Open Graph. The Social Sharing Toolkit plugin has an option under the Advanced options to add this into my header.

Open Graph Protocol

This will also let Facebook know which image I want to use as well with the Facebook Share button. A win win situation :-).

With the Open Graph option now turned on, a few seconds later and the Google+ preview is now picking up the correct image. Woo hoo!

OK, now I’ve got that sorted there were a few other issues with the Google+ snippet which needed to be sorted out.

Firstly, the title was showing twice and secondly some JavaScript and text had sneaked into the description and I needed to find a way to remove it.

Google+ Snippet Title

The title can be tricky because not only will your theme code contain the title of your post but some plugins you have may also add in the title.

SEO plugins such as Yoast WordPress SEO can sometimes be the culprit and there are a couple of things you can try to correct this.

With Yoast WordPress SEO, under the General section of the Titles & Metas settings, you’ll find Force rewrite titles.

Yoast Force Rewrite

If you activate this option, it can sometimes correct the problem.

Another option which may help is to leave the SEO title blank when completing SEO information on the post itself.

Yoast SEO Title

You can still complete the Focus keyword and Meta Description without any problems.

On this occasion it wasn’t the SEO plugin however, it was CommentLuv Premium, my favourite plugin of all time.

When I had turned on the Open Graph option under Social Sharing Toolkit plugin, CommentLuv Premium was duplicating this.

There is a handy place to turn this off under the CommentLuv Premium options though.

CommentLuv Technical Settings

CommentLuv doesn’t specify the image tag though as far as I could see in the code so the Social Sharing Toolkit plugin Open Graph code is more suitable for me.

I also switched off the Google+, Twitter and Facebook likes from being run by CommentLuv Premium as they are already being run by the Social Sharing Toolkit plugin.

It’s probably not wise to have these loading twice as it may slow things down!

And now, I have the correct title showing in the Google+ snippet.

Google+ Description

Without knowing too much about code I thought the description was going to be more of a problem.

However, I discovered that there’s a really easy way to sort out the description part of the Google+ preview.

When you are writing or editing a post, if you click on the Screen option drop down menu, you’ll find the Excerpt option.

WordPress Excerpt

If you click on that, you’ll find an Excerpt section which you can fill in to define the wording you want to show in your Google+ snippet.

You should bear in mind that if you show an excerpt of your post on your Homepage this will also decide the wording shown there too.

The big plus though is if you have social buttons above your post and some JavaScript is showing in your Google+ snippet, this will disappear as soon as you add your required text into Excerpt.

Et voilà. My Google+ preview is now showing up exactly how I want it to.

If you don’t use any of these plugins but are experiencing similar problems, you could try using a plugin which adds Microdata or Open Graph protocol to your WordPress site.

You can search for suitable plugins on the WordPress Plugin Directory.

Does Your Google+ Button Need Some Love?

So, how is your Google+ preview looking? Have you got it working correctly? Can I be of any help?

Drop me a line if I can and let’s see if we can find a solution.

P.S. Please share this on your favourite social media network if you’re feeling sociable :-)!

Opt In Image
Did You Enjoy This Post?
Then don't leave without subscribing to my blog

Subscribe for future posts and get them sent directly to your inbox - it's totally free...

Enter your name and best email address below and hit the yellow button!

Enjoy this post? Share your thoughts below:

45 Comments on "Could Your Google+ Button Use A Little Love?"

Joy Healey
2 years 1 month ago

Hi Tim

I’m afraid that’s rather beyond me at the moment! I’m using Shareaholic and Yoast – just hoping all is OK!

Anyway, thanks for figuring all this out and if I find out later that I have this problem I’ll come back and sure your step by step approach will help. My most important job for the moment is to speed up my blog!


2 years 1 month ago

Hey Joy

I wish you luck with speeding up your blog. I went through that a while back and I probably need to look at it again!

Your Google+ button is working fine with Shareaholic by the looks of things so you don’t need to worry about that at least :-).

2 years 1 month ago

This is a very interesting post i must say,
The truth is that I’ve never paid much attention to this on my blog,
and i really agree with you on the impact those little things can make on our life and business

2 years 1 month ago

Hi Shafeeq

Welcome to my blog and thank you for visiting.

I’m pleased you found the post interesting.

It can certainly be these little things that make us look unprofessional so it’s worth making sure we sort them out.

Great to see you Shafeeq and I hope you’ll come and visit again soon.

Jens P. Berget
2 years 1 month ago

Hey Tim,

I haven’t paid attention to this at all, and now I have bookmarked your post so that I can double check it later today. Right now there’s something wrong with my G+ button, as it adds my title twice. I am not sure why, so I have to keep working to get it fixed.


2 years 1 month ago

Hey Jens

It sounds like you’re having similar problems to what I had.

I think in most cases where the title is being added twice that Open Graph is involved.

From what I found out, your theme usually shows the title as well as plugins like CommentLuv, giving you the duplicate.

The way I got it to work in the end was to turn off the Open Graph meta information in CommentLuv.

I’d be interested to know the outcome Jens. Keep me posted.

How’s the weather in Norway? We’ve had snow in Scotland again today.

Jens P. Berget
2 years 1 month ago

You are absolutely right. I checked CommentLuv and found this “Prevent facebook meta:og tags” and that was it :)

Thank you!

2 years 1 month ago

That’s great news Jens and exactly the same thing that was causing the title to be duplicated on my Google+ snippet too!

Glad to be of some help to you :-).

2 years 1 month ago

I agree with Aaron. I need a much longer day and more time to devote to learning more.

2 years 1 month ago

Hey Josh

Couldn’t agree more with both you and Aaron.

There’s never enough time to devote to everything I would like to do. It’s becoming more and more of a compromise.

Bill Dorman
2 years 1 month ago

Whoa; way above my pay grade sir, hopefully you found answers in your responses…:).

2 years 1 month ago

Hey Bill.

You’ll have all of this to look forward to if you make the leap to self-hosted :-).