at backyard

Color my life with the chaos of trouble.

【サイトのSEO対策】GatsbyJSで作ったサイトの検索流入が伸び悩んでいて色々と対策してみた話

f:id:shinshin86:20210426095135p:plain

目次

最初に結論

文章が長くなりそうなので最初に結論を述べておく。

  • Gatsby自体が悪いわけではなかった。
  • そのサイトのSEOの方向性自体が間違っていたというだけ。
    • 要は競合が強すぎるワードで検索インデックスに載せようとしてた(そのせいで検索順位が90位代を常にフラフラするはめになっていた...)
  • サイトの検索流入に結びつける検索ワードの見直しと、流入のためのページを作成することで、当日中にGoogleの検索インデックスに載ったことを確認
  • どれぐらい検索流入が伸びていくかは今後監視していく
  • もちろん、適切なSEO対策を施していることがここでは前提となっている。

なお、ここでは扱っているサイトの具体的な名前はこのポスト内では出していない。
別に個人的なサイトだから出してもいいのだが、単純に現在行っている施策のみでどれぐらいSEO効果が現れるかを検証したい気持ちがあるので、出さないようにしている。
(意外とこのブログもアクセスが増えてきたためか、リンクを貼ることによってSEOに影響が現れるようなことが何度かあった。一応そういう要素は除外したい)

GatsbyJSで作ったサイトの検索流入が伸び悩んでいる

GatsbyJSで作成したサイトの検索流入が伸び悩んでいたので、この土日は色々と対策を考えて実践していた。
土日の半分はGatsbyでできていたようなもので、ひたすらSEO対策のことを考えながらJavaScriptのコードをいじっていた。

そもそも自身が作成しているGatsby製のサイトで、検索流入を意識したサイトというのはまだそれほどないのだが、他のサイトに比べるといかんせん検索流入数が少ない...

それなりに検証も行ってみたが、私自身が作成している AMP対応のサイトを簡単に素早く作成できる Habanero Bee のほうが、Googleの検索インデックスに載るスピードは早いように感じた(あくまで個人の体感)

そんなこともあり、もしかしてGatsbyは実はSEOに弱いのでは?という嫌な予感にここ最近支配されていた。

先に行っておくと、私はGatsbyは好きで、とても便利なツールだと思っている。

WordPressのようにプラグインを追加していくことで欲しい機能も追加できるし、細かいところでカスタマイズしたければ直接コードをいじっていけるところも魅力的だ。
また静的サイトとしてホスティングできるので、Netlifyの無料プランなどで利用すれば、WordPressのように毎月のサーバ台が発生しないのも魅力的。
セキュリティ面でもリスクが少ないので、私としてはGatsbyJSはとても便利なツールだと思っている。

なのだが、、、SEOが弱いのは結構致命的である。

似たようなことを書いている人はいないかと検索してみたが、SEO絡みのキーワードでGatsbyを検索してみても、サイトマップの作成やOGPの設定、サイトの表示スピード向上に関する話など、テクニック的な部分が多く、今回自分が欲しい情報というのは少なかった。

なお、このサイトではサイトマップの作成やOGPの設定などについてはすべて実施済みである。

f:id:shinshin86:20210426100927p:plain
サイトのトップページを Lighthouse で分析した際のキャプチャ

パフォーマンスチューニングも実施済みで、上の画像が Lighthouse の結果となる。
これはサイトのトップページを分析したものだが、トップページにはそれなりに画像やコンテンツが用意されており、結構縦長のページになっている。
が、それでもこのスコアが出るのは、やはりGtasbyすごいと言わざるおえない。

さて、このような形で最低限のSEO対策は実施しているのだが、ほとんど検索流入が来ない。どころかGoogle Search Consoleで確認しても、Googleの検索結果にインデックス自体がされていないような状況だった。
(インデックス自体がされていないというのは語弊があるので、もう少し詳しく書くと、一応ページのインデックス自体はされているものの、検索ワードで検索結果に表示されている数が少なすぎる。Google Search Consoleを見ると、狙ったワードで検索結果に表示すらされていない、という状況なのだ)

