サーバーサイドレンダリングしないReact SPAのSEO
Googleの検索対象になって、React SPAの本文部分を検索できるようにしたい。
そういう場合はrequire('babel-polyfill')だけで十分
するとこうなる
https://gyazo.com/f6b4198ef427529b86df377d5a22e8f6
以上でした。
追記：babel-polyfillももう必要ないshokai.icon
2018年ごろ、Googleのクローラが更新された
普通にwebpackと@babel/preset-envで"last 2 versions", "Safari 10"をターゲットにしてビルドしているだけ
2019年の間、この話題についてはもう全く議論の余地は無いと思っていたので追っていなかった
現在2020年11月
何もしてないのに3位から2位に上ってた
https://gyazo.com/ff6294fd63216b4fa505f6cb67e8c637
何もしてないのに上がるわけだから、やはりSSRは必須ではないと思う
やや詳しく
要求
ReactのSPAでもGoogleに読ませたい
専門的なSEO、つまり検索結果で1位になる方法とかは知らない
普通にクロール対象に入って、本文を認識してもらって、そこを検索できるようにしたい
Google botのJavaScriptエンジンが古い
今年(2017年)3月ごろにGoogle Search Consoleで、Cosenseがどのように解釈されているのか調べた
結果
Reactがレンダリングされてなかった
理由がわからない
Google botが見たスクリーンショットしか見えないので、エラーが見えない
エラー究明
未キャッチのエラーはstacktraceを全て画面に表示するようにした
参考: Tracking unhandled rejected Promises
code:print-all-error.js
window.addEventListener('unhandledrejection', reason => {
console.error('Unhandled Rejection', reason) // これをconsoleではなくHTMLに表示する
})
rakusai.iconが思いついて一瞬でやってくれた
原因わかった
Array.prototype.includesとか、色々なメソッドが無い
Google botはだいたいChrome v45あたりよりちょっと前を使っているようだ
browserstackで古いchromeでのエラーと比べて、だいたいv45ぐらいだと思った
なんかしょうもないエラーばっかりで、React自体はレンダリングしてくれていた
Google bot側に色々なJavaScriptの関数が欠けているだけだった
babel-polyfillを食わせる
普通にbrowserify/webpackする時にbundleしてもいい
今回はCDNから読ませることにした
Google botがReactのレンダリング成功した！！
ちゃんと普通にReactでHTML書いてたら、Googleが本文を認識してくれて、検索結果にでてくるようになった
Aタグも辿って全ページ見て回ってくれてる
clickしたらpushStateで移動するだけではなく、Aタグも付けておいてよかった
<a onClick={e => e.preventDefault()} href="path/to/page">link</a>みたいにする
CSSのhoverで表示切り替えている部分が出ちゃってるの直したい
行毎の更新時刻の部分
https://gyazo.com/02438b894f3910d02af9420709821e1e
CSS hoverじゃなくReactで、mouseoverした時だけDOMに出すように修正すれば消えるはず
直った(2018/1/23)
https://gyazo.com/2e9b735e917fded07c1bd251158f1f2a
OGPやTwitter Card
これはサーバーサイドレンダリングするしかない
普通にSPAのHTMLの<head>とかに書く
ここもReactで書くなら
サーバーがexpressならexpress-react-views
koaならkoa-react-view
を使うと良い
RSS
これはサーバーサイドレンダリングするしかない
SPAのサーバーサイドレンダリングの意義
どうしてもファーストビューを高速化したいなら、まあやってもいいのでは？
でも実装に縛りができて難しくなるので、開発速度は確実に低下する
今後作る全てのReactコンポーネントが、初期stateからのpropsバケツリレーできっちり表示できるようにやる必要がある
できなければ、サーバーエラーになる
renderToStringは引数1つしかないので、下の方のどこかの子コンポーネントでエラー起きたら止まる
そこだけ例外扱いにして、renderできた部分だけ出す方法は無い
React16から子コンポーネントのエラーを親でcatchできるようになるらしい
これでなんとかなるかもしれない？shokai.icon
俺はsemiraraでサーバーサイドレンダリングやって懲りたshokai.icon
CPUも消費する
renderToString自体はそこまで重い物ではないと思うが
これまでclient数で分散されていた処理を、こちらのserverで一手に引き受ける事になるわけで
母数が多いと塵が積もってしまう
それでいいならやればいい
ファーストビューの速度より優先する物が無いならやれば良いと思う
単にググって出たいだけならbabel-polyfillでも食わせておけ