react-helmet不识别任何动态元属性

Question

我正在使用react为whatsapp和facebook等平台生成预览图像。理想情况下，如果有特定产品的特定url，例如，我希望预览图像显示该产品的特定图像。

现在，我有了一个大体的图像。在我的index.html中，如果我添加像这样的行，

    <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"
    />

然后，如果我将我的站点url粘贴到whatsapp中，预览图像将显示此图像。

我还有一个看起来像这样的Page组件，

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>
  );
}

并且特定产品将具有类似以下内容的url，

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

但是，如果我将该url粘贴到whatsapp中，我将只能看到我的index.html中列出的图像。

我在这里做错了什么？

下面是我的代码示例：

​

​

Answer 1

我认为这与反应头盔有关，我对这个包也有问题……尝试使用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>
  );