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

Question

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

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

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

提前致谢，祝大家愉快。

Answer 1

虽然 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>
  );
}

因为以后的标签会覆盖重复的更改，你可以为你的整个站点设置一组标签，然后在每个 post 的组件中有一组包裹在 <Helmet> 中的特定标签post.

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

Answer 2

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

总是喜欢 URL slug 是动态的 //example.com/apple-iphone-12 你可以使用 NextJS Dynamic Pages pages/[post].js 和路由。

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

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

这将使网站能够被 google 有效地抓取，也有助于进一步改进。

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

Social sharing and head tags of a specific page in a React app

reactjs

server-side-rendering

next.js