Whatsapp Image Preview when Sharing Link Missing

Hello @denbuzz!

I tried sharing your site on WhatsApp and here’s what I got: https://imgur.com/7NrSPIU

Btw, just an FYI, it took me a few seconds for the image to show up.

Oh it worked? Let me try again. Was fiddling for two days!

Hey there unfortunately it isn’t working for me. I saw WhatsApp trying to get the preview but it turns up blank. The photo Here

• This reply was modified 4 years, 6 months ago by denbuzz.
• This reply was modified 4 years, 6 months ago by denbuzz.

@denbuzz Thanks for your reply. I also tried testing the link and received a blank preview (see image here).

The first thing we’d recommend checking is whether it’s related to caching. If you clear your cache (server, plugin/theme, browser, or CDN such as Cloudflare) does this resolve the issue? If you are not sure how to clear your server cache you should speak with your host provider. We have information on how to clear your browser cache at the following link: https://kb.yoast.com/kb/how-to-clear-my-browsers-cache/.

If the issue still persists after clearing the caches, it may be related to the preview image. For WhatsApp, their image requirements and recommendations are different from that of Facebook. Unfortunately we were unable to find an official guideline for the image requirements for WhatsApp, but you can find some similar recommendations here: https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

In the past it was recommended that the image needed to be under 300kb in size and 256x256px but not larger than 400x400px. We checked on the file you have set for the og:image and see that it measures 2304×1728 and is 1.2MB, so if you want the image preview to appear in WhatsApp we would recommend to try using a smaller image that follows those recommendations.

Also, another reason that the preview may not be displaying in WhatsApp is that when the image URL is through HTTPS (such as https://framedventures.com/wp-content/uploads/2020/06/sunrise-in-the-himalayas.jpg) and if you are going to use an HTTPS link it requires using og:image:secure_url instead of og:image.

Hi @devnihil thanks for the response. I will check the flushing of cache at server side and will see if I can make a smaller version of the thumbnail.

As for the secure url, how do I set that? Everything is set automatically by Yoast open graph. Could you point me in the right direction.

@denbuzz The og:image:secure_url meta tag used to be output by Yoast SEO, but this was deprecated as of the 14.0 release of the plugin.

@devnihil okay so how should I get around that?

If you want to add the og:image:secure_url on your site using the Yoast SEO plugin, you’ll need to perform customization on your site. You can find such example customization here that you will need to modify based on your needs.

Thanks for the response. This seems abit more advanced then I am used to. Do you happen to have a step by step method of doing this? While I appreciate all the time so far, it seems to be that Yoast should look into this matter as previews are part of SEO.

Just a quick update, I resized the photo to 400×400 and it appears in my whatsapp preview now. Thank you all