As we know, whatsapp now supports link preview on its app conversation. When we share any url of any website or blog on whatsapp, it fetches link preview of URL. But sometimes whatsapp & Facebook fetches link preview and one image also if that website or blog has OG tags. If there is not any og tags, the image will not be fetched. So we are here with a trick to fetch URL with Image Preview on WhatsApp.




If you same problem with image preview, today HowToCrazy (HTC) is here with a simple article and supported OG tags. Let’s start…

how-to-show-image-with-link-preview-on-whatsapp

How To Add OG Tags In Template To Show Image Preview On WhatsApp & Facebook:

Remember: This problem occurs due to the wrong “og:image” tags within <head> section.

Note: We will provide a full package of all OG Tags for social media optimization for any website or blog. So Remove all existing OG tags and add below codes.

1) Go to  Blogger Dashboard > Template > Edit HTML





2) Search for <head> section.Tag (opening head tag).

3) Copy complete codes from below (blue text only)….

<b:if cond=’data:blog.pageType == “index”‘>
<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-URL-HERE’ property=’og:image’/>
</b:if>
</b:if>
<b:if cond=’data:blog.metaDescription’>
<meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
<b:else/>
<meta content=’YOUR-DESCRIPTION-HERE THAT-WILL-BE-VISIBLE-BELOW-YOUR-POST-TITLE’ property=’og:description’/>
</b:if>

4) Now, Paste above code in place of your existing all OG Tags in your template design (check carefully these should be no duplicate tags in your template)

5) Save your template

You Are All Done!





Check Link Preview On WhatsApp:

Link Preview in BlueStacks




Last words – All above OG Tags will help you to show an image preview with your url preview on whatsapp. This will help you to get an image preview on whatsapp and facebookKeep sharing your articles on social midea and keep coming back to HowToCrazy to get something new…

7 COMMENTS

  1. I find a lot of tricks or methods for this job but there was nothing that works. Finally I got this trick here. Thanks @shani for your job. Thank you so much.

Drop a Comment