Open Graph – How To Make Your Web Pages Look Great When Shared To Social Media

How to use Open Graph to make your posts look delicious on social media sites

Open Graph – How To Make Your Web Pages Look Great When Shared To Social Media

This article forms part of a series teaching you how to increase direct bookings. If you run a B&B, guest house or hotel, this is for you. Sign up for the free newsletter.


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/​m​a​r​k​e​t​i​n​g​-​t​i​ps/—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?

Read on…

Why bother with Open Graph?

There are two reasons for optimising your site with Open Graph.

  1. You want your web pages to look good every time you or someone else share them, no matter to which platform.
  2. 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.

The preview on Facebook for the above web page, when the URL is shared
The preview on Facebook for the above web page, when the URL is shared.

Here’s a screenshot of the page, when you click through from the above Facebook post…

The web page that was shared to Facebook, displays a different message
The web page that was shared to Facebook, displays a different message.

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.

Visit the Social tab in the sidebar
Visit the Social tab in the sidebar.

You’ll see these tabs:

  • Accounts
  • Facebook
  • Twitter
  • Pinterest
  • Google+

Add your social pages

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.

Add your social media accounts in the Accounts tab
Add your social media accounts in the Accounts tab.

Facebook Open Graph

Open the Facebook tab.

Enable Open Graph meta data.

Click on the Facebook tab en enable Open Graph for Facebook
Click on the Facebook tab en enable Open Graph for Facebook.

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.

Set the Facebook Open Graph data for your blog front page
Set the Facebook Open Graph data for your blog front page.
Click on the Upload Image button
Click on the Upload Image button.

You can use an existing image, or upload a new image.

You can use an existing image or upload a new image
You can use an existing image or upload a new image.

Click on the image you want to use, if you’ve uploaded.

Click on the image you want to use, then click on the Use Image button
Click on the image you want to use, then click on the Use Image button.
Add a title and description in the Title and Description boxes
Add a title and description in the Title and Description boxes.
If you have a meta data description set up for your website, you can click the Copy home meta description button
If you have a meta data description set up for your website, you can click the Copy home meta description button.

To set up a home meta description, visit the Titles & Metas link in the SEO submenu, then click on the Homepage tab.

Set up your blog front page meta description by visiting the Titles & Metas link in the SEO menu
Set up your blog front page meta description by visiting the Titles & Metas link in the SEO menu.
Default setting

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.

Why?

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.

Add a default image
Add a default image.

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.

Activate the Twitter Open Graph option under the Twitter tab
Activate the Twitter Open Graph option under the Twitter tab.

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.

Choose the Summary with large image option and click the Save changes button
Choose the Summary with large image option and click the Save changes button.

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…

Look for the Yoast SEO box
Look for the Yoast SEO box.
Click on the funny sharepoint icon
Click on the sharepoint icon.
Add a Facebook title, description and image
Add a Facebook title, description and image.
Now click on the Twitter icon and complete those fields too
Now click on the Twitter icon and complete those fields too.

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

Facebook does a fine job of displaying web pages, with or without Open Graph.

This is what it looks like when you share a page with no Open Graph, no title, no meta description and no image to Facebook
This is what it looks like when you share a page with no Open Graph, no title, no meta description and no image to Facebook.
This is what it looks like when you share a page with no Open Graph, but with a title, meta description and image to Facebook
This is what it looks like when you share a page with no Open Graph, but with a title, meta description and image to Facebook.
This is what it looks like when you share a page with Open Graph and no title, no meta description and no image to Facebook
This is what it looks like when you share a page with Open Graph and no title, no meta description and no image to Facebook.

Twitter

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.

This is what it looks like when you share a page with no Open Graph, no title, no meta description and no image to Twitter
This is what it looks like when you share a page with no Open Graph, no title, no meta description and no image to Twitter.

This is what it looks like when you share a page with no Open Graph, but with a title, meta description and image to Twitter

This is what it looks like when you share a page with Open Graph and no title, no meta description and no image to Twitter
This is what it looks like when you share a page with Open Graph and no title, no meta description and no image to Twitter.

Google Plus

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.

This is what it looks like when you share a page with no Open Graph, no title, no meta description and no image to Google Plus
This is what it looks like when you share a page with no Open Graph, no title, no meta description and no image to Google Plus.
This is what it looks like when you share a page with no Open Graph, but with a title, meta description and image to Google Plus
This is what it looks like when you share a page with no Open Graph, but with a title, meta description and image to Google Plus.
This is what it looks like when you share a page with Open Graph and no title, no meta description and no image to Google Plus
This is what it looks like when you share a page with Open Graph and no title, no meta description and no image to Google Plus.

LinkedIn

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.

This is what it looks like when you share a page with no Open Graph, no title, no meta description and no image to LinkedIn
This is what it looks like when you share a page with no Open Graph, no title, no meta description and no image to LinkedIn.
This is what it looks like when you share a page with no Open Graph, but with a title, meta description and image to LinkedIn
This is what it looks like when you share a page with no Open Graph, but with a title, meta description and image to LinkedIn.
This is what it looks like when you share a page with Open Graph and no title, no meta description and no image to LinkedIn
This is what it looks like when you share a page with Open Graph and no title, no meta description and no image to LinkedIn.

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…

PlatformRecommended dimensions (px)
Facebook1200 x 1200
Google Plus497 width
LinkedIn1200 x 1200
Twitter1200 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/​a​u​t​o​m​a​t​i​c​-​f​r​e​e​-​n​e​w​s​l​e​t​t​e​r​-​m​a​i​l​c​h​i​m​p​-​r​ss/).

Now paste that URL into your Facebook feed…

Paste the URL into this box to see what it looks like on Facebook
Paste the URL into this box to see what it looks like on Facebook.

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…

To share the link to Twitter, click on the Tweet button, top right, on the Twitter home page. You must be logged in
To share the link to Twitter, click on the Tweet button, top right, on the Twitter home page. You must be logged in.
Now paste the URL into the box and click the Tweet button
Now paste the URL into the box and click the Tweet button.

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.

In conclusion

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.

Got questions or have a comment?