Question

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

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

我注意到，当我将跟踪数据发送给Google时，ajax尚未完成加载，我只发送新的网页网址而不是标题或我通过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解决方案，似乎无法找到任何相关的好例子？

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

Answer 1

在商店获取新数据并呈现后触发ga.pageview。

Answer 2

在反应中处理搜索引擎优化的适当方法是在服务器端使用React.renderToString进行异形渲染，以便任何搜索引擎都能看到页面处于完整状态，而不仅仅是谷歌的蜘蛛，并且仅在那些场合当你手动调用它时。

这是React的原始设计标准之一。

如何使反应应用程序SEO友好

2 个答案: