Twitter 卡片元标签在 index.html 中工作，而不是在 React Helmet 中 [英] Twitter card meta tags work in index.html, not in React Helmet

问题描述

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

I have used below React Helmet code in App.js for rending Twitter card meta.

          <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)，我收到错误:找不到卡(卡错误).

The meta tags do show up while I do a browser inspect. But in twitter card validator(https://cards-dev.twitter.com/validator), I am getting ERROR: No card found (Card error).

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

If I add the same meta tags in index.html, it works. But, I would like the twitter card to work in Helmet so that I can change it dynamically. Is it possible without Server-Side Rendering?

推荐答案

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

Facebook/Twitter/etc. crawlers do not render JavaScript, so unless you are rendering Helmet content on the server OR including the card meta tags in the index.html file, they will never pick up your client-side updates.

这篇关于Twitter 卡片元标签在 index.html 中工作，而不是在 React Helmet 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！