Read Blog

How to Add Facebook Open Graph Meta Data in WordPress Themes – WPSaviour

By WP Saviour •  Updated: 02/27/21 •  5 min read
Blog

We shared with you easy methods to add the fb like button in WordPress. Then we wrote about easy methods to add the fb ship button in WordPress. Now normally, Fb is admittedly good in pulling in the appropriate knowledge in your posts when they’re shared on Fb. Nonetheless lately, we’ve been listening to reviews of Fb not pulling the appropriate thumbnail picture when somebody clicks Like, not pulling the appropriate web page title, and many others. Effectively on this article, we’ll share how one can add fb open graph meta info in WordPress themes which is able to resolve all of these points.

fboghowto-8730854

We have now three strategies for you, two of them require you to put in a plugin. The third methodology is for intermediate stage customers who aren’t shy of modifying their themes.

Including Fb Open Graph Meta Information with WordPress search engine optimization

At WPSaviour, and on all our web sites we use WordPress search engine optimization. It not solely helps you add titles and meta descriptions. It’s the full website optimization bundle for WordPress. WordPress search engine optimization additionally comes outfitted with social options, together with the flexibility so as to add Fb Open Graph meta knowledge in WordPress themes.

Very first thing that you must do is set up and activate, the WordPress search engine optimization by Yoastplugin. As soon as activated, that you must go to search engine optimization » Social and easily examine the field subsequent toAdd Open Graph meta knowledge.

facebookog-1528182

It can save you your settings or proceed and configure different Fb social choices on the display. You’ll be able to join your website to your Fb consumer account because the admin. Doing so it is possible for you to to see Fb insights for this web site. You can even present your Fb web page’s URL and it is going to be added into Fb Open Graph meta knowledge.

On the identical web page, you’ll be able to add a picture and outline in your entrance web page. You can even add a default picture for use when an article doesn’t have any picture connected to it.

That’s all, you might have efficiently added Fb open graph meta knowledge into your WordPress theme.

Including Open Graph Meta Information in WordPress Utilizing Official Fb Plugin

In case you are utilizing one other search engine optimization plugin like All in One search engine optimization, or just don’t need to set up WordPress search engine optimization plugin, then you’ll be able to nonetheless add Fb open graph meta knowledge utilizing the official Fb plugin for WordPress.

Very first thing that you must do is set up and activate the Fb plugin. Merely activating the Fb plugin will add open graph meta deta into your theme’s header.

That’s all you might have enabled Fb open graph meta knowledge in your WordPress website.

Utilizing the official Fb plugin means that you can use many different options this strong plugin presents. For instance, you need to use it so as to add a Fb Likebox / Fanbox, embed Fb standing posts, add comply with button for authors, and way more.

Manually Add Fb Open Graph Meta Information into Your WordPress Theme

This methodology requires you to edit your theme recordsdata, so just be sure you backup your theme recordsdata earlier than making any modifications. Merely copy and paste this code in your theme’s features.php file or a site-specific plugin.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

operate add_opengraph_doctype( $output ) {

        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.fb.com/2008/fbml"';

    }

add_filter('language_attributes', 'add_opengraph_doctype');

operate insert_fb_in_head() {

    world $submit;

    if ( !is_singular())

        return;

        echo '';

        echo '';

        echo '';

        echo '';

        echo '';

    if(!has_post_thumbnail( $submit->ID )) {

        $default_image="http://instance.com/picture.jpg"; //exchange this with a default picture in your server or a picture in your media library

        echo '';

    }

    else{

        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $submit->ID ), 'medium' );

        echo '';

    }

    echo "

";

}

add_action( 'wp_head', 'insert_fb_in_head', 5 );

Be aware: Keep in mind to vary the Web site Title the place it says “Your Web site Title Goes Right here”. Additionally change the default picture URL with the picture of yours. We’d suggest placing a picture along with your brand there, so in case your submit doesn’t have a thumbnail, then it pulls your website’s brand. Research present that posts shared and not using a thumbnail are much less efficient than these with thumbnails. Additionally don’t neglect so as to add your USER ID. You will discover your Fb consumer ID by going to this URL: http://graph.fb.com/syedbalkhi (Simply exchange syedbalkhi with your individual username).

That’s all that you must do. As quickly as you save your features.php file (or site-specific plugin) it’ll begin displaying Fb open graph meta knowledge in WordPress header.

We hope this text helped you add Fb open graph meta knowledge in WordPress. Its a good way to get customers engaged along with your content material on Fb’s large social platform.

gp-6937585 as-6243130

WP Saviour

I am a WordPress specialist. My mission is to help you create beautiful websites with ease!