Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Facebook Open Graph Meta Data in WordPress Themes

Last updated on by
Follow WPBeginner on YouTube
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.

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.

Adding Facebook open graph meta data using WordPress SEO plugin

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.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Daniele Besana says:

    Hi guys, I’m having problems with og:description, basically all the formatting is missing on the shared page. New lines are not respected, how can I control that?
    Thanks!

  2. WPBeginner Staff says:

    Check your page using Facebook debug tool
    https://developers.facebook.com/tools/debug Usually checking a page with the debug tool refreshes the Facebook’s cache and you will be able to see the new image.

  3. BK says:

    Thanks for this. I want to share link directly from my site using the social button. However, when I click on for example the Facebook share button, the image and the description is still using a previous information. Although I have updated the image and description using Yoast SEO and specifically customise the image and description for that post. May I know what did I do wrongly?

  4. Naren Patel says:

    Thank you very much, I really want this information.

  5. Robin says:

    Thank you. I can’t tell you how long I have been trying to figure this out. Easy to do with ZiPLIST for recipes but could not figure it out for Articles.

  6. Maria says:

    Hi! I have a issue that i don’t know how to solve. When I try to share a link on facebook from my blog, or a particular page this message appera “page not found” or the link with symbols I don’t understand. I controlled th elinks with object debugger and this is what appear: required property ‘og:title’ of type ‘string’ was not provided. How can I solve it, please?

  7. Salih Kulangara says:

    @ Syed Balkhi. —– Just want to ask you this, After all I have got setup all the tags, and got a clean debug test result without any warning, when any one click on the Facebook Like button i used in my web page, it’s not showing up in the Facebook Timeline feed, just showing up in the recent activity section only, why is this, Is there anything else I have to add to get it be shown in the newsfeed directly when the click the LIKE button??????

  8. Anas Khan says:

    Great tutorial, i want to know is there any tutorial about open graph meta for Google Plus ?

  9. WPBeginner Staff says:

    Did you set a featured image? did you replace the default image URL in the code with your own image URL?

  10. Ikix says:

    Hello, I’ve tried everything i could an i can’t display thumbnail image when i post my blog url on facebook, i already add the code as you said, i download tons of plugings and there is no image in facebook! can you help me please? pleeease!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.