Most of us know that social media sites are now major drivers of most web traffic, so the stakes are high that we succeed on them.
We are in control of how our own posts appear on these sites – but what about when other people share pages from our website?
We can’t force them to write some witty commentary summarising our content or attach an image to increase its chances of a click.
For example, here’s a post that could benefit from some improvement:
Enter Open Graph, a protocol that enables any web page to become a rich object in a social graph.
What exactly does that mean? It means you are able to control how information from your website is displayed on Facebook, Twitter, Pinterest, LinkedIn and Google+ whenever anyone shares a link from your site.
With Open Graph, you can make your posts more attractive with eye-catching imagery and blurb that makes users want to click through to read more. Here’s a good example:
Few people take the time to optimise these tags, but it is well worth doing so that your business can enjoy a potentially significant increase in click-through rates when URLs are shared from your site.
Here are some of the basics of Open Graph to get you started:
How to add Open Graph tags to your website
To add Open Graph to your website, you need to add meta tags to the <head> part of your website’s code with the information you want social media sites to display.
The four required properties for every page are:
The title of your object as it should appear within the graph.
The type of your object, like an article or a recipe; you can find a full list here. Depending on the type you specify, other properties may also be required.
An image URL which should represent your object within the graph.
The URL of your post, page or object (only the domain will show on social, so don’t panic when the full URL doesn’t appear).
Also, don’t forget to add a description (og:description). It’s an optional tag but it tells social media users a little more about your page or post and well-written descriptions encourage a click through.
Here’s a great example of some Open Graph code on a recent post by The Daily Mash and how that translates to a Facebook post:
Implement Open Graph the easy way
If you can’t access your site’s <head> code, or just don’t fancy writing the code yourself, you can install a plugin that does the hard work for you.
There are many Open Graph plugins, extensions and add-ons for WordPress, Joomla, Drupal, Magento, Zen Cart and osCommerce.
Personally I use NextGen Facebook Pro (NGFB) for WordPress, which as you can see in the screenshots below, has a really user-friendly interface.
I start by setting my article topic and inputting titles and descriptions for all the networks that the NGFB plugin works with:
I then select the image I want to use, which I have already sized and optimised to work across multiple social media sites:
The NGFB plugin then generates a preview of what my post will look like on Facebook:
Before you share anything to social media, you should check your tags using the main social networks’ debugging tools and Open Graph validators. NGFB lets you do this from within the plugin:
These debuggers let you preview your post and let you know about any errors and suggestions for your Open Graph tags.
Using the Facebook debugger also clears the Facebook cache for that URL in case you had to go back and make changes – Facebook will only scrape your web page once and will continue to show old Open Graph data until you manually ask it to scrape your content again.
Twitter Cards add photos, videos and media to tweets in the same way that Open Graph does for Facebook, although it requires a little extra code of its own.
The five basic components you need are:
- twitter:card (this is the same as og:type where you specify what the content is)
Once you’ve marked up your first page or post, you need to paste the link into Twitter’s Card Validator to get initial approval for your site.
After that, you can use it in the same way as Facebook’s debugger to check your Open Graph data is displaying properly.
What about Pinterest Rich Pins?
There are six types of Rich Pins which you can use to help your content stand out on Pinterest: Apps, Products, Recipes, Movies, Articles and Places.
Here’s an example of an Article Pin, which includes website, title and description data:
Depending on your content, Pinterest supports Open Graph, Schema.org, h-recipe and oEmbed formats for marking up your pages.
You’ll need to prep your website with meta tags, test out your Rich Pins and then apply to get them on Pinterest – it all sounds easy until you try doing it, so you may wish to enlist the help of a developer for setting up Rich Pins.
The functionalities described above are just some of the interesting things you can do with Open Graph.
There are more advanced Open Graph tags you can use as well as advanced integrations with Facebook.
There are also new features from Twitter like Lead Generation Cards, and Buyable Pins allow users to shop directly through Pinterest – so keep your eyes peeled for all the ways in which you can promote your business through social media.
If you need help improving the social sharing options on your website, get in touch with the development team at Receptional today.