Social Sharing and Open Graph Tags
Image thumbnails on Google Plus, LinkedIn and Facebook
When you share your web pages or blog posts on social sites such as Facebook, Google Plus and LinkedIn, a thumbnail image is often generated and displayed next to the description.
These thumbnail images can be auto-generated based on the first appropriately sized image on your page or post. But, if you give the social sites more information, you can control what images and descriptions appear.
This extra information is contained in your page header using meta data known as Open Graph tags.
Images that are too small or not square enough will not be displayed regardless of whether you have defined them using Open Graph tags.
Just to make life that little more interesting, each of the social sites have different requirements.
Defining The Social Thumbnail Image
The first image on your webpage isn’t always the one you want to use as your thumbnail when sharing your link. You can control this thumbnail image using Open Graph mark up. Facebook, Google Plus and LinkedIn all recognise Open Graph tags in the HTML header.
Now before your eyes glaze over and you resort to hair tearing, if you are using WordPress adding Open Graph meta tags is simple! If you are not using WordPress you can manually add the code to your HTML header – more on that further down.
Open Graph Meta Tags For WordPress
I use Yoast’s WordPress SEO plugin. Amongst many of its fabulous functions is the ability to set the Open Graph meta tags.
Your prefered thumbnail image can be selected by using the featured image function when writing your post (or page). If you don’t select a featured image, the first image on the page will be used.
Sometimes you will not have an image on the page. The plugin allows you to set a default image to show in these cases.
It’s the same with the title and description, the Yoast plugin will use meta title and description you specify for the post. You can also set an independent description for Facebook and Google Plus.
There are many other plugins available that will insert the Open Graph tags. One that seems to be recommended often is Wonderm00n’s Simple Facebook Open Graph Meta Tags. I haven’t personally used it, but the description states:
This plugin inserts Facebook Open Graph Tags into your WordPress Blog/Website for more effective Facebook sharing results. It also allows to insert the “enclosure” and “media:content” tags to the RSS feeds, so that apps like RSS Graffiti and twitterfeed post the image to Facebook correctly.
It allows the user to choose which tags are, or not, included and also the default image if the post/page doesn’t have one.
Open Graph Tags for Non-WordPress Users
You can manually insert the Open Graph tags into the header section of your page HTML. There are many tags that you can add, but for social sharing the main 5 are:
- Title – og:title (required)
- Type – og:type (required)
- Image – og:image (required)
- URL – og:url (required)
- Description – og:description (optional)
The head section of your HTML code will look something like this:
You can get a full list of Open Graph meta tags from The Open Graph Protocol
Minimum Image Sizes
Each social platform has different image size requirements.
My graphic abilities know no bounds… The boxes are actual pixel sizes so you get the idea!
It’s also worth noting that while Google Plus does recognise Open Graph data, it will default to Schema mark up for the image and description if it is present on the page.
Over to you…
Do you use Open Graph meta tags to define your social thumbnails?
.png "I Support IEC")
Great post! Did not know this!
I’m glad you found the post useful, Liz. Thanks for popping in and your comment
Hi Jan,
While I consider myself a little more technically inclined than most, I find the Open Graph stuff a little intimidating. Even if I feel inclined to try it, others would lack the initiative to try their hand at adding open graph meta tags for several reasons:
1. Most people don’t know how to work with HTML, let alone insert these meta tags into a blog template. They may need more hand-holding to attempt the task.
2. It sounds time-consuming. While it wouldn’t be a hardship to do this for one post, doing it for every post throughout the week would be cumbersome. Especially if you post on a daily basis.
Seriously…
Wouldn’t it be easier to find a blog theme that does all this background work automatically, without a fancy plugin since plugins tend to slow a blog down? The more plugins used, the slower the load of the page.
I do use the featured image from my PageLines Pro blog theme, but in order for it to show properly in my RSS feed, I had to add some programming to the functions.php template in the theme to make them show.
Most bloggers wouldn’t know how to add functions to their blog template.
Is there an easier solution or am I missing something?
- Bonnie
Bonnie recently posted..Open the Line of Communication
Hi Bonnie, the great thing with WordPress is there’s no need to work with OG tags.
I know what you’re saying about plugins, which is why I use Yoast’s WordPress SEO – it’s several plugins all in one. Not only will it sort your OG tags if you tick the box, but also Twitter cards, xml sitemaps, pinging, RSS feed links, default titles and descriptions, custom titles and descriptions on each page/post and an SEO checklist, 301 redirects, noindex/nofollow, include in sitemap…
I’ve never left SEO to my theme, even when it’s available – simply because when I change themes the settings are gone, and I wouldn’t use a theme with all functions either for the same reason. Perhaps that’s just me
Jan, how is this different to the Featured Image I have in my WordPress theme? It looks like my theme does this already (woohoo!)
PS. Commentluv isn’t working for me on this site
Hi Rosie, featured image is featured image – what the Yoast WP SEO plugin does is use that info to insert the Open Graph tag. So for example, say you had 3 images and wanted the 3rd to show when you share (like this post), then set the 3rd image to be the featured image.
I used to have issues with comment luv when commenting on some sites. I found by including the trailing slash at the end of the url, comment luv would always pick up my feed
Thank you – I use the SEO Yoast plugin. Commentluv still not working here even with slash.
Oh well
I think CommentLuv is having issues at the moment. It’s working for me on some sites and not others too.
Janie Thomson recently posted..Freedom From The Tyranny of the Membership Site Theme
I haven’t used it so far, relying on the first or featured image in a post, but I might well have a go at taking more control. Nice explanation, Jan.
Janie Thomson recently posted..Confused About SEO?
Hi Janie, simply by popping on one of the plugins for WordPress, control is much simpler. Good luck!
Hi Jan
Been waiting for this one
Not really had any concerns or problems with this but will just bung another plugin in there!
Thanks
Sue
Sue Worthington recently posted..Is Social Media Driving You Crazy?
Hi Janie
This information is really useful, I was wondering how some people have great images and some don’t. I am going to try this out!
Clive recently posted..WP My Favourite Plug Ins
Hi Jan,
A great post, but I find it really technical for my non-technical brain. I love to learn though, and will try to see if I can make it work. I wonder – you mention Yoast SEO plugin and its functions. Do you have a tutorial for it, or maybe you could think about creating it? It seems like such a great plugin, and I have it on my blog, but I find it difficult to figure out how to make all its functions work. And the other thing – how do you shorten your blog posts? Is there a plugin for it, or do you do it manually every time? Thought of asking, since you are an expert in these things. Love reading your blog!
Best wishes,
Galina
Galina St George recently posted..LIFE IS A GIFT – EVERYTHING ELSE IS A BONUS