不同页面中的ReactJS header标签

Question

我对 React 还很陌生，我有几个页面想要有不同的标题内容。例如，我的 index.js 页面有另一个标题而不是 contact.js，还有元信息。

我以为我通过安装react-meta-tags解决了这个问题，我在其中放置了这样的内容：

class Index extends React.Component {
    render() {
        return( 
            <div>
                <MetaTags>
                <title></title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1"/>
                <meta name="copyright" content="" />
                <meta name="robots" content="index,follow" />
                <meta name="author" content="" />
                <meta name="description" content="" />
                <meta name="keywords" content="" />
                </MetaTags>
                <Header/>
                <Experience/>
                <Projects/>
                <Contact/>
                <Footer/>
            </div>
        );
    }
}

然而，这似乎不起作用，尽管大量的谷歌搜索，人们声称谷歌机器人足够聪明，能够捕捉到这一点。你看，当我在 Google 上搜索我自己的页面时，它只显示我的网站 URL（通常是没有标题的网站），而且它还告诉我我的网站不适合移动设备，事实确实如此。当我单击链接或直接转到我的页面时 - 它显示出完美的响应能力。

如果我将此代码放入我的index.html 文件中，一切似乎都可以完美运行。我遇到的唯一问题是我的所有页面上只有一个标题和相同的关键字。我怎样才能解决这个问题？

我不确定，但我很确定这会损害我的搜索引擎优化。即使我一切正常，只要 Google 无法识别我列出的元标记等重要内容，这并不重要。

Answer 1

根据我的经验，React 头盔是更好的选择。 当涉及到 SEO 时，您应该获取爬虫关心的所有数据并在服务器端呈现。为了加快故障排除速度，您可以做的是在所有客户端 JavaScript 运行后查看页面的页面源而不是标记。这样您就可以像爬虫一样查看您的页面并确定标记是否正确。 请注意，搜索引擎不会立即捕获页面中的更改，在显示新更改之前需要对这些页面进行爬网和索引（这可能需要一些时间）。