How To Be Pro In WP

Add Fb Open Graph metadata to WordPress themes

Do you want to add Facebook Open Graph metadata to your WordPress themes?

With Open Graph metadata, Facebook and other social media websites can access metadata about your post pages. You can also control how your content appears when shared on Facebook.

In this article, we'll show you how to easily add Facebook Open Graph metadata to WordPress themes. We share three different methods so you can choose one that works best for you.

Method 1. Add Facebook Open Graph metadata with all-in-one SEO

All in One SEO is a popular WordPress SEO plugin that is used by over 2 million websites. This allows you to easily optimize your website for search engines and social platforms such as Facebook and Twitter.

First of all, you need to install and activate the all-in-one SEO plugin. For more information, see our step-by-step guide to installing a WordPress plugin.

After activation you have to visit All in one SEO »Feature Manager Page. From here you have to activate the "Social Meta" function.

Activate the social meta function in All in One SEO

Next you have to visit All in one SEO »Social Meta Page. From here you can simply fill in the fields to enter your Facebook metadata.

You can enter Facebook Open Graph metadata on the social meta page

You can start by specifying the title, picture and description for your homepage.

Below this, you can set a standard image to be used if an article does not contain an open diagram image. You can also specify the width and height of the picture.

Set the default open graph image

Do you need help choosing image sizes? In our full social media cheat sheet you will find ideal image sizes that you can use on all social media platforms including Facebook.

If your website uses a Facebook app or has a Facebook page, you can enter your Facebook app ID in the next section. In this way, you can retrieve data for Facebook insights.

Facebook app settings

Optionally, you can also adjust the settings for Twitter and run a scan to avoid duplicate Open Graph tags on your website.

Don't forget to click the "Update Options" button to save your changes.

Now that you've set location-wide open chart meta tags, the next step is to add open chart metadata for individual posts and pages.

By default, All in One SEO uses your post title and description for the title and description of the open diagram. You can also manually set the Facebook thumbnail for each page and post.

Just edit the post or page and scroll down to the All in One SEO section under the editor. From here, switch to the Social tab and fill in open diagram metadata. Here you can define the social media image as well as the title and description.

Open the graphics settings for posts and pages

Method 2. Set Facebook Open Graph metadata with Yoast SEO

Yoast SEO is another great WordPress SEO plugin that lets you add Facebook Open Graph metadata to any WordPress site.

First you have to install and activate the Yoast SEO plugin. For more information, see our step-by-step guide to installing a WordPress plugin.

After activation you have to go SEO »Social Just check the box next to Add Open Graph Metadata.

Activate Facebook Open Graph

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 the Open Graph meta title, description, and picture of your home page.

Finally, you can set a default image to be used when no image is set for a post or page.

With Yoast SEO, you can also set open graph metadata for individual posts and pages. Just edit a post or page and scroll to the SEO area under the editor.

Set metadata for open graphics for posts and pages

From here, you can set a Facebook thumbnail for that particular post or page. If you don't set a post title or description, the plugin uses your SEO meta title and description.

You can now save your contribution or page and the plugin saves your metadata for open Facebook graphics.

Method 3. Manually add Facebook Open Graph metadata to your WordPress theme

With this method, you need to edit your design files. So make sure you back up your design files before making any changes.

Then simply copy this code and paste it into the functions.php file of your theme or into a location-specific plugin.

// Add the open diagram to the language attributes
Function add_opengraph_doctype ($ output) {
return $ output. & # 39; xmlns: og = "" xmlns: fb = ""&#39 ;;
add_filter (& # 39; language_attributes & # 39 ;, & # 39; add_opengraph_doctype & # 39;);

// 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
Echo & # 39;& # 39 ;;
Echo & # 39;& # 39 ;;
Echo & # 39;& # 39 ;;
Echo & # 39;& # 39 ;;
Echo & # 39;& # 39 ;;
If (! Has_post_thumbnail ($ post-> ID)) {// the post contains no picture, use a standard picture
$ default_image = ""; // Replace this with a standard image on your server or an image in your media library
Echo & # 39;& # 39 ;;
$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), & # 39; medium & # 39;);
Echo & # 39;& # 39 ;;
Echo "
add_action (& # 39; wp_head & # 39 ;, & # 39; insert_fb_in_head & # 39;, 5);

Note: Remember to change the site name where "your site name is here". Then change the default image URL with your image. You also need to add your own Facebook app ID. If you don't have a Facebook app, you can remove the Facebook app ID line from the code.

We recommend placing an image with your logo there. So if your post doesn't include a thumbnail, your website's logo will be retrieved.

That is all you have to do. As soon as you save your functions.php file (or a location-specific plugin), the metadata for open Facebook graphics is displayed in the WordPress header.

We hope this article has helped you add Facebook Open Graph metadata to WordPress. You may also want to see our selection of the best WordPress social media plugins to grow your social following, and our troubleshooting guide on how to fix the wrong problem with Facebook thumbnails in WordPress.

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

Related Articles