How To Add Facebook Open Graph Meta Data In WordPress Themes

facebook open graph meta data is one of the great channels you could use for content material distribution. Few different locations can boast a 3rd of all dwelling human beings as their personal base, imparting to each organically published and content material with paid merchandising a capability attainable that’s tough to ignore. Thanks to its appeal, we've got a couple of approaches we are able to intertwine Facebook with WordPress websites today.

We can use Facebook to strengthen comments, for example. We can install computerized posting to Facebook, too. And the way to Facebook Open Graph meta data, we are able to manipulate how our content material seems at the network. If you have a business and want to take it online our WordPress themes can help you to make your first impression lasts long.

Do You Need To Feature Facebook Open Graph Meta Information For Your WordPress Themes?

Open Graph metadata facilitates Facebook and different social media websites to get meta-information approximately your posts pages. It additionally permits you to govern how your content material seems while shared on Facebook.

In this article, we can display you the way to without problems upload Facebook open graph meta data in top WordPress themes. We’ll percentage 3 distinct methods so that you can select one which works excellent for you.

To assist you to apprehend a way to use Facebook Open Graph meta data with WordPress, we’ll display you:

What Is the Open Graph?

The Open Graph is a protocol that offers you a few manipulations over how your content material is displayed whilst you proportion it through social networks. Without Open Graph and its tags, sharing your submit as an URL on Facebook could yield unpredictable results — you may get a submit without an outline or a photo you desired to appear.

This is what a submit may seem like in case you attempted to proportion it to Facebook without placing any Open Graph tags:

With the Open Graph tags, however, you may set which particular factors you need to be displayed together along with your web page or article. You can create a specific title, a hyperlink to a photo that is going together with your content material, offer the hyperlink in your content material, and specify the sort of content material you’re sharing.

And the ones that are most effective are the matters you may do with the simple tags. If you’ve been given the time and the need, you may cross in advance and input a custom description, a hyperlink to a URL for an audio or video record you’re sharing, and the locale you’re marking the tags in.

How To Add Open Graph Tags

If you’re cushty with growing toddler topics and enhancing your theme’s functions. personal home page files, you may upload all of the tags for your own. Open Graph tags are meta tags that move into the segment of an internet web page the usage of the subsequent syntax:

For example, in case you used the op: name tag, the cost will be the name of your put up or web page as you need it to seem on Facebook. For the picture tag, the cost will be the hyperlink to the picture you need. The  URL cost is normally the canonical URL of your web page or page.

The simplest manner to begin the usage of Facebook Open Graph meta data for your WordPress internet site is, you guessed it, via means of including them with a plugin. One of the satisfactory matters of approximately Open Graph tags is that plenty of plugins you would possibly already be the usage of for search engine optimization have them included into their optimization options.

When you’re putting in Yoast, for example, you may be putting the Open Graph Tags without understanding them. After putting in Yoast search engine optimization, head over to search engine optimization > Social withinside the dashboard, and pick the “Facebook” tab. Enable Open Graph metadata, input your Facebook App ID in case you need to apply Insights, and upload a picture so as to function default while no difference is present.

You’ll be capable of uploading custom titles, descriptions, and pictures to be simplest to be used while sharing posts and pages on Facebook. Head over to a web page or a submit and click on the “Social” tab withinside the Yoast search engine marketing menu underneath the submit.

Choose “Facebook,” and you’ll see 3 fields wherein you could set a custom title, description, and image.

You can discover comparable alternatives in plugins which include Rank Math or All in One search engine marketing. If you've got alternatives to fine-song the advent of your posts while shared on Facebook and the settings virtually work, possibilities are you’re the use of Open Graph meta data.

How To Get More Control Over Open Graph Tags

Yoast and comparable plugins are clean to use, however, they don’t provide you with the choice to dig into Open Graph tags for your website. To do this without including the tags manually, you could use one of the plugins that deal especially with Open Graph tags. You can use, for example, the Open Graph and Twitter Card Tags plugin.

After you’ve downloaded and activated the plugin, you’ll be capable of discovering it beneath neath Settings > Open Graph and Twitter Card Tags. Under the “General” tab, you’ll be capable of setting matters which include the most period for the description, in addition to a homepage and default description.

You’ll additionally be capable of setting the default photo, photo assets for posts and pages, an emblem overlay, and a pair of extra options.

This tab additionally carries URL and creator settings, in addition to a toggle for preserving the records on uninstall.

Under the “Open Graph” tab is wherein you’ll be capable of enabling, disabling, and setting the cost to loads of Open Graph tags. From the simple ones that upload the web page and publish identity and placement names to those that upload authors, posted dates, and locales, this tab offers you a few hands-on manipulations over the records you need to ship over to Facebook.

Finally, if you use the plugin collectively with like-minded plugins together with Yoast search engine optimization or WooCommerce, you’ll locate plugin-particular settings beneath the “third Party” tab. For Yoast search engine optimization, for example, you could pick whether or not to apply the identify, URL, and outline it generated.

