如何在旧的 React 站点中实现 react-helmet-async

Question

我有一个 client-side 呈现的 React 站点，我想为其实施 react-helmet-async 模块（版本 1.0.7）。

我在 React 应用中的情况：

/public/index.js:

<head>
    <title>My title in the index file</title>
    ...

所以对于某些页面，我希望有不同的页面标题。

尝试：

与示例 module provides 相比，我的 client-side React 存储库中没有 app.js 文件。因此，我所做的是将以下内容添加到我想要一个独特页面标题的页面中：

import { Helmet, HelmetProvider } from 'react-helmet-async';
render() {
    return (
        <div data-page="page11">
            <HelmetProvider>
                <Helmet>
                    <title>New title</title>
                </Helmet>
            </HelmetProvider>
            ... continues with what I already had in the render code block ...

结果：在网络浏览器的选项卡上，它在访问该特定页面时显示唯一的页面标题，而在其他页面显示通用页面标题。所以这很完美。 **但是，当我查看源代码时，它总是只包含通用页面标题；也在访问特定页面时。所以这不是我想要的（我正在为 SEO 实现独特的页面标题，我认为爬虫将从源代码中获取页面标题。）

我应该怎么做才能正确实现这个节点模块？

Answer 1

因为它是 client-side 渲染的 React 应用程序，而不是 server-side 渲染的，所以不可能更改源代码。它仅在 DOM 中发生变化。如果您想更改源代码以确保搜索引擎能够正确处理新标题，您别无选择，只能 pre-render / server-side 呈现 React 应用程序。

这里给出更完整的解释：https://github.com/nfl/react-helmet/issues/213

如何在旧的 React 站点中实现 react-helmet-async

How to implement react-helmet-async in old React site

javascript

node.js

express

reactjs

react-helmet