这是我当前添加元标记的配置:
{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返回 无法呈现卡片预览。知道如何修复它吗？
最佳答案
我认为是 CSR(客户端渲染)问题。 Twitter 卡片获取链接的元数据禁用了 JavaScript，因此您需要在服务器响应中填充元数据，在这种情况下您需要 SSR(服务器端渲染)。我建议尝试使用 nextjs.org相反
关于ReactJS Helmet 元标记不适用于 Twitter 卡片和电报预览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69015062/