Question

我有一个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中还是没有了！我什至在导入一些仅从另一个模块导入并直接放入render方法（不在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

一切在开发和生产模式下都可以正常工作。我已经检查了所有可能的方法，例如importimg es6-shim，同构提取，url-搜索参数-polyfill，whatwg-fetch，但没有结果！我读过一些文章，说Google可能使用phantomjs渲染页面。我已经在网上（不是本地）亲自检查了带有phantomjs的页面，它显示并呈现得很好。我读过很多文章说，当我看到其他内容时，Google搜索和SPA没有问题！看来我应该改用SSR以获得更便捷的方式来确保拥有SEO友好页面。

Answer 1

我已经尝试了许多肮脏的黑客来改善客户端渲染网站的SEO，但最终SSR是唯一的选择。使用或使用Razzle（https://github.com/jaredpalmer/razzle）或Next.js（https://github.com/zeit/next.js/）制作自己的SSR项目

Google显示空白页时获取-Reactjs

1 个答案: