Question

我正在使用SEO的react snap。

这就是我所做的。

我在我的React应用程序中将以下内容添加到index.js

import React from 'react';
import { hydrate, render } from "react-dom";

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
} else {
    render(<App />, rootElement);
}

然后我将以下内容添加到package.json

"postbuild": "react-snap"

当我运行npm run build并在页面上执行“查看源代码”时，没有看到页面所需的实时元描述和标题。

我在做什么错了？

这是我设置元标记的方法。

在BookDetail.jsx

import {Helmet} from "react-helmet";
<Helmet>
    <meta charSet="utf-8" />
    <title>{this.state.book.title} by {this.state.book.author} | Sumizeit</title>
    <meta name="description" content={this.state.book.desc}/>
</Helmet>

Answer 1

不要使用react-snap只是将其更改为next.js（react-snap的问题很多：受保护的路由刷新错误，构建时间没有笑话，内联css）...顺便说一句，您的代码没有错

对SEO使用react-snap

1 个答案: