I already have the social-share button for whatsapp on my webpage, but when you choose a contact to send, it only writes "title_content url" on the writing box. It seams that whatsapp doesn't see the meta tags of the webpage to create a nice box with the image, title and description.
I am using the following open-Graph meta tags and it is working fine with facebook social sharing:
<meta property="og:type" content="website" />
<meta property="og:title" content="{{event.name}}" />
<meta property="og:description" content="{{eventDescription event.information}}" />
<meta property="og:url" content="{{eventUrl url}}" />
<meta property="og:image" content="{{eventImage event}}" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<meta property="fb:app_id" content="#####" />
I do not have a icon for my event, so I can't set up the tag:
<link rel="shortcut icon" href="###.ico" type="image/x-icon">
I tried to set it with a .png
image but it didn't work. So, what else can I do to whatsapp see my website and render that box with the image, title and description?
I just found out what was happening. When you try to feed information to facebook or twitter crawlers you need a special way to do it. So you have to create a crawler route with filter and dynamic content (as you can see on this tutorial that i created: Tutorial ).
With whatsapp you don't need to worry about server side rendering. When I created my open-graph meta tags direct on the <head>
.
Eddited:
Because I need meta tags that work dynamically, I had to stop using direct on the <head>
. But the docHead() or any of the packages were not working for me. So I realised that whatsapp can work from server side and use the same og:
tags that I already have for facebook.
I just needed to find its user-agent that is WhatsApp/2.17.107 A
and add the permition like I did for the other ones on the server side route.