Gatsbyでゼロからサイトを作った際に行った、SEOをまとめました。
Gatsbyはプラグインが豊富なので、大体のことはプラグインを使って機能を追加できます。自分で管理する必要がないので簡単ですね。
metaタグ
Gatsbyではmetaタグを設定するにはgatsby-plugin-react-helmetを使うと便利です。
(https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/)
このプラグインを使用すると言語設定、タイトル、metaタグなど、HTMLのheadの管理を行うことができます。
Googleアナリティクス
Googleが提供するアクセス解析ツールです。
現在Googleアナリティクスには
- ユニバーサルアナリティクス
- Googleアナリティクス4
の2つのバージョンが存在しており、どちらを使うかによってGatsbyでの対応も異なるため注意が必要です。
ユニバーサルアナリティクス
一世代前のGoogleアナリティクスとされています。
これを利用する場合にはgatsby-plugin-google-analyticsを使用します。(https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/)
トラッキングIDはUA-ではじまります。
Googleアナリティクス4
去年の11月に発表された次世代のGoogleアナリティクスとされています。ウェブサイト以外にアプリにも対応しているみたいです。これから新しく始める方はこちらを使っておけば問題ないかと。
これを利用する場合にはgatsby-plugin-google-gtagを使用します。(https://www.gatsbyjs.com/plugins/gatsby-plugin-google-gtag/)
トラッキングIDはG-ではじまります。
Google Search Console
Google検索エンジンのインデックス状況や検索パフォーマンスなどを確認できます。
Googleアナリティクスを設定していると、サイトの所有権の確認を省略できるので便利です。
サイトマップ
Gastbyでサイトマップを作成するにはgatsby-plugin-sitemapが簡単です。(https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/)
Gastbyで生成するURLのサイトマップを自動で生成してくれます。
サイトマップをGoogle Search Consleから追加しておけば、Googleからのクロールを期待できます。