How to Add Facebook Open Graph Tags to WordPress (and Open Graph Tags Explained)

Want to develop the magical superpower to control how your content looks on Facebook? I think we can all agree that’s a pretty cool skill to have.

Instead of relying on people sharing your site to choose an image and title, you can pre-fill all those fields with the exact information you want. Of course, people can always edit if they want, but…ain’t nobody got time for that.

Seriously, most people will just paste in your link and share. And that’s why it’s so important to control how your content looks by adding Facebook Open Graph meta tags to your WordPress site.

Noumaan already showed you how to manually add Facebook Open Graph to WordPress. Now, I’m going to show you how to do it automatically with plugins! But first I’ll give you a little Facebook Open Graph meta tags primer.

What is Facebook Open Graph? How it Affects Your Site

Rather than trying to abstractly explain what Facebook Open Graph meta tags are, I’ll show you a real life example.

If you’ve ever shared wplift on Facebook (an action which has been scientifically proven to make you seem cooler to your peers), you may have noticed that detailed information pops up when you paste the URL:

You have an image, a title, a description, and a URL. Do you think Facebook is pulling that information by itself? If you answered yes, you are, unfortunately, wrong.

Facebook is actually getting that information from the Open Graph tags added to the <header> section on wplift. If you go to the source code, you’ll find these little bits of code:

Ok, I know it’s a bit hard to read the code. But that text looks familiar, right? Facebook is pulling the title, description, image, and URL directly from those tags.

And because you can customize those tags to be whatever you’d like, you can, therefore, control how Facebook displays your site’s information.

What Facebook Open Graph Tags Are Allowed?

There are five main Open Graph meta tags you’ll generally want to set:

• og:title – The overall title of your site as you’d like it to appear on Facebook.
• og:description – A short description that displays below the title.
• og:type – The “type” of your site. For most WordPress sites, this will just be “website”
• og:image – The default image you want to be displayed.
• og:url – The canonical URL of your site.

Those are by no means the only tags allowed, but they are the ones most broadly applicable to WordPress sites.

Will Adding Open Graph Tags to WordPress Boost Traffic?

It intuitively makes sense that being able to control the images and text used for your posts on Facebook gives you the ability to increase the CTR of your posts on Facebook.

Additionally, the ability to specify an image via Open Graph tags helps ensure that your posts actually…have images when they get shared.

Why does this matter? Because Facebook posts with images get 2.3X more engagement than posts without images. So not only can you ensure that you have an image, you can make it a good one, too!

How to Add Facebook Open Graph Tags to WordPress

Ok, hopefully you have a solid understanding of what Facebook Open Graph tags are and why they’re important. Now, let’s get into how to automatically add them to both your homepage and individual posts using some handy plugins.

1. Yoast SEO and Open Graph Tags

If you’re using Yoast SEO, you already have a way to quickly add Open Graph tags to WordPress. It’s easy to add tags for both your homepage and individual posts. Here’s how:

To enable Facebook “og” tags and set your default image, you just need to go to SEO → Social. Then click on the Facebook tab and make sure the feature is enabled. You should also specify a default image, which will only be used if your post/page doesn’t include any images:

Then, you can set Open Graph meta tags for posts and pages by scrolling to the Yoast meta box below the WordPress Editor and clicking on the social icon (marked below):

By default, Yoast will pull these values from your post title/meta description. But you can always customize them if you’d like.

2. All in One SEO Pack

If you’re using All in One SEO Pack, it’s just as easy to add Open Graph tags. You just need to activate the Social Meta feature in the Feature Manager:

Then, just like with Yoast SEO, you can specify information for each post/page.

3. WP Facebook Open Graph protocol

If you’re not using Yoast SEO, All in One SEO Pack, or another SEO plugin which supports Facebook meta tags, you can turn to WP Facebook Open Graph protocol for a nice lightweight solution.

The plugin works mainly in the background – it will create Open Graph tags based on your post title, featured image, etc.

Taking it Further with Twitter Cards Meta Tags

I focused on Facebook in this post, but these types of social meta tags are not unique to Facebook. You can also use them for Twitter and some other social networks. All the same principles apply, and if you’re using Yoast SEO or All in One SEO Pack it’s just as easy to set up the meta information for Twitter cards as it is Facebook Open Graph tags.

For example, here’s what the Twitter card looks like when you Tweet a link to the wplift homepage:

Again, this is all set by data Daan controls in the wplift source code:

It’s not magic, folks. It’s social meta tags!

Final Thoughts

Facebook Open Graph tags are one of those low hanging marketing fruits you should always implement. They really don’t take much time at all after you activate a plugin.

I mean, you only need to think about them if you want to customize the tags. If you’re ok with a plugin automatically pulling from your post title, meta description, and featured image, you can pretty much set it and forget it.

One thing that I think is worth doing is paying a professional or using a tool like Canva to design a custom default image for sharing. That way, you can always maximize your social engagement even if one of your posts doesn’t have an image.

Now, over to you. What’s your strategy for Facebook Open Graph tags? Do you set custom tags for every post or just let a plugin handle it?