不同页面中的ReactJS标头标记

Question

我很反应，我有几个页面我希望有不同的标题内容。例如，我的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没有识别出我列出的元标记等重要内容，它就不重要了。