As it may not be so easy to understand, I was testing the link preview feature of Whatsapp for a website I've been developing. Being a real fan of using the preview (and waiting a couple of second after I paste some article's URL on my IM's), I was very determined to make it work for this site in particular, but for some reason unknown to me it was not. I was adding the correct
meta tags using OpenGraph and it was working flawlessly in Facebook, Twitter and Telegram. But not Whatsapp.
I've searched everywhere for this problem: SOF,
react-helmet's Github, Gatsby.js community... And every little thing I would change, trying to make it work, would need another deploy so it took a while. After a lot of "solutions" that included changing the image dimensions, adding a second tag and making the title a bit shorter, I've come across a tiny SOF comment that didn't have any upvote and would comment about WhatsApp not liking style tags before the meta tags. At first I didn't give it any credit, as it was improbable and difficult to try, since Gatsby is the one that builds the final
But eventually, after a lot of frustration, I had to try this last solution. This time, I changed the builded code produced by Gatsby putting the
meta tags just after the beginning of the
head section. Deployed the files to a temporary now.sh site and gave it a try. It worked.
I was just as happy as I was shocked. This is the kind of implementation detail that you SHOULD disclosure to developers.
After all, it was the tachyons library that I've included directly on my custom CSS and it took some space. After removing it and replacing by a CDN, it started working. It's valid to say that after removing tachyons, some other CSS was still included before the
meta tags, so the problem was actually the size of the CSS inside the style tag.