reactjs - Twitter 卡片元标记在 index.html 中工作，而不是在 React Helmet 中

Question

我在 App.js 中使用了下面的 React Helmet 代码来渲染 Twitter 卡片元数据。

          <Helmet>
              <meta charSet="utf-8" />
              <title>
                {`xxxxx`}
              </title>
              <meta
                name="description"
                content={`xxxxx.`}
              />
              <meta name="twitter:card" content="summary_large_image" />
              <meta
                name="twitter:title"
                content="xxxxx"
              />
              <meta
                name="twitter:description"
                content="xxxx."
              />
              <meta name="twitter:site" content="@xxxx" />
              <meta
                name="twitter:image"
                content="https:xxxx"
              />
              <meta name="twitter:creator" content="@xxxx" />
            </Helmet>

当我进行浏览器检查时，元标记确实出现了。但是在推特卡验证器( https://cards-dev.twitter.com/validator )中，我得到了 错误:未找到卡(卡错误)。

如果我在 index.html 中添加相同的元标记，它会起作用。 但是，我希望 Twitter 卡在 Helmet 中工作，以便我可以动态更改它。没有服务器端渲染有可能吗？

Answer 1

Facebook /推特/等。爬虫不呈现 JavaScript，因此除非您在服务器上呈现 Helmet 内容或在 index.html 文件中包含卡片元标记，否则它们永远不会获取您的客户端更新。