WhatsApp link preview is weird

So, my day as a web developer today was described by this image:

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 seconds 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 on 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 index.html.

But eventually, after a lot of frustration, I had to try this last solution. This time, I changed the built 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 disclose 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 it 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.

edit: Vitor Oliveira has pointed out another great way of solving this problem: Sorting the head tags with the meta data first. For this, you need to edit (or add) a gatsby-ssr.js exporting the following function:

export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents();
  headComponents.sort((a, b) => {
    if (a.type === 'meta') {
      return -1;
    } else if (b.type === 'meta') {
      return 1;
    }
    return 0;
  });
  replaceHeadComponents(headComponents);
};

Comments

[Vitor Gomes]

Hey Luciano, thanks for sharing. In our project we couldn't fix the problem only with Helmet. What I did was:

gatsby-ssr.js

export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents();
  headComponents.sort((a, b) => {
    if (a.type === 'meta') {
      return -1;
    } else if (b.type === 'meta') {
      return 1;
    }
    return 0;
  });
  replaceHeadComponents(headComponents);
};

Sorting the Head components with the meta data first.

Cheers

[Lucis]

Very nice, Vitor!

I'll add it to the post as another solution, right?

;)

[Terry Mitchell]

Hi Lucis!!

I have the same problem, I tried Vitor's function in gatsby-ssr.js and it didn't work, I'm not importing any external CSS. It's scraping fine in the Facebook debugger and in devtools > elements all meta tags are above the CSS (after I swapped the order of imports in the Layout component) - do you have any other tips??
It's for the landing page of an English language self-study platform for Brazilians and I'm losing way too much time to get this to share correctly on WhatsApp - any advice appreciated - here's the landing page (not promoted/officially live yet - just for testing purposes):
portugles.com/

Many thanks in advance :)

[Terry Mitchell]

Found the solution here for anyone who needs:

stackoverflow.com/questions/251009...

I'd never heard of this!! Really helped :)

[Leonardo Alberto Souza]

I have the same problem but reversed: My meta tags are working nicely with WhatsApp, but Telegram is ignoring it... I've tried the @previews bot and:

Have you done something special for Telegram to display the metadata?

[Mandeep choutapelly]

I thank you from the bottom of my heart. Even after a day of debugging i couldn't locate the problem in SEO, all this got resolved just minutes after reading you article. Thank you very much.

[Chiyana Simões]

Hello Luciano, thanks for sharing. Just one question:

I changed the builded code produced by Gatsby putting the meta tags just after the beginning of the head section.

How did you do that?

Thanks!

[Lucis]

I changed how I was importing stuff using React Helmet

[Patrick Klitzke]

Thank you so much, i was debugging this for a long time.

[seteevinteequatro]

LUCIANO DE DEUS!!!!

Cara muito obrigado pelo artigo, consegui graças a vc!

Orgulho de ter um br ajudando os outros assim!!!!!

[Lucis]

Poxa cara, valeu!

Descobri esse problema praticamente sozinho e imaginei que alguém sofreria também no futuro ;)

[Emerson Paiva]

It works!!! the last thing I could think of was the styles on top of the page.
thanks for sharing the solution.