reactjs - 创建 react 应用程序和元数据

Question

我在一个纯粹面向客户的项目中，我一直在使用 create-react-app 来启动它，它似乎运行良好。

但是，我在理解 create-react-app 和 seo 时遇到了问题，而且我找不到任何关于两者如何齐头并进的相关文章。

项目正在进行中，目前在路由方面使用 react-router，在插入元数据方面使用 react-document-meta。

当我在浏览器和 Mozbar(SEO 工具栏)中检查页面元素时，我能够看到元数据和标题。但它不会出现在 google fetch 和 render 中——主要是脚本标签。

是不是因为meta data是在单独的component-render方法中加载的，所以google加载不出来？或者只是谷歌不理解码件中的标签？

这是我的一个 component.js 中的一个片段

const meta = {
    title: 'Testing 123',
    description: "Blah blah blah"
}

return (
    <div>
        <DocumentMeta {...meta} />
        <...elements>
    </div>
)

一些文章解决方案是在服务器渲染上渲染它。但这似乎真的很复杂，而且我对 react 还很陌生。

请指出正确的解决方案，或者是否有变通方法。

谢谢

Answer 1

我正在使用 react-helmet，链接:https://www.npmjs.com/package/react-helmet .它在我的通用 React 应用程序上运行得非常好，您可以查看 http://kompetisiindonesia.com然后查看源代码。