5

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:

no og-image

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
  • [![enter image description here](https://i.stack.imgur.com/QTTgB.png)](https://i.stack.imgur.com/QTTgB.png) I can see your preview image in my whatsapp, in the desktop and mobile app, what are the specifications of the system or mobile where you are trying? – Esteban Camargo Sep 14 '19 at 16:57
  • @EstebanCamargo I was trying on an iPhone 6s as well as on WhatsApp web on the Linux version of Chromium 77. – Marcel Korpel Sep 15 '19 at 16:34

3 Answers3

2

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.

enter image description here

Cosmin Staicu
  • 1,809
  • 2
  • 20
  • 27
  • Looks good, but it didn't work out for me. I have another page, at https://dev.firapeel.nl/activiteiten/book6 and I just don't get the image. I'll update my question a bit. – Marcel Korpel Sep 14 '19 at 19:22
  • 2
    The link you provided works ok on my machine. On the other hand, I usually provide one more meta tag for og protocol: `` – Cosmin Staicu Sep 14 '19 at 19:30
  • 2
    Also, according to [specifications](https://ogp.me) you also need an alt text for the image: `` – Cosmin Staicu Sep 14 '19 at 19:35
  • Thanks for the suggestions. I think I can assume this is a local problem. I'll check in my network if others do see the image, and leave this question open in the mean time, but there might be no problem at all, except the non-latin1 characters in the URL. – Marcel Korpel Sep 14 '19 at 19:53
  • 2
    For a fast OG preview for a web-site, there is an extension for Chrome, called Open Graph Preview. It can help you in debugging. – Cosmin Staicu Sep 14 '19 at 19:58
0

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.

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
0

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.

marvin gitau
  • 31
  • 1
  • 4