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 the 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…
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 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.
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.
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.
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.
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 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.
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.
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.
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 :-)!