Image missing for product and collection links shared on social media (Dawn v11)

[D666]

When a product page is shared on WhatsApp or Facebook Messenger, there is no image in the link.

However, the image is displayed when I share the link on Facebook on my wall.

For example, when I share https://veganwear.shop/products/clover-vegan-t-shirt, this is what I get:

Facebook wall - OK:

Facebook Messenger - no image:

WhatsApp - no Image:

The code for the og:image property lives in theme.liquid:

<meta property="og:image" content="{{ product.featured_image.src | image_url: '1024x1024' }}" />

Any ideas?

[ThePrimeWeb · Accepted solution]

Hey @D666,

Change it to this

{%- if page_image -%}
  <meta property="og:image" content="http:{{ page_image | image_url }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{%- endif -%}

[ThePrimeWeb · Accepted solution]

Hey @D666,

Change it to this

{%- if page_image -%}
  <meta property="og:image" content="http:{{ page_image | image_url }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{%- endif -%}

[D666]

Thanks! I've changed the code as you suggested, but no change.

[ThePrimeWeb]

It's working @D666,

You can't try on the same device because of caching. You probably need to try tomorrow. 

[ThePrimeWeb]

 Fb Messenger

[D666 · Accepted solution]

@ThePrimeWeb Your suggestion sorted out the issue for Facebook Messenger. 👌

But the issue for WhatsApp was something else: the image that WhatsApp tries to fetch for the link preview must be under 300kB. 

Thank you again for your help.