为什么Google不索引我的AJAX获取的内容？
我有一个使用ReactJS构建的网站，我试图在componentDidMount方法中添加一个使用AJAX获取数据的新页面。
该页面有一些静态组件，例如导航条和页脚，它在获取数据之前显示一个加载程序，但奇怪的是，当我提交url作为Google进行抓取时，它显示的是一个完全空白的页面。
对我来说，这似乎很奇怪，因为我预期如果Google不等待我的AJAX调用的返回，它至少应该向我展示作为Google结果的Fetch中的导航条、脚注和加载程序。
这就是密码：
import React from 'react';
import axios from 'axios';
import CustomLoader from './CustomLoader';
import AppBar from './AppBar';
export default class GamePage extends React.Component{
constructor(){
super();
this.state={loading:true,description:''};
}
componentDidMount(){
axios.get(`/someinternalAPI`).then((response)=>{
this.setState({description:response.data,loading:false});
});
}
render(){
return(<div>
<AppBar />
{this.state.loading ? <CustomLoader /> : this.state.description}
</div>);
}
}回答 2
Stack Overflow用户
发布于 2017-08-29 17:52:21
最后我自己解决了这个问题，如果别人有这个问题的话，就把它发出去吧(我相信有些人会这样做)。
我所做的是检查window.location.href在调用ReactDOM.render之前是否匹配有此问题的页面，如果匹配，则获取数据并保存数据，然后调用ReactDOM.render。
我还向页面组件添加了一个函数，该函数检查数据是否已被获取，如果没有，它将获取数据--如果页面是站点上加载的第一个页面(这是搜索引擎爬虫访问页面的方式)，则在ReactDOM.render之前获取数据(这是搜索引擎爬虫访问页面的方式)，如果页面在初始应用程序加载后被访问(这是人类用户访问页面的主要方式)，则通过页面的componentWillMount函数动态获取数据。
更新:我已经发布了一个解决这个问题的npm包。您可以在这里查看：https://github.com/DRYuval/react-seo。
Stack Overflow用户
发布于 2017-08-29 11:57:14
简单地说，Google的爬虫不解析动态内容。
好的做法是确保动态加载的内容也可以在静态链接上访问，所以当您导航到“yourwebsite.com/page1 1”时，它至少应该显示通常加载了axios的静态文本，这样爬虫就可以知道您的网站/应用程序上的内容。
进一步的解决办法将是利用服务器端呈现，这是搜索引擎优化友好，并解决问题，如你，因为它预先在服务器端的所有内容和网站本身，并提供完整的网站。
https://stackoverflow.com/questions/45936969
复制相似问题
腾讯云开发者
