title: Why doesn't an image show up in WhatsApp link sharing?
body: <p>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.</p>
  
  <p>My current markup looks like this:</p>
  
  <pre><code>&lt;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"&gt;
  &lt;meta property="og:title" content="Σωκράτης"&gt;
  &lt;meta name="description" content="Excerpt of Greek text, something by Plato"&gt;
  &lt;meta property="og:description" content="Excerpt of Greek text, something by Plato"&gt;
  &lt;meta property="og:image" content="https://dev.firapeel.nl/img/opengraphtest/the-alps-4440879_1920.jpg?type=open_graph"&gt;
  &lt;meta property="og:image:width" content="600"&gt;
  &lt;meta property="og:image:height" content="315"&gt;
  </code></pre>
  
  <p>When I read <a href="https://stackoverflow.com/a/43154489/258127">this answer</a> closely, I think I comply with all mentioned requirements, and the image is less than 300KB and larger than 300x200. For testing purposes, <a href="https://dev.firapeel.nl/activiteiten/%CE%A3%CF%89%CE%BA%CF%81%CE%AC%CF%84%CE%B7%CF%82" rel="nofollow noreferrer">here</a> is the page containing this data (page will not be online forever, but at least as long as there's no accepted answer).</p>
  
  <p>It struck me that <a href="https://www.criterion.com/current/top-10-lists/365-jack-reynor-s-top-10" rel="nofollow noreferrer">this page</a> does produce a preview image on WhatsApp, so I looked at its markup:</p>
  
  <pre><code>&lt;meta property="og:type" content="website" /&gt;
  &lt;meta property="og:site_name" content="The Criterion Collection" /&gt;
  &lt;meta property="og:title" content="Jack Reynor’s Top 10" /&gt;
  &lt;meta property="og:url" content="https://www.criterion.com/current/top-10-lists/365-jack-reynor-s-top-10" /&gt;
  &lt;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." /&gt;
  &lt;meta property="og:image" content="https://s3.amazonaws.com/criterion-production/explore_images/1163-be829752be16371f35aad962dd0ee8dd/EqV7Y9BOuhZMNvHkcEmghaSAykI5cd_original.jpg" /&gt;
  &lt;meta content="https://s3.amazonaws.com/criterion-production/explore_images/1163-be829752be16371f35aad962dd0ee8dd/EqV7Y9BOuhZMNvHkcEmghaSAykI5cd_original.jpg" property="thumbnail" /&gt;
  </code></pre>
  
  <p>For the record, the linked image has dimensions of 1600x1600.</p>
  
  <p>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 <code>thumbnail</code> meta property, test with a page without the need of URL-encoded entities, but whichever combination I try, nothing works.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>According to Cosmin Staicu's answer it seems the Greek characters in the URL are the problem, so I chose <a href="https://dev.firapeel.nl/activiteiten/book6" rel="nofollow noreferrer">another page</a> with only latin1-characters, but that didn't change a thing for me:</p>
  
  <p><a href="https://i.stack.imgur.com/eydbk.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eydbk.gif" alt="no og-image"></a></p>