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>

在我进行浏览器检查时，会显示meta标签。但是在Twitter卡验证程序（https://cards-dev.twitter.com/validator）中，我收到错误：未找到卡（卡错误）。

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

Answer 1

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中使用

1 个答案: