Open Graph tags – what do they do and how to add them to WordPress

Open Graph Tags WordPressOpen Graph tags have one simple task – to give web apps important bits of information about each page on your website. They were first introduced by Facebook in order to allow webmasters to generate richer link previews.

Their reach has since expanded and they are now also used by other popular social networking websites, by chat apps, etc., all of which look for Open Graph tags in order to display more information about each page that is shared through them.

Some web apps can automatically extract this information without you having to add any extra code. And to their credit – at times they do the job quite well.

However, if you want your links to have a consistent look irrespective of the particular platform through which they are shared, Open Graph tags are the way to go.

How do Open Graph tags work on your site?

The best way to understand what Open Graph tags are all about is to actually see them in action.

Sharing a URL on Facebook will generate a link preview consisting of a title, a description, and a thumbnail image. If you believe that Facebook somehow self-generates this information, you are wrong. It comes courtesy of the Open Graph meta tags in the web page’s source code. Here is the proof – take a closer look at these bits of code:

Though this is a code extract, you don’t need to be a computer programmer to notice the following properties: title, description, image, and URL.

These meta tags tell Facebook what content to show in a given link preview and are completely customizable.

Open Graph tags you need to use

There are more than 20 different Open Graph tags, but you don’t have to use all of them. Instead, you can focus on just 4:

• og:title – the title of your site as you’d like it to be displayed on Facebook;

• og:description – a brief description, which will be displayed below your site’s title;

• og:image – the image that will be displayed by default;

• og:url – the canonical URL of your site;

To see the full list of available tags, visit the official Facebook Developers portal.

Will Open Graph tags improve website traffic?

It goes without saying that if you are able to control the images and the text in your Facebook posts, you’ll be also able to increase their CTR (click-through rate). And the latter is crucial for your posts’ popularity.

It is also worth mentioning that when you use Open Graph tags, you can be sure that your Facebook posts will contain images whenever other users share them.

And image-fitted posts get 2.3 times more engagement than image-free ones. That’s why it is important to choose your images carefully.

Will Open Graph tags affect SEO?

Open Graph meta tags are much like the ones search engines look at when deciding which pages of your website to display in their search results. However, as they were introduced by Facebook, they have no direct relation to your rankings on Google, Bing, Baidu, Yandex and other search engines.

Thus, your on-page SEO will not be affected by the presence or absence of Open Graph tags.

How to add Open Graph tags to WordPress

By now, you should be well aware of the essence and significance of Open Graph tags. Listed below are several plugins, which can help you automatically add Open Graph tags to your website’s homepage and to your separate posts.

Yoast SEO

yoast seoYoast SEO is one of the most popular WordPress SEO plugins. It can help you easily add Open Graph tags to your posts.

All you have to do is scroll down to the Yoast SEO box under the WordPress Editor and click on the share icon on the left.

You can specify a title, a description and an image for each given post.

By default, Yoast SEO will use the particular post’s title, featured image and meta description, but you can also specify custom ones.

All in One SEO Pack

all in one seo packAll in One SEO Pack is another popular WordPress SEO plugin, which allows you to add Open Graph tags with ease. To see the Open Graph option, simply activate the Social Meta feature from the Feature Manager section.

Once you have done so, you will be able to add custom meta information to your posts, just like with the Yoast SEO plugin.

The SEO Framework

the seo frameworkThe SEO Framework is yet another all-in-one WordPress SEO plugin.

To add Open Graph tags, go to SEO Settings and look for Custom Home Page Title, Custom Home Page Description, and Social Image Fallback URL. The SEO Framework plugin will automatically resize the image you have chosen.

WP Facebook Open Graph protocol

wp facebook open graph protocolIf you don’t want to use an all-in-one SEO plugin to merely add Open Graph tags, you can check out the WP Facebook Open Graph protocol plugin, whose sole function is to add og:title, og:descritpion and og:image tags to your posts.

It runs in the background and generates the tags automatically. They are based on the particular title, meta description and featured image you have specified.

The main advantage of the WP Facebook Open Graph protocol plugin is that it’s much more lightweight and less resource-demanding than the above-presented all-in-one SEO plugins.

Open Graph tags best practices

Facebook recommends that you use images whose size is at least 1200 x 630 pixels. This will ensure that they will be displayed properly on high-resolution displays. The minimum image size should be 600 x 315 pixels. Otherwise, the given image would still be displayed in the respective post, but its size would be much smaller. Images smaller than 200 x 200 pixels are not even ‘recognized’ by Facebook.

To avoid quality-degrading image compression, you should also avoid red as much as possible.

Images cannot be larger than 8 MB.

The og:title tag should not contain brand or domain mentions. The og:url tag should be free of extraneous query string parameters.

Visit the official Facebook Developers portal to see all best practice recommendations.

Keep in mind that these practices are recommended by Facebook. Elsewhere, other specifications may apply. This is why, we recommend that once you have added Open Graph tags to your site, you test what your posts look like across different social media platforms.



Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.