reactjs - 抓取 Google 显示空白页 - Reactjs
问题描述
我有一个 Reactjs (v.16.6.3) 页面,它的 SEO 对被 Google 索引很重要。因此,我使用 Fetch as Google 工具对其进行了检查,以了解 Google-bot 从该页面呈现的内容。但是,谷歌什么也没显示,只向我描绘了一个空白页面!我添加了 'babel-polyfill' 来满足 es6-es7-es8 的要求并使 google-bot 高兴,因为我在 ComponentDidMount 中使用了 async-await (es8) 方法(在此生命周期方法中加载异步数据)和其他方法。虽然也使用了流行的箭头功能,但结果在 Fetch as Google 中又是一无是处!我什至在导入一些仅从另一个模块导入并直接放入渲染方法(不在 componentDidMount 中)的平面数据(如下面我写的)时没有得到任何结果。我检查并发现它们存在于 main.chunk。
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
一切在开发和生产模式下都运行良好。我检查了所有可能的方法,例如 importimg es6-shim、isomorphic-fetch、url-search-params-polyfill、whatwg-fetch,但没有得到任何结果!我在一些文章中读到谷歌可能会使用 phantomjs 来渲染页面。我自己在网络上(不是本地)签出了带有 phantomjs 的页面,它显示和渲染得非常好。我读过很多文章说谷歌搜索和 SPA 没有问题,而我看到的是别的东西!看来我应该转向 SSR 以获得更方便的方式来确保拥有 SEO 友好的页面。
解决方案
我尝试了很多肮脏的技巧来改善客户端渲染网站的 SEO,但最终 SSR 是唯一的选择。使用或使用 Razzle ( https://github.com/jaredpalmer/razzle ) 或 Next.js ( https://github.com/zeit/next.js/ )制作您自己的 SSR 项目
推荐阅读
- c# - 操纵杆坐标
- c# - SQLite 日历周开始
- css - 为什么我不能在 Ruby on Rails 中不使用 !important 来更改 link_to 文本颜色?
- spring - 无法获取查询元数据 org.postgresql.util.PSQLException 的连接:连接尝试失败
- elixir - Elixir Mix 版本 - 如何将额外文件复制到 Phoenix 应用程序的压缩包中?
- php - 如何在laravel中foreach第二张表后使用联合
- reactjs - 如何在 React Modal 中应用断线?
- python - 从 Google Cloud Storage 加载保存的 CatBoost 模型 (.cbm)
- python - 如何在同一行中将进度条写入 Python 中的文件?
- substrate - 构建 PoE 去中心化应用程序基板教程错误:无法编译 `sp-arithmetic`