Why doesn't an image show up in WhatsApp link sharing?

Question

I'm trying to enrich a web site with Open Graph data, to let the page author decide which image and texts show up in a preview on social media. However, I can't get WhatsApp to show a small image in the sharing card.

My current markup looks like this:

<meta property="og:url" content="https://dev.firapeel.nl/activiteiten/%CE%A3%CF%89%CE%BA%CF%81%CE%AC%CF%84%CE%B7%CF%82">
<meta property="og:title" content="Σωκράτης">
<meta name="description" content="Excerpt of Greek text, something by Plato">
<meta property="og:description" content="Excerpt of Greek text, something by Plato">
<meta property="og:image" content="https://dev.firapeel.nl/img/opengraphtest/the-alps-4440879_1920.jpg?type=open_graph">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">

When I read this answer closely, I think I comply with all mentioned requirements, and the image is less than 300KB and larger than 300x200. For testing purposes, here is the page containing this data (page will not be online forever, but at least as long as there's no accepted answer).

It struck me that this page does produce a preview image on WhatsApp, so I looked at its markup:

<meta property="og:type" content="website" />
<meta property="og:site_name" content="The Criterion Collection" />
<meta property="og:title" content="Jack Reynor’s Top 10" />
<meta property="og:url" content="https://www.criterion.com/current/top-10-lists/365-jack-reynor-s-top-10" />
<meta property="og:description" content="A voracious cinephile with wide-ranging taste, the star of Midsommar shares a list of favorite films that shows his particular affinity for the provocative and the macabre." />
<meta property="og:image" content="https://s3.amazonaws.com/criterion-production/explore_images/1163-be829752be16371f35aad962dd0ee8dd/EqV7Y9BOuhZMNvHkcEmghaSAykI5cd_original.jpg" />
<meta content="https://s3.amazonaws.com/criterion-production/explore_images/1163-be829752be16371f35aad962dd0ee8dd/EqV7Y9BOuhZMNvHkcEmghaSAykI5cd_original.jpg" property="thumbnail" />

For the record, the linked image has dimensions of 1600x1600.

So I tried to get rid of the image size properties, use a larger image (with dimensions 1920x1079, and without the query parameter), use a square image of 300x300, use a thumbnail meta property, test with a page without the need of URL-encoded entities, but whichever combination I try, nothing works.

UPDATE:

According to Cosmin Staicu's answer it seems the Greek characters in the URL are the problem, so I chose another page with only latin1-characters, but that didn't change a thing for me:

Answer 1

In my case the shared post on whatsup did show the thumbnail, so i fixed by changing the img format to .jpg and its size to <300 kb.

Preconditions were I was using Yoast SEO and Anyshare Plugin.

Answer 2

In the mean time, I changed the structure of the server application: originally, I served images using a PHP script, which converted the URI requests to internal file names. This lead to 503 "Service Unavailable" errors when requesting many images at once, because of a server overload.

So I decided to put all images in a publicly accessible directory, letting Apache handle the image requests directly. Not only did this result in a huge speed-up, but as a side effect this issue got resolved.

Answer 3

Your og implementation only works on some versions of whats app. And that is because the url (of the entire page, not just the image) contains non ascii characters.

I have copy/paste your html code on one of my web-sites and it worked ok, as long as the file was named index.html or ogtest.html.

After I renamed the file with Greek characters, og-protocol stopped working.