How to Add Facebook Open Graph Meta Tags to WordPress Themes

How to Add Facebook Open Graph Meta Tags to WordPress Themes

When you’re doing social networking the right way for your website it can bring huge amounts of traffic. Social is all about the visuals so if you want to make your content work well you need to use all the right visual cues.

But how do you make sure the right imagery – the imagery you want – is being used?

How can you be in control when your content is shared, rather than let your social network of choice (or even a popular theme you’re using) choose an image at random for you?

Both themes and plugins can actually automate this. But automation is a killer because you lose control.

On the other hand, it’s you who should decide. It’s you who needs to make recommendations to social networks, so that they’ll know what you’d prefer to show.

And to do this, you’ll need to use a language social networks understand.

That language is called Open Graph.

In this article, I’ll discuss various ways of setting up Open Graph on your WordPress website.

What is the Open Graph Protocol?

The Open Graph protocol is a way to explain all the characteristics of an object, e.g. a post on your website, to make it richer in the context of social networks.

By explaining the characteristics of your post, Social Networks will be able to understand (rather than guess) what the author had in mind for that article and then use it accordingly.

For example, if you don’t specify the open graph title for your post, social networks will have to guess it from the <title> tag of your HTML.

Finding the title of a post is quite trivial since it is fairly standard for people to use the name of the post in the <title> of the post, but the social network is still guessing your intent.

An even more practical example of how Open Graph is useful to you as a WordPress user is which image to show when your article is shared on social networks.

If you don’t specify an Open Graph image, Facebook and other social networks will try to guess which image they should use as the preview to your article.

You’ll probably want to use your blog intro image to share after you’ve worked so hard at getting it designed.

However, it is quite often that mistakes are made when guessing the image to use as the preview.

For example, the logo of your website may get picked up, or another image in the article, which was not meant as the article preview.

An even worse experience would be if the image of an ad was picked up as the article preview.

This is where Open Graph can make all the difference.

Basic tags available for WordPress Open Graph?

We’ve already seen a couple of quick examples of Open Graph tags. Let’s discuss a few further examples of tags that we can use with our WordPress Open Graph.

This is the name that



This article was written by Aileen Javier and originally published on WPMU DEV Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top