もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

百人一首を暗記するサイトをGatsby.jsに乗せてNetlifyで公開した

ここ最近やってた作業がきりのいいところまで終わったのでログ代わりのブログです。もともとピュアなSPAとして作っていたものをGatsbyに乗せて静的化しました。コアのゲーム部分は以前と変わらずSPAとして動きますが、Googleにインデックスさせる部分は実体のHTMLがちゃんと存在する状態になっています。

作ったもの

hyakuninanki.net

前のバージョンの問題点

  • SEOで事故る
    • 最近のGoogle先生BotはJSによるレンダリング後のページを見てくれてるっぽくて、SearchConsoleでFetch as Googleしてちゃんと表示されたし、インデックスにも乗ったので放っておいたのですが、ある時点で検索結果から消滅してキャッシュを見ると真っ白なページになっていました。おそらくレンダリングがされずに空のページが登録されたのだろうというところです。レスポンス自体は常時200返してますしね。
  • アドセンスの審査に落ちる
    • 直接関係があるかは謎ですが、前の状態だとコンテンツ不足と言われ、リメイクした後だとすんなり審査がおりました。

コメント

  • だいたい調べたいことはGatsbyを検証したときに終わっていたので、ページレベルのComponentを多少作り変えるのと画像類の参照をGatsbyの仕組みに載せ替えるくらいで割とすんなり移行できました。もともとReact + TypeScript + styled-componentsで作ってたのでコアな部分は割とそのままですね。今のところ、SPA作るときはこの組み合わせで満足してます。
  • コードはいつもどおりポートフォリオ代わりに公開してます。

GitHub - rei-m/web_hyakuninisshu

参考

去年公開した時の記事

rei19.hatenablog.com

事前の素振りとして検証した記事

rei19.hatenablog.com

Androidアプリ版もあるよの記事

rei19.hatenablog.com