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.
This is how it looks like when you share a page that is updated with WordPress open graph tags.
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
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
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="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 . '"/>';
}
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.
If you'd like to see more WordPress tips and tricks, check out our full 101 list of WordPress tips and tricks.
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.
and many more ...