react-helmet 无法识别任何动态元属性答案

【问题标题】：react-helmet not recognzing any dynamic meta propertiesreact-helmet 无法识别任何动态元属性
【发布时间】：2021-03-25 09:07:27
【问题描述】：

我正在使用 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"
    />

然后，如果我将我的网站网址粘贴到 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>
  );
}

特定产品的网址类似于，

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

但如果我将该网址粘贴到 whatsapp 中，我只会看到我的index.html 中列出的图片。

我在这里做错了什么？

这是我的代码示例：

【问题讨论】：

标签： javascript reactjs react-helmet

【解决方案1】：

我认为它与react-helmet有关，我也遇到过这个包的问题...尝试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>
  );

【讨论】：