React应用程序中特定页面的社交分享和标题标签

Question

我有一个用CRA制作的React应用程序。应用程序的一个特定页面，比如说它是一个帖子，需要在社交媒体上共享，所以我需要在页面的顶部插入标签。由于React使用JS生成DOM元素，所以我不能只将其作为jsx。

我想我需要某种服务器端渲染，我想知道是否有可能只制作这个页面SSR，而不必弹出CRA并将所有应用程序迁移到Next.js之类的东西。

这里最好的决定是什么？有人能给我指个方向吗？

提前感谢，祝大家今天愉快。

Answer 1

我们遇到了同样的问题，并将应用程序迁移到nextJS，在那里，您可以通过导入现有组件来将其包含到页面中，其中的内容变成SSR。

始终希望URL段塞是动态的//example.com/apple-iphone-12，您可以使用NextJS dynamic Pages Pages/[post].js和路由来使用动态页面名称。

您可以使用Next/Head注入OpenGraph内容，它允许添加元内容。

然后使用react share，这是一种简化的形式，其中当前页面和图像的url就足够了(如果需要，可以添加额外的内容(。

这将使网站能够有效地被谷歌抓取，也将有助于进一步增强。

Answer 2

虽然SSR是一种可能的解决方案，但它可能同样适合您，也更容易使用react helmut这样的库，它允许您向页面添加HTML标记。

import React from "react";
import Helmet from "react-helmet";
function App() {
return (
<main>
<Helmet>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My site" />
<meta name="twitter:description" content="Description of my site." />
<meta name="twitter:image" content="http://example.com/image.png" />
</Helmet>
<div>{/* app content... */}</div>
</main>
);
}

因为以后的标记会覆盖重复的更改，所以您可以为整个网站设置一组标记，然后在每个帖子的组件中都有一组特定于该帖子的<Helmet>标记。

与SSR相比，使用这种技术需要注意的一点是，元标签的消费者需要能够解析和呈现JS。现在这不是一个问题，但可能不适用于所有情况。