How to Add Facebook Open Graph Meta Tags to WordPress Themes

How to Add Facebook Open Graph Meta Tags to WordPress Themes David Attard October 5, 2016

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 choose an image at random for you?

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

og:title

The preview image of your post. This is, of course, quite 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:

An example of a WPMU DEV posted when shared to 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://premium.wpmudev.org/blog/image1.jpg" /> <meta property="og:image:secure_url" content="https://premium.wpmudev.org/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.

1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free! Subscribe

If your primary social networking campaigns will be deployed through Facebook, you might want to install the official WordPress Facebook plugin. As at the time of writing, this plugin has not been updated for a while so you may want to skip it for more recently updated versions of plugins.

There are a few other plugins you might want to check out. Open Graph Protocol Framework is the new kid on the block. It's really simple to get up and running and it doesn't require any Facebook App to be created, which is a plus.

Another option for OG tags is the WP Facebook Open Graph protocol plugin. The plugin adds all the important Facebook Open Graph Meta tag information to your site. It requires a Facebook App to be setup correctly, which feels a little bit of overkill given that it's mostly spitting out the OG tags.

Our Ultimate Facebook plugin provides an easy way for you to add Open Graph tags to your WordPress website. 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 the social network of choice you should be focusing on.

The lifetime of a tweet on Twitter is very short, measured in minutes or even seconds. Google+ is not exactly the hottest and trendiest social network despite several years of iterations of development and attempts at merging it into all of your Google products. LinkedIn has its strong points and groups. Ello? Are you still alive and kicking? My most recent visit (only for the sake of writing this article) showed me it has rebranded to "The Creators Network." It seems it's niching its audience in the hopes of success.

Facebook, on the other hand, despite several predictions of its untimely demise, is still the busiest community out there.

It has billions of very 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

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.

SEO Boost your traffic with SmartCrawl

SmartCrawl supercharges your SEO using proven methods for optimization, ensuring high impact results with little effort. Set up automated sitemap generation, alert search engines when you have new and updated content, and control exactly how your web pages are displayed in search results.

TRY SMARTCRAWL FREE Find out more 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.

Facebook Open Graph support. 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.

Allowing registration to your WordPress site through Facebook 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. POST the first comment

Share on Facebook

Share on Twitter

Share on Google+

David Attard

David is an inquisitive web designer who frequently shares his tips and tricks at DART Creations. When he's not blogging about web design, some thing he's been into for the last 12 years, he's usually dreaming about his next big thing.

Source: How to Add Facebook Open Graph Meta Tags to WordPress Themes