My template does not enable picture preview of site shared on Whatsapp

Site URL: https://www.strawberrystudio.co/

Hi guys,
Our developer and I are struggling to understand how we can set our default social media thumbnail picture to appear when we share our website link through Whatsapp. On Facebook it works fine!

Hi there, one trick you can try is the following:

1. go to the individual page
2. then settings
3. then advanced
4. there add the following code: 

   <meta property="og:image" content="ADD-HERE-THE-URL-TO-YOUR-IMAGE"/>

5. the image should be e.g. 1500x1000px 

that's all now it should work 🙂

Hi onlineKarma, thank you for this. I didn't get a notification from Squarespace that you had responded (and I have "notify me of replies ON", in the meantime our developer made it work. Not sure what he did, but will pass on your trick. Thank you very much !

@strawberrybrandstudio Hey guys, were you able to find out what fix your developer got to make this work? I'm encountering the same issue on a number of my sites. Only seems to be once I set up custom domain (using the Squarespace placeholder URL everything works fine). Any help anyone?

Just a quick response to this - seems to be WhatsApp is sensitive to the size of SEO image used. I played around with the size of the image file and it now shows up as a preview/thumbnail when sharing. No idea if that's a fix or not but it's a workaround that's working for me.

Did it have to be a square? Do you mind sharing what dimensions work for you?

Hi, I think the image size is not relevant.

It is true that Squarespace site by default is not displaying images as thumbnails in WhatsApp.

Squarespace site link in WhatsApp

Link to whatsapp https://chatwith.io/instagram/hi-co

It 

Hi OnlineKarma, please How can I set a thumbnail picture to appear when sharing a BLOG POST link through Whatsapp??

I´ve tried the solution above but without results 

Hi,

Did anyone get to the bottom of this?  

It makes a site look very unprofessional when posting links to it on whatsapp if it doesn't show a preview and I find this very frustrating as all my social sharing images work on all other platforms.  

Cheers

On 4/28/2020 at 12:33 PM, onlineKarma said:

Hi there, one trick you can try is the following:

 

1. go to the individual page
2. then settings
3. then advanced
4. there add the following code: 

   <meta property="og:image" content="ADD-HERE-THE-URL-TO-YOUR-IMAGE"/>

5. the image should be e.g. 1500x1000px 

 

that's all now it should work 🙂

You are a genius!

I've been struggling with this for the last 2 days. Thanks, thanks, thanks!

♥️

Can anyone help me? 
I had to use the below code because my header images weren't shrinking on mobile and it looked really rubbish. However, now there is only a giant white box as the preview image when I post the link to a social media site. I'd like it to show a preview of the page as normal. 

Any ideas? 

URL: https://acerintegration.com/

<style>
  @media screen and (max-width:767px) {
#page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top:0px;
}
}
</style>