How to add Facebook open graph meta data in WordPress themes

Do you want to add metadata to your WordPress website? The open graph metadata will help social media like Facebook. Twitter and others to get your website post pages metadata. The open graph data will enable you to control the appearance of the content you shared on social media.

So here in this article, we will guide you through different processes to add Facebook open graph metadata in your WordPress theme.

Add facebook open graph metadata using Yoast SEO plugin

Yoast SEO is one of the best SEO plugins for WordPress. This plugin offers you so many features and functionalities to make your website SEO better and engaging. With this plugin, you can easily add Facebook open graph metadata.

Install and activate the plugin and then go to SEO > Social page. Now here on this page move on to the Facebook tab and enable the Add Open graph metadata option.

Now you can save your settings and then do more configuration. If you are using any Facebook page or insight then you can add the Facebook app id to connect it with your website. You can also change the title, description, and images of your metadata post.

Using the Yoast SEO plugin you can set separate metadata for individual posts or pages. Open up a post or page and scroll down to the SEO section where you can add metadata for that specific post or page.

Add Facebook open graph metadata using All in One SEO plugin

All in One SEO is another great SEO plugin for WordPress. With this plugin, you can easily optimize your website with all social media platforms. Install and activate the plugin and then go to the All in One SEO > Social Networks page where you can add your Facebook page URL.

Now move on to the Facebook tab where you will be able to see that the open graph markup is already enabled. Here you can set the default image source, default post-Facebook image, default term image source, default post & object type.

When you are done click on the Save button to save the changes. Now you can set the metatag for specific posts and pages too. Open up a post or page and go to the All in One SEO section and then the Social tab. Here in this section, you can set individual metatag for any specific post or pages.

Add facebook open graph metadata manually

If you don’t want to use a plugin then you can add the Facebook open graph metadata manually. For this, you need to add some code snippets to your theme’s function.php file. If you have not edited your theme file before then you can see this tutorial to learn How to copy-paste code snippets to your WordPres website.

Add the following code to your function.php file.

//Adding the Open Graph
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');

// 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 '<meta property="fb:app_id" content="Your Facebook App ID" />';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:site_name" content="Your Site"/>';
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image="http://domain.com/image.jpg"; //replace this with your image
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Don’t forget to replace the “Your site” text with your domain name. Change the image URL with your selected image.

That’s it! This code snippet will add the Facebook metadata graph for your WordPress website. You can see our other articles to learn What new features are coming in WordPress 5.9?

Free Google tools every blogger should use

How to get Google sitelinks for your WordPress site