Where do I change the rich preview picture?

  • 22 November 2016
  • 14 replies
  • 332 views

Can’t figure out where I can adjust the rich preview picture, that is shown when sharing an unbounce url, for example in Whatsapp. See the attachment for an example. The text I’m editing through the metadata in the page properties, but I can’t find the picture anywhere in the editor.

Thanks in advance!


14 replies

Userlevel 7
Badge +4

Hey there,

So this is totally doable. All you have to do is add open graph tags to the page, and WhatsApp will pull them in.

I know Open Graph tags are normally associated with Facebook, but I just tested it and they work on WhatsApp as well.

To add the proper tags to your page, here are the steps: http://documentation.unbounce.com/hc/en-us/articles/203660994-Adding-Social-Widgets#content9

Let me know if you run into any issues with this. The most important thing to remember is that the images need to be hosted somewhere else.

Userlevel 6
Badge +1

Hey @nivvle I have not tested WhatsApp but I trust @Nicholas 100% 😛

Here are the OG tags we put in javascripts, placement head:

<meta property="og:title" content="Main title  ..." /> 
<meta property="og:url" content="http://abc.com"/>
<meta property="og:type" content="website" /> 
<meta property="og:image" content="http://www.abc.cc/images/abc.png" /> 
<meta property="og:description" content="Description ..." />
<meta property="fb:admins" content="12345678"/>  

You need to upload the image thumb to your server. Not sure if the FB admins ID is necessary for WhatsApp, but I would create an app ID for this anyways.

Hope that help!

I’ve been considering writing up a tutorial for this … @Justin ?

Yes @digibomb! That would be fantastic. Pretty easy one, but useful for so many peeps.

Userlevel 7
Badge +4

I didn’t need a Facebook Admin ID when I tested it, so this shouldn’t be an issue, but yeah, there’s no harm in creating and using one anyway.

Thanks guys! Will try asap!

Works like a charm, thanks!

Hi There,

I tried it so hart did all the things you descirped but the thumbnail is not visable in whatsapp. Please let me know how to do this.


Userlevel 7
Badge +4

It appears to be working for me. Here’s what I see when I paste that URL into WhatsApp, which matches the image that is in your source code (with the Imgur URL):

12 AM

Maybe try clearing your cache or giving it a few minutes?

I Nicholas,

Strange that it is visable at your whatsapp. Is it possible to send me the link to my whatsapp to https://api.whatsapp.com/send?phone=31654795354

I Nicholas,

Can you please please help me. Strange thing Is it possible to send me the link to my whatsapp to https://api.whatsapp.com/send?phone=31654795354 I did clear my cache and 100 things to get www.fcurban.nl visable

Hi Nicholas,

It drives me grazy!!! I does not seem to work. I test it with whatsapp and liked in it does not working.

Can you please help me

Userlevel 7
Badge +4

Have you tested what it looks like on any other WhatsApp accounts or devices?
Also, it might be a problem with your image host. Maybe try hosting the image elsewhere, like on Amazon Web Services.

Hi Nicholas,

Yeah tried in with different whats apps, I even test it with a new phone
that never went to our site.

Strange thing is that it is vissable when I open a new page like
www.fcurban.nl/werkenbij

But if I test it with the site that I want it is not vissable.
Www.fcurban.nl

Hi, this is an old post, but you may need to have an update. Once you share an URL WhatsApp will cache that for you. So if you share an URL without the thumbnail, you may not have it in the future. So test your URL before sharing with WhatsApp to ensure you have the right information. Otherwise, you may loose some important information for your users.

Reply