DEV Community

WhatsApp link preview is weird

Lucis on December 04, 2019

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 ...

Read full post

Vitor Gomes • Mar 30 '20

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 • Apr 2 '20

Very nice, Vitor!

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

;)

Terry Mitchell • Apr 29 '20

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 • Apr 29 '20

Found the solution here for anyone who needs:

stackoverflow.com/questions/251009...

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

Leonardo Alberto Souza • May 8 '20

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 • Aug 17 '21

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.