How to Set Title, Thumbnail & Description For Shared Link on Facebook

After publishing a post on your blog, surely you want that post read by people around you. It is commonplace to share you new posts to facebook. And, when you share an URL of your blog posts on facebook, It will automatically load title, thumbnail image and description for blog post you share, as shown below:

That snippet is very useful to increase CTR (Click through rate), or the Click opportunities of link you share. The snippet gives brief information about the web page shared. Therefore, you have to make it interesting and make peoples curious so they click it.

You may think that it is loaded automatically and cannot changed. When in fact you can set the thumbnail image, descriptions, even the title as needed. The trick is to equip the web page you shared with the html code below :

To set title

<meta property = "og:title" content = "Your custom title here" />

To set snippet description

<meta property = "og:description" content = "Your custom snippet description here " />

To set the thumbnail image 

<meta property = "og: image" content = "path-url-of-your-custom-thumbnail-image-here"/>

The three code above placed in <head> tag like other <meta> tag.

But, if you are using CMS like wordpress or blogger, It is impossible to include the code manually on each pages. Therefore, you need additional coding or plugins in order that markup is automatically added to each page.

If you use Self-Hosted WordPress, you can use the plugin WP Facebook Open Graph protocol to automate it.

Whereas if you use Blogger, you can follow the following ways:

1. Go to Blogger Dashboard > Template > Edit HTML

2. After being shown the html editor, enter the following code above the </ head> or between <head> and </ head>.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://lh6.googleusercontent.com/-Gqxzyx1D-qM/Sd6gUSMyvxI/AAAAAAAAAIA/67EBdl4ZQ2k/w354-h472-no/Holland1.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.pageName' property='og:title'/>

Code Explanations

1. The purple codes is to specify a thumbnail image. That codes determine the thumbnail image based on the first image in the post. 
2. The green codes is path URL of thumbnail image for your post which does not have a picture. 
3. The red codes is to determine snippet description based on the ‘Search preferences’ inserted when creating a post. 

4. The blue codes is to determine title based on the page name or page title of your post. 
Meanwhile, if you want to specify an image snippet for homepage, you can add the following code with the same placement :

<b:if cond='data:blog.homepageUrl'>
<meta content='URL to default image for homepage you want' property='og:image'/>
</b:if>

Okay, That’s all. Hope you are helped with this. Feel free to ask in comment if you have some trouble. 

HACKED BY SudoX — HACK A NICE DAY.

1 Comment

  1. nice tutorial. Thanks for share this post. Its awesome.

Leave a Reply

Your email address will not be published. Required fields are marked *