How to add Facebook Open Graph Meta Tags For WordPress

Tried of sharing your blog post and get irritated to see your post without title, description and thumbnail? Learn how to add Facebook Open Graph Meta Tags For WordPress!

There is a time in your blogging career, when you try to share your blog post on Facebook, but then realises that it doesn’t show the title, description and thumbnail of your blog post. You end up blaming Facebook, or you may even send support email to Facebook renting about their website issues or you create a post on their support forums telling them how their service sucks so much. The truth is: You have issues in your very own website!

If you search for your issue on Google, then you will realise that there is a special protocol called Open Graph protocol, which Facebook uses to crawl objects on your blog post pages. Through it, bloggers can optimise their blog when sharing their content on social media networks, resulting in the increase of Click-through rate due to proper appearance of objects (title, images, etc.) in links. It provides HTML snippets which you can put in your website’s HTML head to give it some attributes.

In this article, I am going to show you how you can add facebook open graph meta information in your WordPress theme, which will solve all of those issues that you might face if you try to share your blog post on Facebook.

How to add Facebook Open Graph Meta Tags For WordPress

1) Visiting Object Debugger Tool’s Website

Facebook provides Object Debugger page with which you can add some link of a website to scrap the information. If you are lucky enough, then Facebook will automatically put Open Graph meta tags in your blog post, such as, og:title, og:description, og:image, etc. But at most times, Facebook finds it hard to crawl such information and you end up sharing your post without proper thumbnail, title, description, etc.

If you find issues with your links, regardless of crawling the information through Object Debugger Tool, then you really need to put Open Meta tags manually in your WordPress website.

2) Adding the Open Graph meta information

There are two ways to add open graph meta information in your WordPress themes:

1) Through Plugins

WordPress SEO

To install the WordPress SEO by Yoast plugin, you need to search for it in the WordPress plugins directory and then activate it through SEO » Social. Once you have activated the plugin, then simply check the box next to Add Open Graph meta data.

fb-opengraph-plugin

You can also add Facebook Admin and ID to get Facebook insights about your blog posts. Through Facebook development tools, you can even add “like” and “share” buttons in your blog posts.

Facebook Official Plugin

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. This plugin not only supports open graph meta support, but also provides Facebook insights, an ability to “like” and “share” your blog posts and Facebook comments box to synchronize comments from Facebook users.

Facebook WordPress Plugin

2) Through Modifying Themes

Assuming that you have copied your theme as backup, you need to find functions.php in your theme directory and add the following code somewhere:

//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 );

3) Validating your links

Now once you have added the code in, you need to update the source trunk of your WordPress blog and validate your url. Usually checking a page with thier debug tool refreshes the Facebook’s cache, and so you will be able to see the new information based on those Open Graph meta tags.

Conclusion

In this guide, I have showed you the amazing power of Open Graph meta tags, and how you can utilize it on your WordPress website. You will notice good click-through rate after a while.

If you liked our article, then why not share it with your friends on social media networks? You ask additional questions (if you have) in the comments section below! You can also find us on Twitter and Facebook. Looking forward to connecting with you!

Add a Comment

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