Including Fb Open Graph metadata in WordPress themes

Do you want to add Facebook Open Graph metadata to your WordPress themes?

Open Graph metadata enables Facebook and other social media websites to get metadata about your post pages. You can also control how your content is displayed when it’s shared on Facebook.

In this article, we are going to show you how to easily add Facebook Open Graph metadata in WordPress themes. We’re going to introduce three different methods so that you can choose one that works best for you.

Method 1. Adding Facebook Open Graph Metadata with All-in-One SEO

All in One SEO is a popular WordPress SEO plugin used by over 2 million websites. This allows you to easily optimize your website for search engines as well as social platforms like Facebook and Twitter.

First of all, you need to install and activate the all-in-one SEO plugin. For more information, see our step-by-step guide on installing a WordPress plugin.

After activation you need to visit All in one SEO »Feature Manager Page. From here you have to activate the “Social Meta” function.

Activate the social meta function in All in One SEO

Next you have to visit All in one SEO »Social Meta Page. From here you can just fill in the fields to enter your Facebook metadata.

The social meta page is where you can enter Facebook Open Graph metadata

You can start by providing the title, picture and description for your homepage.

Below this you can define a standard image that should be used if an article does not contain an open diagram image. You can also specify the width and height of the image.

Set the default Open Graph picture

Do you need help choosing the image sizes? Check out our full social media cheat sheet for ideal image sizes to use on all social media platforms including Facebook.

If your website uses a Facebook app or has a Facebook Page, you can provide your Facebook App ID in the next section. This is how you can get data for Facebook insights.

Facebook app settings

You can also optionally adjust the settings for Twitter and run a scan to avoid duplicate Open Graph tags on your website.

When you’re done, don’t forget to click the Update Options button to save your changes.

Now that you’ve set site-wide meta tags for open charts, the next step is to add open chart metadata for individual posts and pages.

By default, All in One SEO uses your post title and description for the title and description of the opened diagram. You can also manually set the Facebook thumbnail for each page and post.

Just edit the post or page and scroll down to the All in One SEO section under the editor. From here, switch to the Social tab and fill in any open chart metadata. Here you can set the social media image as well as the title and description.

Open the graphics settings for posts and pages

Method 2. Set Facebook Open Graph Metadata with Yoast SEO

Yoast SEO is another great WordPress SEO plugin that allows you to add Facebook Open Graph metadata to any WordPress site.

First you have to install and activate the Yoast SEO plugin. For more information, see our step-by-step guide on installing a WordPress plugin.

After activation you have to go SEO »Social and just check the box next to Add Open Graph Metadata.

Activate Facebook Open Graph

You can save your settings or continue and configure other Facebook social options on the screen.

You can provide a Facebook App ID if you are using one for your Facebook Page and Insights. You can also change the Open Graph meta title, description, and image of your home page.

Lastly, you can set a default picture that will be used when no picture is set for a post or page.

Yoast SEO also lets you set Open Graph metadata for individual posts and pages. Just edit a post or page and scroll down to the SEO section under the editor.

Set metadata for open graphics for posts and pages

From here you can set a Facebook thumbnail for that particular post or page. If you don’t specify a post title or description, the plugin will use your SEO meta title and description.

You can now save your post or page and the plugin will save your metadata for open Facebook graphics.

Method 3. Manually add Facebook Open Graph metadata to your WordPress theme

This method involves editing your design files. So make sure you back up your design files before making any changes.

Then just copy this code and paste it into the functions.php file of your topic or into a location-specific plugin.

// Adding the open graph in the language attribute function add_opengraph_doctype ($ output) {return $ output. ‘xmlns: og = “http://opengraphprotocol.org/schema/” xmlns: fb = “http://www.facebook.com/2008/fbml”‘; } add_filter (‘language_attributes’, ‘add_opengraph_doctype’); // Leaves the Open Graph Meta Info function insert_fb_in_head () {global $ post; if (! is_singular ()) // if it is not a post or a page return; Echo ‘‘; Echo ‘‘; Echo ‘‘; Echo ‘‘; Echo ‘‘; If (! Has_post_thumbnail ($ post-> ID)) {// the post does not contain an image, use a default image $ default_image = “http://example.com/image.jpg”; // Replace this with a standard image on your server or an image in your media library echo ‘‘; } else {$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), ‘medium’); Echo ‘‘; } echo “”; } add_action (‘wp_head’, ‘insert_fb_in_head’, 5);

Note: Remember to change the site name where it says “Your site name is here”. After that, change the default image url with your image. You will also need to add your own Facebook App ID. If you don’t have a Facebook app, you can remove the Facebook app ID line from the code.

We recommend placing an image with your logo there. So if your post doesn’t have a thumbnail, it will pull your website logo.

That’s all you have to do. As soon as you save your functions.php file (or a location-specific plugin), metadata for open Facebook graphics will be displayed in the WordPress header.

We hope this article has helped you add Facebook Open Graph metadata in WordPress. You might also want to see our picks of the best social media plugins for WordPress to grow your social fan base and our troubleshooting guide on how to fix the wrong Facebook thumbnail issue in WordPress.

If you enjoyed this article, please subscribe to our YouTube channel for more WordPress video tutorials. You can also find us on Twitter and Facebook.

Comments are closed.