ホーム

Google Search ConsoleにGatsby + Netlifyブログとサイトマップを登録する

導入

Google Search ConsoleにGatsby + Netlifyブログとサイトマップを登録していきます。

目次

  1. ブログをGoogle Search Consoleに登録する
  2. NetlifyにDNS設定を追加する
  3. ドメイン所有権の確認
  4. サイトマップの設定

    1. サイトマップの作成
    2. サイトマップの追加
    3. Google検索に引っかかることを確認
    4. サイトマップを読み込んでエラーになる場合

ブログをGoogle Search Consoleに登録する

Google Search Consoleにログインし、プロパティを追加します。 ここではプロパティタイプはドメインを選択します。

ScreenShot 2020-09-12 20.14.22.png

自ドメイン名を入力し、続行を押下します。

ScreenShot 2020-09-12 20.14.54.png

以下の画面が表示されます。
2 に記載されているDNS設定をコピーしてください。

ScreenShot 2020-09-12 20.16.57.png

NetlifyにDNS設定を追加する

Netlifyを開き、ドメイン設定の画面に遷移します。

ScreenShot 2020-09-12 21.07.42.png

Options > Go to DNS panel を押下してください。

ScreenShot 2020-09-12 21.07.51.png

DNS設定画面が開きます。

ScreenShot 2020-09-12 21.08.38.png

DNS settings > DNS records > Add new record を押下します。
入力フォームが表示されるので、Record typeにTXT、Valueに先ほどコピーしたDNS設定を入力し、saveを押下します。

ScreenShot 2020-09-12 21.09.24.png

DNS recordsに1行追加されるはずです。
これでNetlifyのDNS設定は完了です。

ScreenShot 2020-09-12 21.09.48.png

ドメイン所有権の確認

Google Search Consoleに戻り、確認ボタンを押下します。

下図のように「所有権を証明しました」と表示されれば成功です。
プロパティに移動を押下します。

ScreenShot 2020-09-12 21.34.14.png

設定画面が表示されます。
これでGoogle Search Consoleへの登録は完了です。

ScreenShot 2020-09-12 21.34.51.png

サイトマップの設定

続いてGoogle Search Consoleにサイトマップを登録していきます。

サイトマップの作成

私はgatsby-starter-lumenというテンプレートを使用していたため、最初からサイトマップが作成されていました。
サイトマップは自サイトのホームディレクトリ/sitemap.xmlで確認できます。
このブログであればhttps://engineer-ruirui.com/sitemap.xmlです。

もし存在しなければこちら等を参照に作成してください。

サイトマップを確認すると以下のような画面が表示されます。
ScreenShot 2020-09-12 22.21.13.png

サイトマップの追加

Google Search Consoleにサイトマップを追加します。
“新しいサイトマップの追加”にサイトマップのURLを入力し、送信を押下します。

ScreenShot 2020-09-12 21.47.39.png

正常の処理され、ステータスに「成功」と表示されていればOKです。

ScreenShot 2020-09-12 22.25.35.png

Google検索に引っかかることを確認

Google先生でsite:[自サイトのURL]を検索します。

サイトマップ追加直後では以下のような表示でした。
反映に時間がかかるかと思いますので、少し待ちます。

ScreenShot 2020-09-12 22.27.38.png

サイトマップを読み込んでエラーになる場合

以下のような読み取りエラーが出た場合、サイトマップの設定が正しく無い可能性があります。

ScreenShot 2020-09-12 22.03.36.png

サイトマップを確認すると、<loc>の値が自サイトのものではなく、テンプレートの値https://lumen.netlify.comとなっています。
これを自サイトのドメインとなるよう修正する必要があります。

ScreenShot 2020-09-12 21.45.02.png

修正箇所はテンプレート次第かもしれませんが、今回のgatsby-starter-lumenテンプレートの場合は、config.jsのURL設定を修正する必要があります。

・・・
module.exports = {
  //ここがデフォルトのままになっていたため、自サイトのドメインに修正
  url: 'https://engineer-ruirui.com/',
  pathPrefix: '/',
  title: 'R Blog',
  ・・・

修正後、npm run buildを実行し、sitemap.xmlを再作成します。

sitemap.xmlが更新されていることを確認し、再度Google Search Consoleにサイトマップを追加すると、ステータスが「成功」となります。