2025.05.19

[Gatsby.js] gatsby-plugin-canonical-urlsでcanonicalタグを生成する

Shuji
- Gatsby
- SEO
はじめに
Gatsbyで canonical タグを設置する最大の意義は、検索エンジンに「正規のURL」を明示し、SEOの評価を一元化することです。静的サイトであるGatsbyは、URLの構造が柔軟である反面、重複コンテンツとみなされやすい構成になりやすいため、明確な正規URLの指定が非常に重要になります。
以下のような例ではページが同一でもURLが違うため、Googleが別のページと認識し、SEOスコアが分散する可能性があります。
https://example.com/page
とhttps://example.com/page/
https://www.example.com/page
とhttps://example.com/page
https://example.com/page?ref=twitter
そのため、canonical タグで「このページの正規URLはこれです」と宣言する必要があります。
Gatsbyでの実装方法
次のプラグインのインストールします。
npm install gatsby-plugin-canonical-urls
設定
gatsby-config.jsで以下のように設定します。stripQueryStringはURLからクエリパラメータを除去して、検索エンジンが正規のURLを認識しやすくします。
{
resolve: "gatsby-plugin-canonical-urls",
options: {
siteUrl: "https://topaz-inc.dev",
stripQueryString: true,
},
},
これだけですべてのHTMLページに以下のようなタグがhead内に挿入されました。
<link rel="canonical" href="https://topaz-inc.dev" />
おわりに
gatsby-plugin-canonical-urls
は、Gatsby サイトのSEOを安定させ、検索エンジンにとって「信頼される構造」に整えるために非常に重要なプラグインと言えます。
その他の記事
Other Articles
FastAPI × React LeafletでGoogle Earth Engineの衛星データを扱う
Google Earth Engine で衛生データを表示する
DifyのワークフローをNode Cronで定期実行
Difyの外部ナレッジAPIでNotion APIのデータを取得
Dify × NotionでAIチャットボットを構築する
Gatsby × Tailwindcss × ダークモードでSEO対策
[Gatsby.js] gatsby-plugin-robots-txtでrobot.txtを生成する
[Gatsby.js] gatsby-plugin-sitemapでサイトマップを生成する
Difyのワークフローでスクレイピングしたデータを外部アプリへPOST
Difyの外部ナレッジAPIでRAGを拡張する
DifyとRemixの連携によるチャットボット構築
Remix × Vitest で Login API をテストする
GatsbyでGifを動作させる(TypeScript)
RemixでStripeを使った決済機能の導入