ReactJS Helmet 元标记不适用于 Twitter 卡片和电报预览

Question

这是我当前添加元标记的配置:

 {data? <Helmet>
    <title>Site- {data.name ? data.name : ""}</title>
    <meta charSet="utf-8" />
    <meta name="twitter:card" content="summary_large_image" data-react-helmet="true" />
    <meta name="twitter:site" content="@user" data-react-helmet="true" />
    <meta name="twitter:creator" content="@user" data-react-helmet="true" />
    <meta property="og:type" content="website" data-react-helmet="true"/>
    <meta property="og:url" content={document.location.href} data-react-helmet="true" />
    <meta property="og:title" content={data.name ? data.name : ""} data-react-helmet="true" />
    <meta property="og:description" content={data.description?.en?.slice(0, 65) + "..."} data-react-helmet="true" />
    <meta property="og:image" content={data.image?.large} data-react-helmet="true" />
  </Helmet>
    : null}

data 是一个钩子(Hook)，当来自数据库的请求完成时被填充。

试穿https://cards-dev.twitter.com/validator返回 无法呈现卡片预览。知道如何修复它吗？

Answer 1

我认为是 CSR(客户端渲染)问题。 Twitter 卡片获取链接的元数据禁用了 JavaScript，因此您需要在服务器响应中填充元数据，在这种情况下您需要 SSR(服务器端渲染)。我建议尝试使用 nextjs.org相反