1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Gatsby.jsでサイトマップを作成する

はじめに

Gatsby.jsでサイトマップを作成し、Search Consoleに登録する方法をまとめます。

Gatsby.jsはプラグインが豊富にありますので、そちらを使用します。

プラグインのインストール

gatsby-plugin-sitemapという公式推奨?のプラグインがあります。
Gatsbyの公式ドキュメントへ

npmもしくはyarnでインストールします。

npm install --save gatsby-plugin-sitemap

yarn add gatsby-plugin-sitemap

gatsby-config.jsに追加

Gatsbyでは、基本的にプラグインを追加するときにはgatsby-config.jsに記述します。

// In your gatsby-config.js
siteMetadata: {
  siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]

ビルドすると起動する

ビルド時に自動で起動し、publicフォルダ内にサイトマップファイルを生成してくれます。
試しにビルド&サーブしてみましょう。

gatsby build && serve

Google Search Consoleに送信

サイトマップが生成されたら、サーチコンソールに送信しましょう。

サイトマップはpublicフォルダ直下に生成されますので、サイトURL+sitemap.xmlでアクセスすることができます。

https://www.example.com/sitemap.xml

スクリーンショット 2020-01-15 17.07.38.png

サーチコンソールにURLを打ち込んで送信ボタンをクリックします。

まとめ

簡単にサイトマップを自動で生成することができました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?