CODEWITHSUNDEEP
facebook-opengraphthumbnailsmeta-tagswhatsapp
Adán Osuna
Adán Osuna

Reputation: 51

Whatsapp not working with open graph protocol

I'm working on this website and I'm trying to use the open graph protocol. I've managed to get the thumbnail images and meta-tags for Facebook and Twitter, but it has been impossible to get it done for WhatsApp. I can't get neither the thumbnail image nor the description of the website. I'm working with a small size image, added all op codes as recommended. Can somebody please give me a hand telling what is wrong with my code? 

</head>
     <meta charset="<?php bloginfo( 'charset' ); ?>"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="profile" href="http://adanosuna.byethost7.com/wp/"/>
     <div id='hidden' style='display:none;'>
         <img src="http://nutriholi.com/wp-content/uploads/2020/05/NutriHoli-Facebook-2.jpg">
     </div>
</head>
<meta property="og:url" content="http://adanosuna.byethost7.com/wp"/>
<meta property="og:title" content="ADANOSUNA"/>
<meta property="description" content=" ADANOSUNA "/>
<meta property="og:description" content=" ADANOSUNA "/>
<meta property="og:image" content="http://nutriholi.com/wp-content/uploads/2020/05/NutriHoli-Facebook-2.jpg"/>
<meta property="og:image" itemprop="image" content="http://nutriholi.com/wp-content/uploads/2020/05/NutriHoli-Facebook-2.jpg"/>
<meta property="og:image:width" content="299"/>
<meta property="og:image:height" content="200"/>
<meta property="og:site_name" content="ADANOSUNA "/>
<meta content="http://nutriholi.com/wp-content/uploads/2020/05/NutriHoli-Facebook-2.jpg"  property="thumbnail" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">
</head>

<body>
     <span itemprop="thumbnail" itemscope itemtype="image/jpeg"/>
         <link itemprop="thumbnailUrl" href="http://nutriholi.com/wp-content/uploads/2020/05/NutriHoli-Facebook-2.jpg"/>
         <link itemprop="url" href="http://nutriholi.com/wp-content/uploads/2020/05/NutriHoli-  Facebook-2.jpg"/>
         <meta itemprop="width" content="299">
         <meta itemprop="height" content="200">
     </span>
<body>

Upvotes: 3

Views: 6248

Answers (2)

Umar Malik
Umar Malik

Reputation: 1

Very Late Answer!! Might be helpful to somebody in the same situation as myself.

I had a similar issue. I had configured all the tags properly. They were visible correctly in the 'Social Share Preview' extension during development. The tags were working fine for LinkedIn also. But they were not getting shared when using the Android device (was working fine when sharing using the Desktop version of WhatsApp).

For me, the reason wasn't related to the tags but the SSL certificate installed on the server. My SSL certificate wasn't using an intermediate/bundle certificate on nginx. Bundling the certificates together and using them instead of root certificate only, fixed the issue for me.

Upvotes: 0

Ad&#225;n Osuna
Ad&#225;n Osuna

Reputation: 51

So coming back to my situation, just wanted to tell that I've found a solution. I've installed a SSL Certificate, I used CloudFlare which is free and the installation is really easy, although I had to wait for more than 5 hrs to get it active in my website, I used the flex option and after a while I was able to see the Whatsapp thumbnail image, however, the issue of not showing the preview link image continued on Android phones, so what I did, I went into my code lines on my /header file and put the

<"meta property="og:image" itemprop="image" content="..." />

line at the very top of the whole code where I located open graph codes, that solved the issue of not showing my thumbnail image on Android phones, on IOS it worked perfectly.

The only thing I have right now is that Facebook blocked my website, I'm not sure if it was because of the SSL installation since it worked perfectly before I was doing that, I've already sent some messages to the FB staff related to this issue so I hope they will release it very soon.

Hope my comments give a little help to those who are struggling with the same issue.

Best :)

Upvotes: 2

Related Questions