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.

We’ll cover:

• What Is the Open Graph Protocol?
• Basic Tags Available for WordPress Open Graph
• Other Open Graph Tags Available for Describing Your Website’s Content
• Manually Setting Open Graph Tags
• Setting Up WordPress Open Graph Using a Plugin
• The Importance of WordPress OG Tags

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 is used to share the post:

og:title

The preview image of your post is an important tag to enable the success of your social media campaigns:

og:image

This Open Graph tag will describe the actual URL to visit when the link is clicked:

og:url

The description is also something that is highly visible, so customizing this to encourage people to visit your site is essential.

Many people actually use the meta description contents here, which many times have also been optimized for high click-through rates:

og:description

To explain these tags visually, here’s an example of how our WordPress Open Graph tags are translated when sharing a post on Facebook:

The type Open Graph tag describes whether the object being shared is an article, a video, music, a book, a user profile or a website.

There are further tags which can be used to describe each specific type. You can have a look at the detailed tags which can be used in the Open Graph types section.

og:type

Other Open Graph Tags Available for Describing Your Website’s Content

Besides the above basic tags, there are a number of further Open Graph tags that can be used with your WordPress website to further describe the content.

Most of the Open Graph WordPress tags are optional, however, there’s lots of content that will be better enabled if these tags are populated correctly:

og:audio

and

og:video

If there is any kind of audio or video that can compliment this content, this OG tag can be used to describe it’s URL location:

og:site_name

Larger sites that have thousands of pieces of content may want to use this tag to denote that the content being shared is part of the larger branded site.

Additional Tags within Specific OG Tags

Some of the tags described above can also take additional descriptive tags.

Let’s take the og:image as an example. Incidentally, og:video has exactly the same properties as og:image.

All of the below are additional properties that can be described using the corresponding Open Graph tags:

• og:image:url – This is identical to og:image and can be used interchangeably.
• og:image:secure_url – This is the URL that should be used use if the website is accessible over HTTPS
• og:image:type – This tag describes the MIME type of this image.
• og:image:width and og:image:height – these tags describe the dimensions of the image

The following is a full example of using the og:image tag:

<meta property="og:image" content="http://wpmudev.com/blog/image1.jpg" />  <meta property="og:image:secure_url" content="https://wpmudev.com/blog/image1.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" />

Other structured properties include:

• music.song
• music.album
• music.playlist
• music.radio_station
• video.movie
• video.episode
• video.tv_show

All of these have their own tags that are used to provide additional details about the object.

But how do we go about implementing Open Graph tags in WordPress?

There are a number of possible ways.

Manually Setting Open Graph Tags

I mentioned a bit further up in this article that you should be able to extract most of the information required for OG tags from your existing WordPress content.

Using some edits in your site’s functions.php file, you will be reading the data from your content and pushing it out as OG tags.

This is required such that social networks using your content will actually know that there are Open Graph tags being used to describe your WordPress content.

The below is actually picking up the specific parts of your WordPress content and constructing OG tags from them:

You’ll need to customize a few of the tags above, such as replace the og:site_name with the actual name of your site.

You’ll also need to discover your Facebook admin id and replace it in the value of the fb:admins content tag.

Setting Up WordPress Open Graph Using a Plugin

To take advantage of using Open Graph, you will need to setup your WordPress website such that this information is picked up as necessary from your content and added to any WordPress content.

If your primary social networking campaigns will be deployed through Facebook, one option is to install a plugin like Open Graph and Twitter Card Tags. 

This plugin inserts Facebook Open Graph Tags into your WordPress blog/website, helping to enhance your Facebook sharing results.

Open Graph Protocol Framework is another great option. It’s really simple to get up and running and it doesn’t require any Facebook App to be created, which is a plus.

You also can’t go past our own SmartCrawl which comes loaded with open graph support. SC’s social integration gives you all the tools you need to get recognized, and take full advantage of viral content.

Ultimate Facebook Plugin: Not Just Open Graph Tags

Most of this post has been about social networks.

Let’s face it, though, in most circumstances, Facebook is still the king of the social networks of choice (followed closely by Instagram, but they both fall under the same umbrella anyway).

The lifetime of a tweet on Twitter is very short, measured in minutes or even seconds. And yes, LinkedIn has its strong points and groups.

But Facebook, despite several predictions of its untimely demise, is still the busiest community out there. We’re talking billions of engaged users. If you’ve got money to spend, spend it on Facebook ;-) You’ll be doing yourself a favor.

Why am I sucking up so much to Facebook? Unfortunately, I’m not a shareholder, nor have I got any relation to Zuckerberg.

There’s a very simple but very valid reason.

One of the ways of making your website more successful is by creating an engaged community. By integrating your website tightly with Facebook you are riding piggyback on the popularity of the social network.

You’ll slowly pull in the Facebook community to your website and keep them engaged with your brand through Facebook.

By making your website and Facebook mostly seamless, you’re engaging with your community on their own terms.

Now, how do you go about making your website and Facebook come together?

Enter the Ultimate Facebook plugin.

(NOTE: As you’re well aware, we recently retired most of our legacy plugins. However, you can still find them all on GitHub, and every now and then we’ll throw back to one of them if they help solve a specific problem.)

Whilst I’m not going to go into detail here describing the whole feature set of this plugin, it’s important to highlight a few of its benefits.

1. You Get All of the Essential WordPress Open Graph Tags

We’ve been searching for ways to create WordPress Open Graph tags using plugins.

This is another of the easy ones as already discussed. It’s also got a specific feature, which is better than the rest of the plugins I tested.

I mentioned that there are quite a few Open Graph tags that are not used by every site, since they are for very specific types of content.

Ultimate Facebook allows you to insert additional Open Graph headers manually.

2. Eliminate the Registration Barrier from Your Site

You probably want your users to register on your site to bring about more benefits for them.

Yet, whether you like it or not, registration is a barrier.

If you were to get rid of the barrier you would have much faster growth. With Ultimate Facebook and Connect, users will be able to register for your site using their Facebook account.

This means registration becomes a simple one-click process.

3. Setup Facebook Comments on WordPress

Deciding whether to use native WordPress comments or choosing between WordPress comments systems is something of a decision that is not to be taken too lightly.

The reality is that if you want to switch between comment systems, the likelihood is that you’re going to lose some information in the transfer.

Facebook comments is the best of most worlds. It’s a great way of integrating Facebook with your website.

It also brings about additional features which the native WordPress comments system does not have such as Liking comments and displaying comments by comments or popularity.

Of course, the fact users don’t need to register to comment removes another engagement barrier.

And there’s another bonus – using Facebook comments makes your site less prone to comment spam. Real Facebook user profiles are unlikely to be used to spam other websites because it will leave a negative impact on their profile.

4. Post Articles and Updates Automatically to Your Facebook Accounts

Auto-posting your articles to Facebook makes it much easier for your to bring your audience back to your website.

The Importance of WordPress OG Tags

Open Graph tags are essential for your WordPress website if you want to be in full control of the way your content is shared on social media.

It’s certainly worth doing because it not only helps you stand out from the crowd and draw more clicks and view, but you’re also helping search engines better display your content.

Do you use Open Graph tags with your WordPress? Have you seen an increase is sharing of your articles when using Open Graph tags? Are there better Open Graph plugins which we need to test? Let us know in the comments below.