WordPress og tags: How to increase click through rate of your WordPress post on Facebook

Facebook is really smart in pulling in the right data from your posts when they are shared on Facebook. However, if you are an avid user of Facebook, you might have noticed that Facebook doesn’t always pull the right thumbnail image and description when a post is being shared. However if you don't include WordPress og tags (or open graph) tags you won't get the right information.

 

This happens when a user shares a post from a WordPress site, which is not being updated with Facebook’s open graph meta information.

This is what it may look like when you share a URL on Facebook from a website that is not being updated with open graph tags.

facebook share without og tags

This is how it looks like when you share a page that is updated with WordPress open graph tags.

facebook share with og1

Facebook’s open graph (og) tags

Facebook’s open graph tags define how a third-party website (like your blog) will be presented on Facebook. In fact, open graph elements are used by other social networks as well in order to customize the sharing that happens there. There are three main tags that are associated with the look of a Facebook share update. To include the WordPress open graph tags, you'll need to cater for the following:

  • og: image
  • og: title
  • og: description

og tags facebook1

By using open graphs on websites, Neil Patel found a lift in click through rate by 39%.

How to check “og” tags on your WordPress?

Look at the source code of your WordPress website if you are not sure whether og tags have already been placed on your website. In Windows or Linux, press Ctrl + U and in Mac, press Command + Alt + U for viewing the source code.

If it is already being added, you’ll find your og tags in the <head> section inside the “<meta property =…” tag. See the screenshot for an example.

og

Additionally, you can use the Facebook URL Linter to see what Facebook is reading about your site.

Adding WordPress og tags without a plugin

Simply add the following code snippet to your functions.php file for adding WordPress og tags without a 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:admins" content="YOUR USER 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 );

Make sure you change “Your Site Name Goes Here” with your site name and "YOUR USER ID" with your own user id.

You can find your Facebook user id by going to your Facebook profile image. Once you opened your profile image on a browser, you can see something like this: fbid=”your-user-id-here” in your URL bar. Copy that user id and replace it with "YOUR USER ID" section in the above code.

You’re done! Your website is now updated with open graph tags.

Adding og tags to WordPress with a plugin

For adding WordPress og tags, simply install this plugin to your WordPress website. It works perfectly well in adding “og: image”, “og:title” and “og:description” tag to your website.

 

Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

 
Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion VPS servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!