When sharing your WordPress website’s content on Facebook, it is important to make sure it looks appealing and engaging. Facebook Open Graph metadata allows you to control how your posts and pages appear when shared on the platform, improving their visual appeal.
This metadata provides Facebook with specific information about your content, enabling you to customize the title, description, featured image, and other elements displayed in shared posts.
We have found that providing accurate and engaging metadata can improve the chances that users will click through to your website, boosting traffic and engagement
In this article, we will show you how to easily add Facebook Open Graph metadata in WordPress themes. We’ll share three different methods, including the All in One SEO method that we use at WPBeginner, so you can choose one that works best for your WordPress website.
You can use the quick links below to jump straight to the method you’re most interested in:
Method 1: Adding Facebook Open Graph Metadata With AIOSEO
All in One SEO is a popular WordPress SEO plugin used by over 3 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 free 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 the 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 will 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 Changes’ button once you are done.
Now that you have set site-wide Open Graph metatags, the next step is to add Open Graph metadata for individual posts and pages.
By default, AIOSEO will use your post title and description for the 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 ‘AIOSEO Settings’ section below the editor. From here, switch to the Social tab, and you will see a preview of your thumbnail.
You can set the social media image here, as well as the 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 Metadata Using Yoast SEO
Yoast SEO is another WordPress SEO plugin that you can use to add Facebook Open Graph metadata to any WordPress site.
The 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, Facebook Open Graph data is enabled by default.
You can check this by going to Yoast SEO » Settings and scrolling down to the Social Sharing section. Now you can make sure the Open Graph data feature is enabled.
you need to go to SEO » Social and select the ‘Enabled’ option under ‘Add Open Graph meta data’.
You can save your settings or continue and configure other Facebook social options.
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.
The Premium version of 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 ‘Yoast SEO’ section below the editor.
From here, you can set a 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 metadata.
Method 3: Adding Facebook Open Graph Metadata Using Code
This method typically requires you to copy and paste code into your theme’s functions.php file. However, we recommend adding the code using the WPCode plugin instead, which makes it easier and safer to add custom code in WordPress.
WPCode also comes with a library of ready-made code snippets, including one for adding basic Open Graph tags, so it only takes a couple of clicks.
First, install and activate the free WPCode plugin. For more details, please see our guide on how to install a WordPress plugin.
Upon activation, you can go to Code Snippets » + Add Snippet from your WordPress dashboard.
Search for the ‘Add basic Open Graph Tags’ snippet from the library. Once you find it, hover over it, and click the ‘Use snippet’ button.
Then, WPCode will automatically add the code for you, as well as set the site wide header as the insertion method location.
After that, all you need to do is toggle the snippet to ‘Active’ and click the ‘Update’ button. Your theme will now start showing Facebook Open Graph metadata in the WordPress header.
If you’re an advanced user, then you can still copy and paste the code below into your theme’s functions.php file.
Since this requires you to directly edit your theme files, make sure that you back up your theme files before making any changes.
//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 ”;
echo ”;
echo ”;
echo ”;
echo ”;
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 ”;
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘medium’ );
echo ”;
}
echo ”
“;
}
add_action( ‘wp_head’, ‘insert_fb_in_head’, 5 );
Remember to add your site name on Line 17, where it says ‘Your Site Name Goes Here’. After that, you should change the default image URL on Line 19 with one of your own image URLs.
We recommend putting an image with your logo there, so if your post does not have a thumbnail, then it pulls your site’s logo.
You also need to add your own Facebook App ID on Line 13. If you don’t have a Facebook app, then you can remove Line 13 from the code.
Expert Guides on Facebook and WordPress
We hope this article helped you add Facebook Open Graph metadata in WordPress. You may also want to see some other guides related to how you can use Facebook in WordPress:
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
