Do you want to add Facebook Open Graph meta data to your WordPress themes?
Open Graph metadata helps Facebook and other social media websites get meta data about your posts pages. It also allows you to control how your content appears when shared on Facebook.
In this article, we will show you how to easily add Facebook open graph metadata in WordPress themes. We’ll share three different methods, so you can choose one that works best for you.
Method 1. Adding Facebook Open Graph Meta Data with AIOSEO
All in One SEO is a popular WordPress SEO plugin used by over 2 million websites. It allows you to easily optimize your website for search engines as well as social platforms like Facebook and Twitter.
First, you need to install and activate the All in One SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit All in One SEO » Social Networks page. Here you can enter your Facebook page URL and all your other social networks.
Next, click on the Facebook tab at the top of the page, and you’ll see that Open Graph Markup is enabled by default. You can click the “Upload or Select Image” button to choose a default Facebook OG image if an article doesn’t have an open graph image.
If you scroll down, you can customize your site name, description, and more settings. Don’t forget to click the blue Save button once you’re done making changes.
Now that you have set site-wide open graph meta tags, the next step is to add open graph meta data for individual posts and pages.
By default, AIOSEO will use your post title and description for open graph title and description. You can also manually set the Facebook thumbnail for each page and post.
Simply edit the post or page and scroll down to the All in One SEO section below the editor. From here, switch to the Social tab and you’ll see a preview of your thumbnail.
You can set the social media image here as well as title and description. Just scroll down to the Image Source field. You can choose to use the featured image, upload a custom image, or other options.
Method 2. Set Facebook Open Graph Meta Data using Yoast SEO
Yoast SEO is another excellent WordPress SEO plugin that you can use to add Facebook open graph meta data into any WordPress site.
First thing you need to do is install and activate, the Yoast SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Once activated, you need to go to SEO » Social and simply check the box next to Add Open Graph meta data.
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 use one for your Facebook page and insights. You can also change your homepage Open Graph meta title, description, and image.
Lastly, you can set a default image to be used when no image is set for a post or page.
Yoast SEO also allows you to set Open Graph metadata for individual posts and pages. Simply edit a post or page and scroll down to the SEO section below the editor.
From here, you can set Facebook thumbnail for that particular post or page. If you don’t set a post title or description, then the plugin will use your SEO meta title and description.
You can now save your post or page and the plugin will store your Facebook open graph meta data.
Method 3. 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 back up your theme files before making any changes.
After that simply copy and paste this code in your theme’s functions.php file, or in 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: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 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”. After that, change the default image URL with the image of yours. You also need to add your own Facebook app ID, If you don’t have a Facebook app, then you can remove the Facebook app ID line from the code.
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.
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 metadata in the WordPress header.
We hope this article helped you add Facebook open graph meta data in WordPress. You may also want to see our pick of the best social media plugins for WordPress to grow your social following, and our troubleshooting guide on how to fix the Facebook incorrect thumbnail issue in WordPress.
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.
Wow, this really worked for me, you’re awesome!
Glad our guide was helpful
You did it again – looking for a solution, and you deliver ! You rule
Glad our guide was helpful
Does this also work for sms text message url previews or just Facebook?
While not specifically for SMS messages, the markup helps with that as well.
If I use the Yoast SEO settings, will it take times for showing the perfect result in facebook share? Or will it start working within minutes?
That would depend on your site’s caching and any caching on Facebook for how long it takes
I’m facing this problem in all social sharing sites.
If it is not showing what you set on every social site, you would want to reach out to Yoast’s support and let them know to ensure there isn’t a problem with the plugin.
Hello
When I share my post in facebook it’s how my post featured image .
But when I share in whatsapp it’s not show my featured image with link please help me..
If you’re using Yoast to add the meta data, we would first recommend reaching out to Yoast to ensure that there aren’t any known issues.
My title looks like this in the preview:
%%title%% %%page%% %%sep%% %%sitename%%
How do I fix this?
Hello please help me
Facebook has blocked my site, now in the Facebook developer app, I can not even link my site because it has blocked the Facebook
Please tell me how to unblock your website with Facebook
Hello
Please can you advise when using a child theme – do i need to copy the parent theme functions.php and then add the above script to a newly created functions.php and upload it to the child theme folder OR do I just add the script to the parent theme functions.php
Thanks for reading Sadie
Hi Sadie,
You can add it to either functions.php file.
How would I remove the “By …” from appearing on the card?
Currently we have an issue where it displays as: site-name | By site-name
We just want the first website name to appear and not twice.
I’m using this on a self-hosted website. What do I do about the USER ID that I’m supposed to replace since the site is not on wordpress.com?
Hello,
I have a big problem!!
When I share my post in facebook it’s how my post featured image .
But when I share in whatsapp it’s not show my featured image with link please help me..
All Good, But still one problem, How to add Facebook ID..After using this code, following Facebook ID message appears.
The ‘fb:app_id’ property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
I enjoyed this article, but in January 2018 this *manual code* option doesn’t appear to work completely. For instance, though I have verified that the default image property works, when I create a new post, I don’t see ANYWHERE a field where one can begin to edit “open graph (og)” metadata.
Suggestions? Thanks!
Thanks for such great information. But I have one question.
How helpful it is to add facebook graph meta data in our site..?
And if it is very much helpful, for what purpose, it is helpful..?
This plugin gave me a white screen of death, obviously a conflict with something or memory exceeded
What if I am wanting to change the thumbnail image not for the whole site, but just a page off my wordpress site : For example I’m trying to share an event page from my site and would like a unique, relevant thumbnail. Help?
Hi Jin, Did you ever get an answer to your question? I’m looking for the same information.
Thank yoU!
Hey, I wanted to include Worpress SEO by Yoast but Im not sure if latest version is compatible with my version of Worpress (4.2.2) do you know if is safe to activate?
Thanks guys
Does my Facebook profile have to be public in order for my Facebook User ID to be good to use here?
I’ve added the code for manually adding this to my theme. However, things aren’t working. Does my profile have to be public in order for my Facebook user id to be accessible?
Hi Martin,
Yes it would work.
Is this still valid for today? I tried it and works, but I noticed in the code the following: “xmlns:fb=”http://www.facebook.com/2008/fbml”‘;
Isn’t 2008 a little old? Is there a newer protocol we should be using today?
Hello, thanks for posting. I remained with one doubt. I understood that the in each post is dynamically constructed by the functions you explained so well. What I can’t figure out is where the variables called by that function are defined and stored. When you put property=”og:type” content=”article”/, OK you are defining with a fixed string. But when you use: property=”og:title” content=”‘ . get_the_title() . ‘”, where is the function get_the_title() going to get it? How can I define before hand those values for each post in a way that the code will pick the right meta data for each parameter?
get_the_title() will get your post title. If you want to use something else, you could always get the value from a meta box. With the advanced custom fields plugin, it would be something like get_field(“my_field”), or with a regular WordPress custom meta field it would be get_post_meta($post->ID, “my_field”, true). See get_post_meta()
Nicely explained! I try to figure out where I can add the code in checking the size of the featured image, since FB needs a size with a minimum of 200px for both width and height, otherwise it will use another image from the post.
Any help would be great!
Nicely explained & works like a charm.
I’ve been trying to use Yoast to enable my meta data so I can use Rich Pins on Pinterest. I’ve done what this tutorial says, but Pinterest still won’t recognize my post. Is there another plugin I could try?
I added the Yoast plugin and there is no social option. Please help me. I am at my wits end with this issue.
Same problem here.
Once you have Yoast installed the look under SEO » Dashboard » Titles & Metas and under that is Social.
in Social you should Enable the “Add Open Graph meta data” in the Facebook tab.
This option just isn’t there with v4.6 of the plugin.
Under SEO >> Dashboard, the tabs I have are: Dashboard, General, Features, Company info, Webmaster tools and Security. No mention of Titles & Metas or Social.
Is this because I haven’t set up a Facebook social profile? Surely this shouldn’t be needed just to be able to configure OG stuff!
Hey Xavier,
First you would need to go to SEO » Features page and then click ‘Enable’ under ‘Show Advanced Settings Pages’ option. This will display advanced settings pages in Yoast SEO. For more details see our article on how to install and setup Yoast SEO.
I added social sharing to the search result template, so each excerpt has a share button BUT the meta data that is shared is messed up and uncontrollable with this, is there a way to make this work better when there are 20 reuslts on the same page with different meta description for each?
Hi can you help me please? I added the code in function and what I have to add in the head please?
Here’s also a nice improvement to make an exception for the home-page:
if (is_front_page()){
echo ”;
echo ”;
echo ”;
}else{
echo ”;
echo ”;
}
I just want to say thanks! … this is very helpful, you the best!
Glad you found it helpful. Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
I’ve downloaded the Yoast plugin, and set it up for my home page, but when I enter the website on Facebook it still won’t show the image I’ve specified, or the text snippet I’ve written.
Also can’t find my Facebook URL using the link you provided, it just gives me an error…
I tried debug but it says Facebook pages can’t be debugged, and they have no cache.
Sooooo….nothing has worked so far!
You need to enter your WordPress site URL in the debug tool.
Hi there,
I have SEO Yoast and I uploaded the new image and its still not working on facebook……???
Thank you, manually added open graph on header, perfect!! Thank you!!
I just wanted to thank you for this very thorough description on the process of connecting facebook to your wordpress page. I’ve been trying to do for days now following other sites and recommendations. This evening I came across your page from a google search and bam, it worked. Hooray! Thanks a lot.
Thanks for this info. It was really easy to follow. I uploaded the Yoast plugin and followed all the steps and saved but the thumbnail is still just a blank box. does it take some time to flow through? Do I need to log out and back in again to Facebook? or WordPress?
Hi! When i replace this link with my name http://graph.facebook.com/syedbalkhi got this error
{
“error”: {
“message”: “(#803) Cannot query users by their username (mahm0od)”,
“type”: “OAuthException”,
“code”: 803
}
}
Any Solution?
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!
I have the same problem, also getting og:description missing
me too – any help?
I have the same problem, and I cannot use FB debugger because i work in localhost…
this worked for me:
$metadesc = strip_tags(get_post_field(‘post_content’, $post->ID));
echo ”;
(my posts had a very short content)
The following works by pulling from your excerpt. Just add under og:title
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.
Thank you for taking the time to reply. Will give it a shot!
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?
Thank you very much, I really want this information.
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.
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?
@ 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??????
Great tutorial, i want to know is there any tutorial about open graph meta for Google Plus ?
Did you set a featured image? did you replace the default image URL in the code with your own image URL?
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!
what about just for a single image to be added to the thumbnail options in Facebook? I’ve noticed it picks up my featured image no problem, but doesn’t pick up the others in the post. Is there a way to manually add them with some quick code?
Sorry the plugin is no longer available. We have updated the article, with new information. Hope this will help you add Facebook Open Graph Meta Data into your WordPress. site.
Hi, is your plugin still available on WordPress.org?
http://wordpress.org/plugins/facebook-open-graph-meta-in-wordpress/
a.
its still pulling the image from the sidebar instead of the image i have put in the functions file?
What about og:description?