React CRA-特定页面的meta og标签(Spring Boot)



我们希望在显示页面预览图像的社交媒体上共享链接。这个图像每次都可能不同。我们的应用程序是一个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生成的标签中删除此属性是一个悬而未决的问题。

最新更新