When we launched the blogs.tees blogging platform there were a number of social features that we added to allow users to share content from our network to their favourite social networking sites, Facebook, Twitter and LinkedIn for example. One of these features was the ability to add “sharing” buttons to a blog or individual blog post, users could click a button on an article to share it with a group of friends or platform that they thought would find the content interesting.
“Social Referrals” make up almost half of our traffic and up to a third of the social referrals are from Facebook with Twitter coming in a close second. Because the majority of the blogs.tees content getting shared socially is being done so on Facebook we decided to customise what is called the Facebook Open Graph protocol.
If you have ever shared a link or a website on Facebook and wondered how Facebook knows which image or article excerpt to show next to the link it’s most probably down to Open Graph. Open Graph allows content creators to integrate their content with what Facebook call the “social graph“, essentially a way to link and categorise content relationships on the Internet.
Open Graph allows us to apply metadata to content on blogs.tees to automatically categorise and sort content in relation to the source and author. All of this is done by WordPress based on the content contained within your blog post on blogs.tees. This metadata is then passed through to sites that support Open Graph when a user links to your blog.
For example, if I were to share this blog post on Facebook, it would know that I am the author, that it came from blogs.tees and it came from the TEL@Tees blog. Also, based on the settings that I chose at the time of posting it would show a particular image that I’ve associated with the blog post and a preview of the article text based on either the first few words of the blog post or any custom excerpt that I’ve created in WordPress.
Facebook Open Graph is enabled on any site on blogs.tees that has Jetpack enabled. You can find more information on how to enable Jetpack on your blog here.
We’ve customised the way that Jetpack creates Open Graph metadata for blogs.tees and how it displays contextual images on Facebook. It’ll look through your blog post firstly for a “Featured Image” if you’ve set one for your blog post, if it doesn’t find a Featured Image it’ll look for the first image in your blog post, if it then doesn’t find an image at all it’ll display the Teesside University logo.
You can also choose to provide a custom “Excerpt” for your blog post, if you choose not to Facebook will take the first few lines of text in your blog post and use that instead.
It’s also worth mentioning that if you share a blogs.tees site on Twitter it’ll also use the same metadata to display images and excerpts there as well, we’ve got you covered! There are more and more websites supporting Open Graph metadata, not just Facebook so as support grows your content with context will reach a larger audience.
Enjoy and happy blogging!