Could Your Google+ Button Use A Little Love?

It’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.

Schema.org Microdata

Schema.org 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 Schema.org 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 Schema.org 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 :-)!

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 button!

There are 45 comments What do you think?

What do you think?

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

You may also like