I am pretty new to react, and I have several pages I want to have different header content in. For instance, my index.js page has another title than my contact.js, and also meta information as well.

我是一个非常新的反应，我有几个页面，我想有不同的标题内容。例如，我的index.js页面有另一个标题，而不是我的联系人.js，还有元信息。

I thought I solved this problem by installing react-meta-tags, where I have put my content like this:

我以为我通过安装reaction-meta-tag解决了这个问题，我把我的内容放在这样的地方：

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>
        );
    }
}

However, this does not seem to work, even though a numerous of Google searches, people claimed that the Google bots were smart enough to catch this. You see, when I search up my own page on Google, it just displays my website URL (typically for websites with no title), and it also tells me that my website is not mobile friendly, which it is. And when I click the link, or go to my page directly - it shows up perfectly responsive.

然而，这似乎并不管用，尽管人们在谷歌上进行了大量搜索，但人们声称谷歌机器人足够聪明，能够捕捉到这一点。你看，当我在谷歌上搜索我自己的页面时，它只显示我的网站URL(通常是没有标题的网站)，它还告诉我，我的网站对移动设备不友好，但事实并非如此。当我点击链接，或者直接转到我的页面时，它会显示出完美的响应。

If I put this code in my index.html file, it all seems to work perfectly. The only problem I have then, is that I will only have one title, and the same keywords on all of my pages. How can I fix this?

如果我把这段代码放在我的index.html文件中，它似乎都能完美地工作。我唯一的问题是，我将只有一个标题，在我的所有页面上都有相同的关键字。我怎么才能解决这个问题呢？

I'm not sure, but I am pretty certain that this will hurt my SEO. Even though I have everything working, it doesn't really matter as long as Google doesn't recognize important content like the meta tags I have listed.

我不确定，但我相当肯定，这将损害我的搜索引擎优化。即使我一切正常，只要谷歌不识别像我列出的元标签这样的重要内容，那就没什么关系了。

React helmet is in my experience the better choice.
When it comes to SEO you should get all the data that crawlers care about to be rendered serverside. What you could do to speed up the troubleshooting is to view the page source of you page instead of the markup after all client-javascript has run. This way you can see your pages as the crawlers do and determine if the markup is correct.
Be aware of that search engines do not catch changes in your pages instantly, these pages need to be crawled and indexed before new changes are shown (this can take some time).

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