The Open Graph protocol is a bunch of meta tags that one can add to their webpages. These tags are then used by social media platforms to determine how links to that page should be displayed on their platform.
Long story short: you can use basic HTML to add important information to your posts and pages. This information is picked up by social networks like Facebook, LinkedIn and Twitter. It’s relatively easy to add Open Graph tags to your website. If you’re using WordPress for your website, you can add these tags in multiple ways. The easiest approach is to use a plugin like Yoast SEO, a plugin that I recommend to install even if you are not looking to add Open Graph tags to your website.
How does Open Graph work?
Open Graph information is stored in the <head> section of your page’s HTML. The Open Graph meta tags all follow a specific format: a content value is assigned to a property. Example:
<meta property="og:title" content="The title of your article" />
The example above would create a title (“The title of your article”) for your article that can be picked up by social networks. In addition to the title, you can add other tags like the og:description, og:type, og:url and og:image. The most important Open Graph tags are the title, description and the image. These tags will be picked up and shown by social networks.
Below is an example of one of my previous posts shared on Facebook:
The article used in the example above is using the following Open Graph data:
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="How to backup your WordPress website to Google Drive with UpdraftPlus" />
<meta property="og:description" content="How to backup your WordPress website to Google Drive with the free UpdraftPlus WordPress plugin. Creating backups is very important." />
<meta property="og:url" content="https://wplounge.org/backup-wordpress-google-drive/" />
<meta property="og:site_name" content="WPLounge" />
As you can see, the title, description and image that are picked up by Facebook match the ones that we defined in our Open Graph data. Actually on WPLounge we are having this done automatically by using the Yoast SEO plugin. If you did not install this plugin yet, go to Plugins > Add New in WordPress. Next, search for “Yoast SEO” and click “Install” and then “Activate”. By default, Yoast SEO will add the relevant Open Graph data to your posts and pages.
How Yoast SEO determines your Open Graph data
The title that Yoast uses is the same as your post or page’s title. The description will match the SEO description of your article or if there is no description, it will grab the first piece of text from your post. The image that is being used as Open Graph image is usually the “Featured image” that you have set for your post. If you do not set a featured image, Yoast SEO will use the first image that it can find on your page. I do recommend to add a featured image as this will often be used in your theme as well. By setting a good looking featured image for your post, you will also increase the amount of clicks that you will receive from Facebook. By picking the right image, title and description, your post will stand out more between all the other content on Facebook.
If you want to use a different title, description or image than the ones mentioned above, you can override all the above by going to the Social menu while editing your post:
In this menu, you will be able to override the title, description and image used for sharing your link on Facebook. Please note that the image should be at least 1200 x 630 pixels for Facebook.
If you look at the top of this menu, you will also find a Twitter logo. Twitter uses fairly different tags to grab a title, description and image. Therefore there is a separate menu for Twitter in the Yoast SEO plugin. Other social networks (like LinkedIn and Google+) will often use the same Open Graph data that Facebook uses.
Twitter on the other hand, uses so called Twitter Cards. Yoast SEO is capable of adding these to your posts and pages as well. Just like the Facebook title, description and image, you will only need to fill this out if you want to override the data that is already on your page. For my previous post (as shown in the example above), Yoast SEO automatically adds the following Twitter Cards:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="How to backup your WordPress website to Google Drive with the free UpdraftPlus WordPress plugin. Creating backups is very important." />
<meta name="twitter:title" content="How to backup your WordPress website to Google Drive with UpdraftPlus" />
<meta name="twitter:image" content="https://wplounge.org/wp-content/uploads/2018/03/Backup-WordPress-Google-Drive.jpg" />
<meta name="twitter:creator" content="@Wouter_Postma" />
It picks up the same description, title and image used for Facebook sharing. In addition, it adds my Twitter handle (@Wouter_Postma) which can be shown next to the shared link on Twitter. This can be a nice extra to increase your Twitter followers.
If Facebook doesn’t show your Open Graph data correctly
When you’ve published a new post or created a new page on your website, Facebook may not have “scraped” that URL yet. If this is the case, Facebook has not yet been able to fetch your page’s Open Graph data. Therefore, if you share this new URL to Facebook, it may not show the (correct) Open Graph data. It could even show without any images or with the wrong title. To fix this, before sharing your post on Facebook, visit Facebook’s Sharing Debugger. Enter the URL of your post or page and click “Debug”.
When looking at the “Link Preview” section of this screen, you’ll see a preview of what your shared link would look like on Facebook. If it does not match the Open Graph data that you provided, click the “Scrape Again” button on top of the page.
Facebook will “scrape” your page again and update its memory of your URL’s Open Graph data. Most of the times, clicking the “Scrape Again” button once will do the trick. Check your “Link Preview” again. If it’s correct, you’re all set to share your URL on Facebook!
Adding a default Open Graph image
In addition to all the above, Yoast SEO also allows you to set a default Open Graph image. To do this, go to SEO > Social > Facebook.
This default image will be used when there are no images on your page or post. It is important that the image meets Facebook’s requirements. Therefore, it must be at least 1200 x 630 pixels.