If you’re experiencing issues when you share posts on Facebook, it’s obvious some things are not working properly on your blog. When posts are shared or liked, the title may not appear and thumbnails may not even show if you don’t have proper Open Graph meta tags in your head section. It’s proven that posts shared with images and proper formatting gains more interaction on Facebook but when share links appear as shown below, it’s definitely going to have a low CTR.
There are two fixes that should get things working right:
- Debugging your links on Facebook
- Adding Open Graph meta tags to your blog’s head section
1. Debugging your links
Once you notice a post isn’t properly formatted when shared, the easiest way to fix this is simply to use the debug tool on Facebook. Basically, this tool lets Facebook access your page and tell you what might be wrong but then, right after debugging the page, sharing it makes it appear properly.
2. Adding Open Graph meta tags to Blogger and WordPress
If you have a lot of errors appearing when you debugged your site, it’s likely you don’t have these required tags in your head section. Apart from Facebook, Google+ and Twitter seem to have adopted it too.
For WordPress:
– Go to Appearance > Editor > Functions.php
– Copy this code and paste it at the bottom:
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 FB PROFILE ID"/>';
echo '<meta property="fb:app_id" content="YOUR FB 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 TITLE"/>';
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image="http://your-site.com/logo.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 );
Save your changes.
For Blogger:
– Go to your Template HTML Editor (Template > Edit HTML).
– In the first few lines, you should see this code or something similar:
<html
Better still, press CTRL + F and search for it.
Leave a space and right in front of it, paste this:
xmlns:og='http://opengraphprotocol.org/schema/'
You should now have something like this:
<html xmlns:og='http://opengraphprotocol.org/schema/'
– Now search for <head>
– Just below it, paste this:
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://your-site.com/logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='YOUR FACEBOOK APP ID' property='fb:app_id'/>
<meta content='YOUR FACEBOOK PROFILE ID' property='fb:admins'/>
YOUR FACEBOOK USER ID – Replace this with your Facebook user ID. More details here.
YOUR APP ID – Replace this with your app ID. This article may be useful.
YOUR SITE NAME – Put your site name here
http://your-site.com/image.jpg – Replace with a default image, perhaps your logo
This should fix the issue once and for all. If you’ve got questions, please don’t hesitate to use the comment box.
