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

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を安定させ、検索エンジンにとって「信頼される構造」に整えるために非常に重要なプラグインと言えます。