4

我在 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 中工作，以便我可以动态更改它。没有服务器端渲染有可能吗？

4

2 回答 2

3

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

于 2020-01-17T16:10:57.477 回答
1

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

我们在我们的 React 网站上使用 Twittersummary_large_image和twitter:imagevia Helmet，并确认它在Twitter Card Validator和实时 Twitter 帖子中有效！

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

于 2021-03-08T20:30:59.087 回答