对于那些寻找它的NPM版本的人，有一个完整的库:

npm install --save react-document-meta

import React from 'react';
import DocumentMeta from 'react-document-meta';

class Example extends React.Component {
  render() {
    const meta = {
      title: 'Some Meta Title',
      description: 'I am a description, and I can create multiple tags',
      canonical: 'http://example.com/path/to/page',
      meta: {
        charset: 'utf-8',
        name: {
          keywords: 'react,meta,document,html,tags'
        }
      }
    };

    return (
      <div>
        <DocumentMeta {...meta} />
        <h1>Hello World!</h1>
      </div>
    );
  }
}

React.render(<Example />, document.getElementById('root'));

由于搜索引擎忽略了大多数javascript，因此您需要使搜索引擎能够使用标签而不使用Ajax进行抓取。使用href将每个选项卡设置为链接，以加载选中该选项卡的整个页面。然后页面可以在标签中包含该标题。

onclick事件处理程序仍然可以通过ajax为人类查看者加载页面。

要像大多数搜索引擎看到的那样查看页面，请关闭浏览器中的Javascript，并尝试使其具有这样的功能，即单击选项卡将加载选中的选项卡和正确的标题的页面。

如果你通过ajax加载，你想用Javascript动态地改变页面标题，那么做:

document.title = 'Put the new title here';

但是，搜索引擎不会看到javascript中所做的这个更改。

现代爬虫程序能够解析DOM中动态生成的内容，因此使用document。标题=…完全没问题。

使用文档。标题是如何在JavaScript中完成它，但这应该如何协助SEO?机器人通常不会在遍历页面时执行javascript代码。

更新:根据SearchEngineLand上的评论和参考 大多数网络爬虫将索引更新的标题。下面的答案是过时的，但代码仍然适用。

You can just do something like, document.title = "This is the new page title.";, but that would totally defeat the purpose of SEO. Most crawlers aren't going to support javascript in the first place, so they will take whatever is in the element as the page title. If you want this to be compatible with most of the important crawlers, you're going to need to actually change the title tag itself, which would involve reloading the page (PHP, or the like). You're not going to be able to get around that, if you want to change the page title in a way that a crawler can see.

也许你可以在一个字符串中加载你的标题上所有的选项卡标题，然后一旦你加载其中一个选项卡，通过javascript改变标题

首先把你的标题设置为

my app | description | contact | about us | 

一旦你加载一个标签运行:

document.title = "my app | tab title";