WordPress OG Tags: How to Increase Clicks To Your Post on Social

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.


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="https://opengraphprotocol.org/schema/" xmlns:fb="https://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


    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="https://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 . '"/>';



          $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.

If you'd like to see more WordPress tips and tricks, check out our full 101 list of WordPress tips and tricks.

Download the list of 101 WordPress tricks every blogger should know

101 WordPress tricks

Click here to Download Now

About the Author
David Attard
Author: David AttardWebsite:https://www.linkedin.com/in/dattard/
David has been working in or around the online / digital industry for the last 18 years. He has vast experience in the software and web design industries using WordPress, Joomla and niches surrounding them. As a digital consultant, his focus is on helping businesses get a competitive advantage using a combination of their website and digital platforms available today.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.

Author(s) Featured On:  Inc Magazine Logo   Sitepoint logo   CSS Tricks logo    webdesignerdepot logo   WPMU DEV logo   and many more ...