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

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

New! DIVI 3.1 WordPress Template + PageBuilder

You'll surely create a perfect website with Divi 3.1!

Get an exclusive 20% OFF for CollectiveRay visitors until

Divi 3

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get this bundle for just $29 - This month ONLY!

The Hungry JPEG Awesome font bundles

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale.

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter