我目前正在为我的应用程序使用 create-react-app。这在 public/index.html 文件中使用硬编码的元标记,如下所示:
<title>XXXX</title>
<meta name="description" content="XXXXX" />
<meta property="og:title" content="XXXXXXX">
<meta property="og:url" content="https://xxx">
这样做的问题是,元标记对所有页面都是硬编码的......如何在应用中的不同网址上动态覆盖这些元标记。例如,对于如下所示的用户配置文件页面:
myapp.com/profiles/usernameX
如何让该网址返回特定的元标记?
你要找的库是 react-helmet
,一个 React 的文档主管。 react-helmet
可以管理对文档头的任何更改。例如,您可以在index.html
中放置meta
标签,但是一旦 React 组件在其<Helmet>
组件中呈现不同的meta
标签(react-helmet
如何管理 head(,来自index.html
的meta
标签将被覆盖。这种覆盖也发生在不同的 React 组件之间,子组件优先。
react-helmet
的一个很好的例子是在史岱文森旁观者的网站上:https://stuyspec.com(注意<title>
如何根据您所在的页面/文章而变化(。
如果你想要服务器端操作,你可以使用 Gatsby。Gatsby 是 React 的静态站点生成器,它有一个 react-helmet 包(gatsby-plugin-react-helmet
(。