Solution 1 :

Okay so here I have updated my Answer:

I have copied all the content of your website using view source and posed on my domain test page and the rich text appear for me on IOS.

But strange thing is your main domain https://www.happyventures.company/ and https://www.happyventures.company/invite/zzisi/ but pages rich text are not showing only, then I tried my WhatsApp web and tried to debug what exactly is the response then I found that for my domain it is giving me response message but for your domain it gives 404.

Please check your site on https://web.whatsapp.com/

Also please try the same with “.com” domains if you have one.

Checkout the screenshot for 404:
enter image description here


The OLD answer which is any way working for me:
Try below code:

<meta property="og:type" content="website">
<meta property="og:title" content="Happy App">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">
<meta property="og:image:type" content="image/png">
<meta property="og:description" content="2 Happy - Just for good friends and family">
<meta property="og:image" itemprop="image" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">

<meta name="twitter:image:alt" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<meta name="twitter:image" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">

Problem :

I am working on a website which will be shared mostly on whatsapp through links. I need the rich preview to display when the link is shared on whatsapp. This only works on android but not IOS.
This is how my head looks like in the HTML below. I have tried all forms of suggestion keeping the image below 300KB and the size 1:1 also less than 300px. All to no avail. The rich preview doesnt show at all not even the title or description. What am i not doing right? This is the link to the website in case someone needs to check for me https://www.happyventures.company/invite/zzisi/. Thank you

<meta property="og:type" content="website">
<meta property="og:description" content="Happy - Just for good friends and family">
<meta property="og:title" content="Happy App">
<meta property="og:image" itemprop="image" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<meta name="twitter:image:alt" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<meta name="twitter:image" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<link href="https://www.happyventures.company" rel="canonical">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">
<meta property="og:image:type" content="image/png">
<link rel="apple-touch-icon" sizes="250x250" href="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<link rel="icon" type="image/png" sizes="250x250" href="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<link rel="icon" type="image/png" sizes="250x250" href="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<link rel="mask-icon" href="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png" color="#6c63ff">```

Comments

Comment posted by Jeferson Martinho

Apparently this is a cross-site compatibility issue with images hosted on Amazon AWS only. Happens to my website too. And I’m also looking for a solution. I believe that there are many, many sites with the same problem, but curiously there are very few records of this problem on the Internet and basically people reporting the issue, never a solution or workaround.

Comment posted by Shebuka

Please add an explanation on how this code is different from the OP’s code and how it solves the issue OP has

Comment posted by Rahul Kathet

I have done this with sample HTML at my end and it worked

Comment posted by Shebuka

This are the same meta tags from OP’s question. The fact that it works for you doesn’t

By

Leave a Reply

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