The Best And The Easiest Ways To Add Facebook Open Graph Meta Data In WordPress Themes

Social media marketing is an indispensable part of online marketing in recent times and the king of the same is content. Posting the right content at the right time in the right situation is something that plays a very crucial role to obtain the desired results from our social media marketing endeavours. Now arises – how can we control the content that we wish to display on social media. And the answer lies somewhere in open graph meta tags.

What are Open Graph meta tags?

Open graph meta tags are nothing but the portions of our code that aid us to control how our content will be displayed when shared on our social media pages. These are something that can make our content more clickable, shareable, and remarkable on social media. A content with optimized OG tags is capable of boosting social media traffic on our website up to a great extent.

Now, the second question that arises here is – how we can add open graph meta tags in our WordPress themes. Don’t worry as I am adding further details that will guide you how you can add Facebook open graph meta tags in your WordPress themes. Let us start 

The Best And The Easiest Ways To Add Facebook Open Graph Meta Data In WordPress Themes

Basically there are three methods to perform the task. You can either make use of All in One SEO WordPress plugin, WordPress’ Yoast SEO plugin or you can even add it manually in your WordPress themes. Let us discuss these methods in details

Adding Facebook Open Graph Meta Tags Using Yoast SEO Plugin

1. Login to your WordPress dashboard.
2. Click on SEO  >> Social from the menu provided on the left side.
3. Now, click on the Facebook tab.
4. Check the box given with Add Open Graph MetaData.
5. Now, you can customize your open graph tags the way you want.
6. Click on Save Changes.

Note: Here I am assuming that Yoast SEO plugin is already installed on your WordPress website. If not then make sure to install the plugin before proceeding towards the given steps. 

Adding Facebook Open Graph Meta Data Manually

Adding Open Graph Meta Data in your WordPress theme manually is very simple. All you need to do is copying the below lines of code and pasting it either to the function.php file of your theme 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’);

// Let’s add Open Graph Meta Info

function insert_fb_in_head() {

    global $post;

    if ( !is_singular()) //if it is not a any post or a any 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://website-example.com/sample-image.jpg”; //Change it with a the image stored on your server or in your media gallery

        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 );

By looking at the above code, you must have noticed the line of text ‘Your site name goes here’. You are required to replace this line with your site name. You are also required to change the default image URL given with your ones. Also, the Facebook app id needs to be yours and in case you do not have the Facebook app, you are free to eliminate the line from the code. 

Note: As you are making changes to your theme files in this method, backing up your theme files before making any changes is strongly suggested to recover any kind of flaws. 

Adding Open Graph Meta Data Using All in One SEO Plugin

1. Login to your WordPress dashboard.
2. Navigate to All in One SEO >> Feature Manager and activate the Social Meta feature
3. Now, navigate to All in One >> Social Meta

Now, enter values to the given fields. 

You can perform image settings and facebook settings as per your requirement.

1. Click on the Update Options button to save all your changes.
2. Now, add open graph meta data for single posts and pages. 
3. You will see your post title and description in the open graph title and description fields by default. You can edit them as per your requirement. 
4. Fill up the required data for OpenGraph for images and social media (Facebook & Twitter)
5. Click on Save Changes and Done.

The Final Words

Social media marketing is something that can add big numbers to your website traffic provided you are making effective use of your content and visuals. This is something that makes Open graph tags an essential part of your WordPress websites. If you make optimized use of OG tags on your website, It not only aids you to stand distinctly in the masses but also helps you to improve your website’s rankings in the SERPs.

We, at Indylogix, are providing all kinds of digital marketing services including social media marketing so if you are finding difficulty in adding Open Graph meta tags in your WordPress themes or need any other kind of assistance in the same, just say a hi, our expert team will take care of the rest!