5
2

More than 3 years have passed since last update.

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

Posted at

はじめに

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を打ち込んで送信ボタンをクリックします。

まとめ

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

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2