如何使 React 应用程序 SEO 友好答案

【问题标题】：How to make react application SEO friendly如何使 React 应用程序 SEO 友好
【发布时间】：2015-08-31 14:35:18
【问题描述】：

如果我想使用 Google 分析，同时在 React 中使我的网站 SEO 友好，那么最好的方法是什么？

目前我使用 react-router 和 Flux 模式来更改路由，然后在 componentDidMount 中触发一个操作，通过 ajax 加载我的数据，然后更新发出更改的存储，最后我重新渲染受影响的组件。在 ajax 加载期间，我调度了一个事件，以便我的商店知道 ajax 正在加载并在我的组件中呈现一个微调器。

我注意到，当我将跟踪数据发送到 Google 时，ajax 尚未完成加载，我只发送新页面 URL，而不是标题或我通过 ajax 加载的任何其他数据（我想这对 SEO 来说很糟糕观点，这对我的 GA 数据肯定是不利的）。

这是我的 GA 设置（我使用 react-ga）：

Router.run(routes, Router.HistoryLocation, function(Handler, state) {
    ga.pageview(state.pathname);
    React.render(<Handler />, document.body);
});

典型的组件设置（允许我根据 URL 呈现正确的数据）：

componentDidMount: function() {
    ItemStore.addChangeListener(this._onChange);

    if(itemSlug) {
        ItemActions.loadItemBySlug(this.props.slug);
    }
}

如果可能的话，我希望能够进行单点 GA 跟踪。我还希望页面的 SEO 处理正确：

页面标题
OG 数据
H1
等等...

解决这个问题的最佳方法是什么？

我应该为此使用 react-router 中的 willTransitionTo 选项吗？（如果我选择此解决方案，是否可以使用加载微调器？）

statics: {
    willTransitionTo: function (transition, params, query, callback) {
        // LOAD AJAX HERE ?
        callback();
    }
}

我将如何以适当的方式解决 willTransistionTo 解决方案，似乎找不到任何相关的好例子？

我应该添加更多代码，还是清楚我想要实现的目标？

【问题讨论】：

标签： google-analytics seo reactjs react-router

【解决方案1】：

商店获取新数据并渲染后触发ga.pageview。

【讨论】：

【解决方案2】：

在 react 中处理 SEO 的适当方法是在服务器端与React.renderToString 同构呈现，这样任何搜索引擎都会看到完整状态的页面，而不仅仅是谷歌的蜘蛛，而且只有在你手动调用它。

这是 React 最初的设计标准之一。

【讨论】：