GatsbyJSブログにSitemapを実装してGoogle Search Consoleに登録してみた

2020-09-22

Content

はじめに

おはようございます！こんにちは！こんばんは！
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です！！

せっかく独自ドメインを使用してブログをやっているからにはGoogle様に自身のサイトを認知してもらいたいですよね！！

ということで今回はGatsbyJSブログにSitemapを実装してGoogle Search Consoleに登録してみたので解説します！！

前提
Google Search Consoleとは？
Google Analyticsとの違いは？
パッケージのインストール
gatsby-config.jsの設定
ビルド
Google Search Consoleに登録
まとめ

前提

このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。

Google Search Consoleとは？

公式ページには以下のように記載されています。

Google Search Console は、Google 検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つ Google の無料サービスです。Search Console に登録しなくても Google 検索結果にサイトが表示されるようにすることはできますが、Search Console に登録することで、Google のサイトに対する認識を理解し、改善できるようになります。

Google Analyticsとの違いは？

自身のサイトを分析して改善するためのツールということは同じですが、違いがあります。

簡単に違いを説明するとGoogle Analyticsは自身のサイトにユーザーが入った後の分析に、Google Search Consoleは自身のサイトにユーザーが入る前の分析のために使うツールです。

Google Analyticsは、どのページを閲覧してどの経路でお問合せなどのゴールまでに辿りついたのかや、どのページがよく閲覧されていてどのページでユーザーが離脱しているのかなどを分析・検証できます。

Google Search Consoleは、検索結果から自分のサイトがどれくらい来ているか、検索結果ごとにどのくらいの順位なのか。自身のサイトが検索エンジンにどう見えているか、検索順位を下げる可能性がある問題が発生していないかなど分析・検証できます。

パッケージのインストール

今回はgatsby-plugin-sitemapを使って実装します。基本的には公式ページの内容通りやれば簡単にできます。

$npm install --save gatsby-plugin-sitemap

gatsby-config.jsの設定

gatsby-config.jsにインストールしたプラグインを設定します。

siteUrlは元々あったのでそのままですが、プラグインは適当な場所に追加します。

gatsby-config.js

module.exports = {
  siteMetadata: {
    url,
    siteUrl: `https://rpf-noblog.com/`,
  },
  plugins:[
      `gatsby-plugin-sitemap`
  ],
},

ビルド

このプラグインは、productionモードで実行したときにのみ出力を生成するので、サイトマップを確認したい場合は次のコマンドを実行します。

$gatsby build && gatsby serve

するとproductionモードで起動するので、localhost:8000/sitemap.xmlにアクセスして以下のように表示されればOKです。

確認できたところで、自分の場合はGitHubにpushすれば自動でNetlifyにデプロイされるので、pushして完了です。

Google Search Consoleに登録

次のGoogle Search Consoleに登録します。公式ページにアクセスすると次のような画面になります。

ドメインの方の入力欄にrpf-noblog.comを入力（自分のサイトのURLのドメイン部分）して続行します。

続いてドメインの所有権の確認があるのですが、自分の場合は何もしなくてもすぐに確認されました。Googleドメインを使っているからかはわかりませんが、確認されない場合は手順に沿って確認してください。

これでGoogle Search Consoleの登録は完了です。

最後にサイトマップを送信します。

以下のように新しいサイトマップの追加から自身のサイトのサイトマップのURLを入力して送信ボタンを押せば完了です。自分の場合はhttps://rpf-noblog.com/sitemap.xmlで送信しました。

次のように表示されていれば正常に処理されたということで設定は完了です。

まとめ

今回はGatsbyJSブログにSitemapを実装してGoogle Search Consoleに登録してみたので解説しました！！

せっかく独自ドメインを使用してブログをやっているからにはGoogle様に自身のサイトを認知してもらいたいですよね！！これでこのブログに来てくれる人が増えてくれればいいのですが・・・。

他にもGatsbyJSのブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。

最後まで見ていただきありがとうございます！！

Content[Close]