创建反应应用和元数据

Question

我是一个纯粹面向客户的项目，我一直在使用create-react-app来启动它，它似乎工作正常。

但是，我在使用seo理解create-react-app时遇到了问题，而且我找不到任何关于两者如何相辅相成的相关文章。

正在开发的项目目前正在使用react-router进行路由，react-document-meta用于插入元数据。

当我在浏览器中检查页面元素以及使用Mozbar（SEO工具栏）时，我能够看到元数据和标题。但它不会出现在谷歌提取和渲染 - 主要是脚本标签。

Isit是因为元数据是在个别组件渲染方法中加载的，因此谷歌无法加载它？或者只是谷歌不明白标签是否在组件中？

这是我的component.js

中的一个片段

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

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

一些文章解决方案是在服务器渲染上呈现它。但它似乎非常复杂，我很反应。

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

谢谢

Answer 1

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