The Open Graph and Twitter Card Tags plugin is in all likelihood to fulfill your want for managing over the Open Graph tags. If it doesn’t, your subsequent step will possibly be to begin including the code manually in your website.


1. Adding Facebook Open Graph Meta Data with AIO SEO

All in One search engine optimization is a famous WordPress search engine optimization plugin utilized by over 2 million websites. It permits you to optimize your internet site for engines like google in addition to social systems like Facebook and Twitter.

First, you want to put in and spark off the All in One search engine optimization plugin. For extra details, see our step-by-step manual on the way to set up a WordPress plugin.

Upon activation, you want to go to the All in One search engine optimization » Social Networks web page. Here you may input your Facebook web page URL and all of your different social networks.

Next, click on the Facebook tab on the pinnacle of the web page, and you’ll see that Open Graph Markup is enabled with the aid of using default. You can click on the “Upload or Select Image” button to select a default Facebook OG picture if an editorial doesn’t have an open graph picture.

If you scroll down, you may personalize your web website’s online name, description, and greater settings. Don’t overlook clicking on the blue Save button as soon as you’re done making changes.

Now that you have set a web website online-huge open graph meta tags, the subsequent step is to feature open graph meta facts for man or woman posts and pages.

By default, AIO SEO will use your put-up identify and outline for open graph identify and outline. You also can manually set the Facebook thumbnail for every web page and put it up.

Simply edit the put-up or web page and scroll right all the way down to the All in One search engine optimization phase underneath the editor. From here, transfer to the Social tab and you’ll see a preview of your thumbnail.

You can set the social media photo right here in addition to the name and description. Just scroll right all the way down to the Image Source field. You can select to apply the featured photo, add a custom photo, or different options.

2. Set Facebook Open Graph Meta Data The Usage Of Yoast Search Engine Marketing

Yoast search engine marketing is some other incredible WordPress search engine marketing plugin that you may use to feature Facebook open graph meta statistics into any WordPress site.

The first component you want to do is set up and activate the Yoast search engine marketing plugin. For greater details, see our grade-by-grade manual on a way to set up a WordPress plugin.

Once activated, you want to visit search engine marketing » Social and virtually take a look at the field subsequent to Add Open Graph meta statistics.

You can keep your settings or hold and configure different Facebook social alternatives on the screen.

You can offer a Facebook app ID in case you use one on your Facebook web page and insights. You also can extrude your homepage Open Graph meta title, description, and photo.

Lastly, you could set a default photo for use whilst no photo is ready for submission or web page.

Yoast search engine optimization additionally lets you set Open Graph metadata for man or woman posts and pages. Simply edit a submit or web page and scroll right all the way down to the search engine optimization phase beneath the editor.

From here, you may set a Facebook thumbnail for that specific publish or web page. If you don’t set a publish name or description, then the plugin will use your search engine optimization meta name and description.

You can now store your publish or web page and the plugin will keep your Facebook open graph metadata.

3. You can also Manually Add Facebook Open Graph Meta Data into Your WordPress Theme

This approach calls for you to edit your topic documents, so ensure that you return your topic documents earlier than making any changes.

After that simply copy and paste the code into your theme’s functions.

Note: Remember to alternate the Site Name wherein it says “Your Site Name Goes Here”. After that, alternate the default photograph URL with the photograph yours. You additionally want to feature your very own Facebook app ID, If you don’t have a Facebook app, then you may eliminate the Facebook app ID line from the code.

We might advocate placing a photograph together along with your emblem there, so in case you’re put up now no longer have a thumbnail, then it pulls your site’s emblem.

That’s all you want to do. As quickly as you keep your functions. personal home page file (or site-unique plugin) it'll begin displaying Facebook open graph metadata withinside the WordPress header.

We wish this text helped you upload Facebook open graph meta records in WordPress. You may additionally need to look our select out of the first-class social media plugins for WordPress to develop your social following, and our troubleshooting manual on a way to repair the Facebook wrong thumbnail trouble in WordPress. Also, learn about Import / Export WordPress Gutenberg Blocks with VWTHEMES.


If you’re already using Facebook to unfold your content material and attain new audiences, there’s no excuse for now no longer giving it an honest shot. Without getting to know approximately the Open Graph protocol, you’re now no longer getting each unmarried ounce of site visitors the goodness you could.

This information, however, shows that you could upload Open Graph metadata to WordPress websites without breaking a sweat. Commonly used search engine marketing plugins will allow you to do it quickly. If they’re now no longer sufficient for you, however, you could constantly flip to unique plugins and, in the event that they don’t work, begin putting the tags manually.

Our WordPress theme bundle - The complete package of themes is available at a heavy discount at just $99. Grab it now before the deal ends.

Back to blog