Gatsby.js SEO 対策におすすめのプラグイン

はじめに

この記事では、Gatsby.js で作成したサイトの SEO 対策におすすめのプラグインを紹介していきます。SEO そのものについての踏み込んだ話はしていませんので、ご了承下さい。

プラグインの使い方

Gatsby.js 公式プラグインページを参照し、拡張したい機能に応じて npm 経由でプラグインをインストールします。

npm install gatsby-plugin-xxx

npm 経由でインストールしたプラグインは、gatsby-config.js ファイルにそのプラグインで設定して初めて使用できます。プラグインの設定方法は主に 2 種類あります。

plugins: [...] 内にプラグインのみ設定
plugins: [...] 内にプラグインとその拡張機能を設定

gatsby-config.jsファイルの設定①プラグインのみ設定

module.exports = {
	siteMetadata: {
		// サイトの基本情報等の設定
	},
	plugins: [`gatsby-plugin-xxx`],};

gatsby-config.jsファイルの設定②プラグインとその拡張機能を設定

module.exports = {
	siteMetadata: {
		// サイトの基本情報等の設定
	},
	plugins: [		{			resolve: `gatsby-plugin-xxx`,			options: {        // プラグインの拡張を設定			},		},	],};

SEO 対策のプラグイン

gatsby-plugin-react-helmet

公式ドキュメント：gatsby-plugin-react-helmet

<head>...</head> 要素内のメタデータをコンポーネント化し、使いまわす事が出来ます。
react-helmet と一緒に使用する為、gatsby-plugin-react-helmet と react-helmet の両方をインストールします。

npm install gatsby-plugin-react-helmet react-helmet

module.exports = {
	plugins: [`gatsby-plugin-react-helmet`],
};

gatsby-plugin-sitemap

公式ドキュメント：gatsby-plugin-sitemap

作成したプロジェクトのサイトマップを生成します。

npm install gatsby-plugin-sitemap

module.exports = {
	plugins: [`gatsby-plugin-sitemap`],
};

gatsby-plugin-sitemap は4系からデフォルトの書き出しファイルが変わっているようです
4系以前は /sitemap.xml でしたが、 /sitemap/sitemap-0.xml になっています

生成されたサイトマップは、 /sitemap/sitemap-0.xml で確認出来ます。
サイトマップの生成はビルド後にしか確認できないので、そこだけ注意が必要です。

ビルド後の確認方法

gatsby build && gatsby serve
# http://localhost:9000/sitemap/sitemap-0.xml にアクセスし、確認できます。

デプロイ後のサイトマップは https://www.example.com/sitemap/sitemap-0.xml で確認できます。同様に、Google Serch Console にサイトマップを送信する際は、https://www.example.com/sitemap/sitemap-0.xml で送信します。

gatsby-plugin-robots-txt

公式ドキュメント：gatsby-plugin-robots-txt

作成したプロジェクトの robots.txt を作成します。

npm install gatsby-plugin-robots-txt

module.exports = {
	plugins: [
		{
			resolve: "gatsby-plugin-robots-txt",
			options: {
				host: "https://www.example.com",
				sitemap: "https://www.example.com/sitemap/sitemap-0.xml",
				policy: [{ userAgent: "*", allow: "/" }],
			},
		},
	],
};

gatsby-plugin-canonical-urls

公式ドキュメント：gatsby-plugin-canonical-urls

生成された HTML ファイルの正規リンクを定義します。

npm install gatsby-plugin-canonical-urls

module.exports = {
	plugins: [
		{
			resolve: `gatsby-plugin-canonical-urls`,
			options: {
				siteUrl: `https://www.example.com`,
			},
		},
	],
};