Friday, August 11, 2017

WordPress Post Thumbnail not Shown via WhatsApp Share

Bismillah. I manage several websites using WordPress. klikmu.co is the most recent one. We use a theme named newspaper-X.

I faced a weird problem: When a post shared via Facebook, a featured image is shown and previewed by default. But when it is shared via WhatsApp, the image is not shown and replaced by a static web icon. Any different post I have shared via WhatsApp are always accompanied by the static web icon. It is really weird thing. This problem really stuck in my mind for two days.

Fortunately, Facebook already provides a debug-tool for this kind of case. You can access here:

https://developers.facebook.com/tools/debug/sharing/

I have compared: a post from my other web which is working normally in sharing, with a post from the 'problem' web. I found a slightly different meta tag composition. The normal web shows a meta tag "og:image"

meta property="og:image" content="http://maidabakery.com/wp-content/uploads/2017/01/xxx.jpg"

And the 'problem' web did not shown this meta tag.

I think that the problem is caused by this uncomplete meta definition. From Google, I have found that this meta are defined in header.php located in the theme folder.

Really, I have surprised founding the meta image. The image url is left empty.

meta property="og:image" content=""

Then I added this tag with a WordPress-php function as shown in figure below.

<meta property="og:image" content="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" />




From this problem, I realize the hidden mistery of meta tags definition. The uncomplete meta tag defined by selected WordPress theme caused this weird phenomenon. Just by adding a single line of tag, the problem is already vanished...

Alhamdulillah...

Function Reference:
https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/

1 comment:

  1. i added but still no thumbnail showing in whatsapp

    ReplyDelete