Search code examples
gatsbywhatsapppreviewreact-helmet

Whatsapp preview doesn't work while Facebook and Twitter does


I've read a lot of SOF question about this, but none of them explain why such thing would happen to my website. The URL is this one: https://www.acaciadaborborema.com.br/ and you can check all meta-tags that come with the HTML.

The rich preview works just fine in Facebook and Twitter but, for some reason, it doesn't work for Whatsapp, not even the title + description.


Solution

  • I've found the solution, and it's not something I would've considered initially.

    I use Gatsby.js to build my website, thus I have to use something like react-helmet to add the meta tags, which works nice (since gatsby has SSR), but the problem is caused by a relatively big style tag before the meta tags, with some CSS for the site. And, as it turns out, Whatsapp does care about that.

    edit: just a style tag doesn't mess the Whatsapp Preview, but a big one will (it was the entire tachyons library)