Monday, August 22, 2016

How To Make Image Preview Show For Blog Posts On Whatsapp



blog-post-link-preview-not-showing-on-whatsapp

Have you noticed that sometimes whenever we get to share some of our posts on whatsapp, we discover that there will be no image preview like how that of facebook is but youll also see some shared posts of some other people showing image preview on whatsapp.
 
The problem is due to wrong “og:image” tags in your template <head> section.

To resolve this issue, you have to copy and paste the below piece of code in the head section of your template

Follow these steps to add new "og tags" to your template:
Go to  Blogger Dashboard > Template > Edit HTML and search for </head>

 now copy & paste below open graph tags just above the closing of your template’s head tag i.e., </head>

Paste og tags above the closing of head tag

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <meta expr:content='data:blog.title' property='og:site_name'/>
 <meta content='en_US' property='og:locale'/>
 <meta content='en_GB' property='og:locale:alternate'/>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <meta expr:content='data:blog.pageTitle' property='og:title'/>
 <meta content='blog' property='og:type'/>
 <b:else/>
 <meta expr:content='data:blog.title' property='og:site_name'/>
 <meta content='en_US' property='og:locale'/>
 <meta content='en_GB' property='og:locale:alternate'/>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <meta expr:content='data:blog.pageName' property='og:title'/>
 <meta content='article' property='og:type'/>
 </b:if>
 <b:if cond='data:blog.metaDescription'>
 <meta expr:content='data:blog.metaDescription' property='og:description'/>
 <b:else/>
 <meta expr:content='data:post.snippet' property='og:description'/>
 </b:if>
 <b:if cond='data:blog.postImageUrl'>
 <meta expr:content='data:blog.postImageUrl' property='og:image'/>
 <b:else/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
 <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
 <b:else/>
 <meta content='YOUR_BLOG_LOGO_IMAGE_HERE' property='og:image'/>
 </b:if>
 </b:if>

Result would like this:
Link preview in WhatsApp

image source: https://www.macstories.net


Credit: https://fulfilmyrequest.blogspot.com

Get Our Hottest Updates via SMS. Kindly SMS FOLLOW VIBERTECHS to 40404. On Any Network. It Is Totally FREE. Download Our Android App HERE And Start Receiving Latest Browsing Tips Notifications On Your Phone For FREE

SHARE THIS

Author:

0 comments: