- What is Open Graph?
- Why bother with Open Graph?
- How to set up Open Graph
- What it looks like
- Open Graph image sizes
- How do I test my site’s Open Graph?
- In conclusion
Tools needed for this task:
What is Open Graph?
From the Open Graph Protocol website…
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
Plain English: when you share a web page from your website — eg http://blog.booksure.com/marketing-tips/—to a social media site, the Open Graph Protocol allows the post to contain a nice image, a title and a description.
Facebook, Twitter, Google Plus and LinkedIn use Open Graph to dolly up link shares.
To be fair, Facebook, Google+ and LinkedIn do a fine job of making shared links look good without Open Graph. (The same can’t be said for Twitter.)
So why worry about Open Graph?
Why bother with Open Graph?
There are two reasons for optimising your site with Open Graph.
- You want your web pages to look good every time you or someone else share them, no matter to which platform.
- You can use an Open Graph image, title and description as a step in the guest booking process.
Let me expand on the second reason.
Let’s say you have Open Graph set up on your website.
You create a page displaying a plate of biscuits. That’s what you want visitors to see when they land on this page. You want to offer them a cookie.
You want to share the web page address on Facebook, but you don’t want the biscuit image to show when you share it. You want a picture of a cup of coffee to show.
You use the coffee image as your Open Graph image. This is the picture that shows up when the web page is shared to social media.
But when someone clicks through, it shows the biscuit picture.
It’s like inviting an old friend over for a visit. It starts with you reaching out, then it turns to you welcoming the friend, then sharing coffee, then biscuits, and so on.
If you don’t have Open Graph set up on your website and you share the web page with the biscuits to Facebook, Facebook will add the picture of the biscuits.
If you’re sharing it, no problem. Just delete the image from the Facebook share (before you click the Post button) and upload a picture of coffee.
But what if someone else lands on your web page and shares it to Facebook? They’re not going to remove an image and add another one. That’s too much effort.
The better way is to set up your web pages with Open Graph meta data. You take control of what people share to social media, when they share your web pages.
I’ve created a demo page to show how this works:
If you share that page to Facebook, it displays a different message than the web page itself.
Here’s a screenshot of the page, when you click through from the above Facebook post…
Open Graph allows your social media posts to form part of the journey guests take to book with you.
That’s why you should use it.
With this post I aim to help set up Open Graph.
Let’s jump in…
How to set up Open Graph
I’m assuming you’re using a self-hosted WordPress blog, and you have the Yoast SEO plugin installed.
The following actions take place inside the WordPress back office dashboard.
Activate Open Graph
Visit the Social tab in the sidebar: SEO > Social.
You’ll see these tabs:
We don’t use Instagram, YouTube or Myspace, and LinkedIn’s new company pages are still in beta, hence the gaps. You can add whichever details are applicable.
Facebook Open Graph
Open the Facebook tab.
Enable Open Graph meta data.
Facebook Open Graph for your site’s front page
This is where you find the main Open Graph settings for your site’s front page.
Our front page, blog.booksure.com, changes all the time. We add new blog posts as often as possible.
If we don’t use Open Graph data on our front page, add new content and someone shares it to a social media website, it might share the wrong information.
But because we lock in the front page Open Graph data here, the same information is shared every time someone shares the website’s front page URL to social media.
Sharing the URL, blog.booksure.com, always show the designated image, title and description text, no matter what data appears on blog.booksure.com.
You can use an existing image, or upload a new image.
Click on the image you want to use, if you’ve uploaded.
To set up a home meta description, visit the Titles & Metas link in the SEO submenu, then click on the Homepage tab.
Yoast SEO allows you to set up a default image for Facebook sharing.
This is a great feature.
Tip: use your establishment logo on this image.
If someone shares one of your blog posts and you don’t have an Open Graph image set up for it, your default image might not carry the feel of the post. It might not make sense when added to that post.
The logo adds context.
That’s your blog’s front page Open Graph details set up for Facebook sharing.
Twitter Open Graph settings
Setting up Twitter Open Graph is even simpler than setting up Facebook.
You have two settings for Twitter.
If you want to use Twitter Open Graph, you need to activate it.
The second setting is a choice between a summary and a summary with a large image.
I suggest you use an image with your Twitter social shares. A few years back Shift ran tests and found that engagement increase up to five times when pictures were used in sharing. You can read about it here.
That’s your Twitter Open Graph settings, sorted.
There are two other tabs, Pinterest and Google+, on the Social page. They don’t contain Open Graph settings, so you may ignore them.
Open Graph for a blog post
Yoast SEO uses your blog post’s title, description and featured image to create Open Graph information for all social sharing, as and where it can.
In other words, Yoast SEO adds Open Graph to your pages automatically.
But let me show you how to set up Open Graph for an individual blog post, should you wish to use different data for shares than what’s displayed on the web page.
We’re in the WordPress admin area, writing a new blog post. (I’m using this blog post as an example.)
Look for the Yoast SEO box below the main post window…
What it looks like
I created three test pages and shared them to four social media sites, to see if Open Graph makes a difference.
Here are the URLs:
For this test, I shared only the URLs, with no added data, to Facebook, Twitter, Google Plus and LinkedIn.
Here are the results…
Facebook does a fine job of displaying web pages, with or without Open Graph.
Sharing a link without Open Graph to Twitter looks awful, as can be seen from the first two pics below.
But if your page contains Open Graph, it looks grand.
Google Plus does a fine job of displaying content, with or without Open Graph.
Take note of the image dimensions. Plus doesn’t crop the image the same way Facebook and Twitter do. We look at image sizes later in the article.
LinkedIn does a good job of displaying content, with or without Open Graph data. It’s only when there’s no data on the page that it looks horrible.
Open Graph image sizes
This table displays image sizes you can use to set up your Open Graph for sharing to Facebook, Twitter, Google Plus and LinkedIn…
|Platform||Recommended dimensions (px)|
|1200 x 1200|
|Google Plus||497 width|
|1200 x 1200|
|1200 x 1200|
Most of the dimensions are 1200px x 1200px. This is a recommendation by Nick Vogt, who wrote a great article about social media image sharing.
It comes down to this: most of these social media platforms can crop whatever it is you throw their way.
However, you need to use a photo that can be cropped. You don’t want someone’s head to be cropped off, for instance, or your logo cut in half.
Best is to test your site’s Open Graph.
How do I test my site’s Open Graph?
To test your Open Graph settings, navigate to a page on your website and copy the URL (eg http://blog.booksure.com/automatic-free-newsletter-mailchimp-rss/).
Now paste that URL into your Facebook feed…
To test it on Twitter, navigate to twitter.com, log in, click on the Tweet button at the top right of the screen and paste the URL into the box that pops up…
Facebook has a tool called the Sharing Debugger. You paste your URL into the box and click the Debug button. This spits out data and a preview of what your URL will look like when shared on their platform.
Although most modern social media platforms do a good job of sharing your web pages correctly, you can still set up your Open Graph to perform the duty of inviting someone to your website.
With Yoast SEO for WordPress, setting up Open Graph is super simple. And when you write a blog post, Yoast SEO takes care of giving the correct data to whichever social media platform your web page is shared.
I highly recommend spending time on getting your website optimised with Open Graph data.
If you use WordPress, install Yoast SEO.