WPBeginner» Blog» Themes» How to Add Facebook Open Graph Meta Data in WordPress Themes

How to Add Facebook Open Graph Meta Data in WordPress Themes

Last updated on October 17th, 2016 by Editorial Staff

Free WordPress Video Tutorials on YouTube by WPBeginner

How to Add Facebook Open Graph Meta Data in WordPress Themes

We shared with you how to add the facebook like button in WordPress. Then we wrote about how to add the facebook send button in WordPress. Now usually, Facebook is really smart in pulling in the right data for your posts when they are shared on Facebook. However recently, we have been hearing reports of Facebook not pulling the right thumbnail image when someone clicks Like, not pulling the right page title, etc. Well in this article, we will share how you can add facebook open graph meta information in WordPress themes which will solve all of those issues.

Adding Facebook Open Graph meta data in WordPress

We have three methods for you, two of them require you to install a plugin. The third method is for intermediate level users who are not shy of modifying their themes.

Adding Facebook Open Graph Meta Data with WordPress SEO

At WPBeginner, and on all our websites we use WordPress SEO. It not only helps you add titles and meta descriptions. It is the complete site optimization package for WordPress. WordPress SEO also comes equipped with social features, including the ability to add Facebook Open Graph meta data in WordPress themes.

First thing you need to do is install and activate, the WordPress SEO by Yoast plugin. Once activated, you need to go to SEO » Social and simply check the box next toAdd Open Graph meta data.

Enable Facebook Open Graph meta data

You can save your settings or continue and configure other Facebook social options on the screen. You can connect your site to your Facebook user account as the admin. Doing so you will be able to see Facebook insights for this website. You can also provide your Facebook page’s URL and it will be added into Facebook Open Graph meta data.

On the same page, you can add an image and description for your front page. You can also add a default image to be used when an article does not have any image attached to it.

That’s all, you have successfully added Facebook open graph meta data into your WordPress theme.

Adding Open Graph Meta Data in WordPress Using Official Facebook Plugin

If you are using another SEO plugin like All in One SEO, or simply don’t want to install WordPress SEO plugin, then you can still add Facebook open graph meta data using the official Facebook plugin for WordPress.

First thing you need to do is install and activate the Facebook plugin. Simply activating the Facebook plugin will add open graph meta deta into your theme’s header.

That’s all you have enabled Facebook open graph meta data on your WordPress site.

Using the official Facebook plugin allows you to use many other features this robust plugin offers. For example, you can use it to add a Facebook Likebox / Fanbox, embed Facebook status posts, add follow button for authors, and much more.

Manually Add Facebook Open Graph Meta Data into Your WordPress Theme

This method requires you to edit your theme files, so make sure that you backup your theme files before making any changes. Simply copy and paste this code in your theme’s functions.php file or a site-specific plugin.

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

//Lets add 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:admins" content="YOUR USER 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 NAME Goes HERE"/>';
	if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
		$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
		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 );

Note: Remember to change the Site Name where it says “Your Site Name Goes Here”. Also change the default image URL with the image of yours. We would recommend putting an image with your logo there, so if your post does not have a thumbnail, then it pulls your site’s logo. Studies show that posts shared without a thumbnail are less effective than those with thumbnails. Also don’t forget to add your USER ID. You can find your Facebook user ID by going to this URL: http://graph.facebook.com/syedbalkhi (Just replace syedbalkhi with your own username).

That’s all you need to do. As soon as you save your functions.php file (or site-specific plugin) it will start showing Facebook open graph meta data in WordPress header.

We hope this article helped you add Facebook open graph meta data in WordPress. Its a great way to get users engaged with your content on Facebook’s massive social platform.

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