Social Sharing and Open Graph Tags
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.
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?Defining Social Sharing Image Thumbnails: The Secret Is Open Graph Tags by Jan Kearney