У меня есть страница Reactjs (v.16.6.3), которую важно оптимизировать для SEO. Поэтому я проверил это с помощью Fetch как инструмента Google, чтобы узнать, что Google-бот отображает на этой странице.
Тем не менее, Google ничего не показывает и отображает только пустую страницу для меня!
Я добавил «babel-polyfill», чтобы выполнить требование es6-es7-es8 и сделать google-bot счастливым, так как я использовал подход async-await (es8) в ComponentDidMount (для загрузки асинхронных данных в этом методе жизненного цикла) и других методов. Также были использованы популярные функции стрелок, и результат снова в Fetch as 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 и не получил никакого результата! Я читал в одной статье, что Google может использовать phantomjs для отображения страницы. Я проверил страницу с phantomjs самостоятельно в Интернете (не локально), и он показывает и отображает отлично. Я прочитал много статей о том, что нет проблем с поиском Google и SPA, пока я вижу что-то еще! Кажется, я должен перейти на SSR для более удобного способа обеспечить SEO-дружественную страницу.