我们希望在显示页面预览图像的社交媒体上共享链接。这个图像每次都可能不同。我们的应用程序是一个CRA,具有客户端渲染和Java Spring Boot后端。
这可能吗?SEO对我们来说根本不重要,因为它是B2B产品。我已经将React Helmet添加到有问题的页面中。我读到过SSR用于此目的,但我们的应用程序并不是这样构建或打算这样做的,所以我们希望保持原样。我们只需要一个页面的OG元标记,所以它更像是一个例外,而不是一个规则。下面是一个人为的例子:
const userData = useGetUser();
<Helmet>
<MainContainer>
<Box>{userData?.name}</Box>
<Box>{userData?.image}</Box>
</MainContainer>
<meta property="og:image" content={userData?.image} />
</Helmet>
如果有人知道怎么做,我真的很感激。谢谢大家!
React Helmet在您指定为<Helmet/>
组件子级的每个标记的末尾添加以下属性:
data-react-helmet="true"
所以这个:
<Helmet>
<meta property="og:image" content="image link" />
</Helmet>
渲染到:
<head>
<meta property="og:image" content="image link" data-react-helmet="true">
</head>
这将使在线共享预览调试工具(如Facebook的共享调试器和https://www.opengraph.xyz/.
如果删除了此属性,则指向您的网站的链接将在上述验证工具中按预期显示。
从React Helmet生成的标签中删除此属性是一个悬而未决的问题。