react-helmet not recognzing any dynamic meta properties

Question

I'm using react to generate preview images for platforms like whatsapp and facebook. Ideally, if there is a specific url with a specific product, for example, then I would want the preview image to show the specific image for that product.

Right now, I got a general image to work. In my index.html, if I add the line like,

    <meta
      property="og:image"
      content="https://images.unsplash.com/photo-1616277239237-1c50214ffa78?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1301&q=80"
    />

then if I paste my site url into whatsapp, the preview image will show this image.

I also have a Page component that looks like this,

import * as React from "react";
import Helmet from "react-helmet";

export default function Page({ meta, children }) {
  const { ogImage, ogDescription, ogTitle } = meta;

  return (
    <div>
      <Helmet>
        <title>{ogTitle}</title>
        <meta property="og:title" content={ogTitle} />
        <meta property="og:image" content={ogImage} />
        <meta property="description" content={ogDescription} />
      </Helmet>
      {children}
    </div>
  );
}

And a specific product would have a url similar to,

http://<domain>.com/product/123

But if I paste that url into whatsapp, I will only see the image that is listed in my index.html.

What am I doing wrong here?

Here's an example of my code:

MB_ MB_ · Accepted Answer · 2021-03-25T11:39:25

I think it's related to react-helmet, I had problems with this package too ... Try with react-helmet-async

import { HelmetProvider } from 'react-helmet-async';
import { Helmet } from 'react-helmet-async';

...

return (
    <HelmetProvider>
      <Helmet defer={false}>
        <title>{ogTitle}</title>
        <meta property="og:title" content={ogTitle} />
        <meta property="og:image" content={ogImage} />
        <meta property="description" content={ogDescription} />
      </Helmet>
    </HelmetProvider>
  );

react-helmet not recognzing any dynamic meta properties

1 Answers