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>

当我检查浏览器时，元标记确实出现了。但是在 Twitter 卡验证器（https://cards-dev.twitter.com/validator）中，我收到 错误：找不到卡（卡错误）。

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

Answer 1

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

Answer 2

Twitter 现在在抓取元标记的网页时似乎正在呈现 JavaScript！至少就 React Helmet 而言是这样。

我们在我们的 React 网站上通过 Helmet 使用 Twitter 的 summary_large_image 和 twitter:image，并确认它在 the Twitter Card Validator 和实时 Twitter 帖子中工作！

请注意，Twitter 需要 URL 协议 (https://) 才能使用我们的 twitter:image 元标记中指定的图像。我们最初在没有 URL 协议的情况下构建了这些元标记，并且 Twitter 没有拉入图像与推文一起显示。

Twitter 卡片元标记适用于 index.html，不适用于 React Helmet

Twitter card meta tags work in index.html, not in React Helmet

twitter-card

reactjs

react-helmet