問題の原因は、そもそも狙うべき検索ワードにあった

このような状況でかなり思い悩んでいたのだが、そもそもSEOの大前提として、どのワードで検索流入を狙うか?という基本的な部分に立ち返って考えてみたところ、このサイトで検索流入を狙いたい検索ワードが、競合が多く、しかも企業がガッツリ作っているようなサイトばかりだったのである。

単純に競合が多く、かつ強いので検索結果の上位に出てこないだけでは...?

そんな思いが頭をよぎり、早速検索ワード見直しの作業に入る。

検索キーワードに競合が多い場合は、流入対象とするキーワードをずらすようにする

ここでは例として、仮に狙っている検索ワードを レンジで簡単に作れる時短飯 とする。
レンジで簡単に作れる時短飯の情報を集めたサイトだ。

ただし、このようなワードにもし競合が多く、かつどれも強い方々だった場合、このワードを狙ったコンテンツを作成しても、しがない個人サイトでは検索順位的には勝てる可能性は限りなく低い。

そこでキーワードをずらすようにする。例えば下記のようなキーワードを検討する。
(これはあくまで例なので、これらのキーワードが実際に有効かは分かりません)

  • レンジ調理を行っても栄養素は壊れない?
  • レンジをきれいに保つための、簡単なレンジの掃除方法
  • 時間が足りない人に送る、簡単タスク管理
  • 帰宅後すぐにレンチンご飯できる、作り置きレシピ集
  • レンチンだけで食べれるおすすめのレトルト食品

このように レンジで簡単に作れる時短飯 で検索してきそうなユーザが興味を持ちそうなワードを次々と出していき、その中で検索順位で上位に出せそうなワードでコンテンツを作っていくことを、検索キーワードずらし術という。(→ 今、私が命名しました)

これらのワードで検索流入があれば、本命コンテンツである レンジで簡単に作れる時短飯 に対してもリンクを貼るなどして紹介ができる。
例えば、レンジ調理を行っても栄養素は壊れないかを確認したい人は、レンジ調理を行いたいと考えている人だろうから、レンジで作れる時短飯にも興味がある可能性が高い。

このようにして検索流入を狙いたいワードに関連しそうなワードで、流入のための口を新たに設けることで、結果的に検索流入の総数を増やしていくことができる。

この手法を、自身のGatsbyサイトにも適用することにした。

新たに検索キーワードを設け、その検索キーワードの流入を狙うためにブログ記事を作成した。

ちなみにそのGatsbyサイトにはブログ機能がなかったため、急遽ブログ機能を実装した。

といっても、提供されているプラグインなどを組み合わせて利用し、少しだけ内部の実装を修正することで、この土日の間でブログ機能の実装は完了できた。
目次機能もつけたし、ブログ記事をカテゴリー分けする機能も実装し、カテゴリーごとのページが自動生成されるようにもした。

また、ブログ部分のページ構成については下記のように、各ページからそれぞれのページに移動できるような流れも意識した。

f:id:shinshin86:20210426104754p:plain
サイト内の構成。赤矢印部分が今回の流入の肝となる予定。

この画像の赤矢印の部分が、今回の対策での肝となる、サイトコンテンツへの新たな流入の口となる。

SEO対策の結果

まだ日にちが経っていないので、実際の効果を判定できるのは後々となるだろうが、今のところは新たに作成したブログ記事に関しては、狙ったワードで検索にヒットし始めている。
なお、検索順位は10位~20位代あたりにいる感じだ。

今後ブログ記事を増やしていくことで、この検索順位をどれぐらい上げているかが肝だと思うし、また、本命のコンテンツへの流入にどれぐらい貢献できるかも楽しみである。

いずれにせよ、SEO結果が微妙だった原因がGatsbyではなかったのは本当に良かった。

というか、完全に自分のせいです。Gatsbyさん、疑ってごめんなさい。。。