Solved

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

D666
Excursionist
23 2 5

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:

 

385529457_784042200231606_1695288914977054504_n.jpg

 

Facebook Messenger - no image:

 

420153613_2716751398473798_1681453375253753567_n.jpg

 

WhatsApp - no Image:

 

416237051_3217112555251971_2145338457332166059_n.jpg

 

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?

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
1192 309 228

This is an 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 -%}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

D666
Excursionist
23 2 5

This is an 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.

 

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1192 309 228

This is an 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 -%}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
D666
Excursionist
23 2 5

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

ThePrimeWeb
Shopify Partner
1192 309 228

It's working @D666,

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

ThePrimeWeb_0-1706729571193.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ThePrimeWeb
Shopify Partner
1192 309 228

 Fb Messenger

IMG_3129.jpeg

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
D666
Excursionist
23 2 5

This is an 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.