谷歌正在显示空白页 - Reactjs
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谷歌正在显示空白页 - Reactjs相关的知识,希望对你有一定的参考价值。
我有一个Reactjs(v.16.6.3)页面,其搜索引擎优化对于由Google编制索引非常重要。因此,我使用Fetch as Google工具进行了检查,以了解Google-bot从此页面呈现的内容。但是,Google没有显示任何内容,只向我描述了一个空白页面!我添加了'babel-polyfill'来满足es6-es7-es8的要求,并让google-bot高兴,因为我在ComponentDidMount中使用了async-await(es8)方法(在这个生命周期方法中加载异步数据)和其他方法。此外,还使用了流行的箭头功能,结果在Google再次获取Google中没有任何结果!我甚至在导入一些平面数据时没有得到任何结果(如下所述),它只从另一个模块导入并直接放到渲染方法(不在componentDidMount中)。我检查过并发现它们存在于main.chunk.js中,Google应该阅读并充分渲染它们但没有任何反应!
export const sampleData01= [
{name: sampleName01,
lastName: sampleLastName01,
image: sampleImage01
},
{name: sampleName02,
lastName: sampleLastName02,
image: sampleImage02
}
]
export const anotherData02= [
{name: anotherName01,
lastName: anotherLastName01,
image: anotherImage01
},
{name: anotherName02,
lastName: anotherLastName02,
image: anotherImage02
}
]
-----------
import React, {Component} from 'react'
import {sampleData01} from './tempData'
import Helmet from "react-helmet";
class SampleClass extends Component {
state = {...something , loading:false}
async componentDidMount = ()=> {
this.setState({loading:true})
...await fetch something
this.setState({loading:false})
}
}
render(){
const data = sampleData01.map(item => {
<li>
{item.name}
</li>
}
return (
<div className="...">
<Loading loading={this.state.loading}/>
<div className="...">
<Helmet link={....} title={....} meta={....} />
<ul>
{data}
</ul>
</div>
</div>
)
}
export default SampleClass
eveything在开发和生产模式下都能正常工作。我已经检查了所有可能的方法,例如importimg es6-shim,isomorphic-fetch,url-search-params-polyfill,whatwg-fetch并且没有结果!我在一些文章中读到谷歌可能会使用phantomjs来渲染页面。我已经在网上(非本地)用我自己的phantomjs检查了页面,它显示并呈现完美。我看过很多文章说谷歌搜索和SPA没有问题,而我正在看到别的东西!我似乎应该转向SSR以更方便的方式来确保拥有SEO友好页面。
我已经尝试过这么多脏黑客来改善客户端渲染网站的搜索引擎优化,但最终SSR是唯一的选择。使用或使用Razzle(https://github.com/jaredpalmer/razzle)或Next.js(https://github.com/zeit/next.js/)制作您自己的SSR项目
以上是关于谷歌正在显示空白页 - Reactjs的主要内容,如果未能解决你的问题,请参考以下文章