SEOに大きな影響あり?!canonicalタグの正体を暴いてみた

HTML

職業訓練校を出てコーダーになったとき、自習でも見たことがなく、習ったこともないタグと出会いました。
それは「canonical(カノニカル)」タグです。

コーダーになってから数日も経たぬうちに出会い、まったく聞いたことのないタグの名前に

葵

何これ??初めて見たぞ…

となりました。

教科書にも載っていなかったこのタグ。
その正体を暴くべく調べてみると、どうやらSEOの観点で必要なタグらしいとのこと。

SEOとは・・・検索エンジン最適化。自サイトを検索結果の上位に出すための施策のことです。

ということで、今日はcanonicalタグについて調査したいと思います。

スポンサーリンク

canonicalの役割?「URL正規化」とは?

canonicalタグを調べると、必ず出会う言葉があります。
それは「URL正規化」という言葉です。

URL正規化とは、検索エンジンに対して「このサイトの正規なURLはこれですよ~」と伝えることです。
この情報をうまく検索エンジンに伝えられていないと、場合によっては大きなアクセスの低下を招く可能性があります。

葵

でもふつう、URLって1つなんじゃないの?わざわざ正規なURLを伝える必要性って?

という疑問がわいたので、それも合わせて調べていきます。
URL正規化が必要なのは、どういったときなのでしょうか。

URLの正規化が必要なタイミング・状況とは?

URLの正規化が必要になるのは、コンテンツ内容が(ほとんど)同じページが異なるURLで存在している場合です。

実は複数のURLで同じコンテンツのページが存在することはあり得ます。
たとえば、以下のような場合が考えられます。

  • 「https」と「http」それぞれのURLで存在している
    https://samplesite.com/
    http://samplesite.com/
  • 「www」が付くものと付かないものが存在している
    https://www.samplesite.com/
    https://samplesite.com/
  • ショッピングサイトなどで、ひとつの商品をカラーごとに別ページにしているとき(画像だけが違う等)
    (例:靴の販売ページで、赤と白のカラーごとにページを分けている場合)
    https://shoppingsite.com/coolshoes/red.html
    https://shoppingsite.com/coolshoes/white.html
    ※コンテンツの内容は同じで、画像だけ赤い靴と白い靴で違っている
  • PC版とスマホ版でURLが分かれているとき
    https://www.samplesite.com/pc/index.html
    https://www.samplesite.com/sp/index.html
上記の例に記載したURLは、すべて架空です

3つめのショッピングサイトの例は見かけますね。カラバリごとに画像だけ色の違うものが挿入されていて、ほかのコンテンツは全く同じという作りのページです。

4つめの「PCとスマホでURLを分ける」については、最近はメディアクエリで表示を分けるのが主流になっているので、少なくなってきている例かもしれませんね。

なぜURLの正規化が必要なのか?

URLの正規化がされていない場合、何が問題になってくるのでしょうか。

一番大きいのはSEO上の問題です。
コンテンツ内容がまったく同じページであっても、URLが一文字でも違えば、コンピュータにとっては別ページとしての認識になります。

コンピュータは、人間の目のように「同じコンテンツが並んでいれば同じページだ!」とはならないわけです。
そうなると、同じ内容なのに検索順位の重要度が分散されてしまうことになります。
同じ重要度で重複コンテンツと見なされてしまうと検索順位が大きく下がります。
そうすると、どちらのページも検索結果に表示されなくなり、検索流入からのアクセスを集めることができなくなってしまいます。

例えるなら、同じチェーンのコンビニが2軒隣り合っていると考えてみてください。
売り上げが分散されて、片方もしくは両方のお店の売り上げが下がってしまう可能性があります。
同じ内容のページが違うURLで存在しているのも、これと同じようなことが起こるのです(良い例えかどうかはわかりませんが…)。

また、別サイトからリンクを貼られた場合もURLごとの被リンク評価になるため、評価が分散されてしまいます。

そうしたSEOの観点から、ページ(サイト)への評価の分散を避けるために、URLの正規化は必要なのです。

「canonical」タグで、URL正規化を実現する

評価の分散を避けるには、URLの正規化が必要です。その正規化をするためのタグが、今回主題としている「canonical」タグなのです。
canonicalタグは、URL正規化をするための手法のひとつです。

では、どのように記述するタグなのでしょうか。
具体的な記述方法や、注意点を見ていきましょう。

canonicalの記述の仕方

「canonicalタグ」という呼ばれ方をしていますが、実際にcanonicalというHTMLタグ(要素)はありません。canonicalは、linkタグに付与するrel属性の属性値です。
つまり

<link rel="canonical" href="https://samplesite.com/">

というように記述します。

PCサイトとスマホサイトのURLが分かれているときの補足

PCサイトとスマホサイトのURLを別々に作成しているときは、canonicalと「alternate」タグを併用することが望ましいです。

alternateタグとは、スマホサイトの存在をクローラーに教えるためのタグです。

スマホ版にcanonicalタグを記述(hrefの属性値はPC版のURL)し、PC版にはalternateタグを付与する、という使い方をします。

記述上の注意

canonicalタグの使用には、いくつかの注意点があります。

  • 必ずhead内に記述すること
    挿入場所は必ず<head>~</head>の間にし、linkタグで記述ます。仮にheadの外に記述してしまった場合は、そのcanonicalは無視され、効力を持ちません。
  • hrefの属性値(URL)は必ず絶対パスにすること
    rel=”canonical”を指定するlinkタグのhref属性は、必ず絶対パス(https://~などで始まるURL)を記載します。
    相対パスでもcanonicalの記述自体は有効となるのですが、相対パスではhttpとhttpsの差を指定できないため、肝心なURL正規化が機能しない可能性があります。
    それに、Googleも公式に絶対パスで記載するようアナウンスしています。

    rel=”canonical” リンク要素では、相対パスではなく絶対パスを使用します。

    重複したURLを統合する – Search Console ヘルプ

  • 301リダイレクトという方法でも同じように正規化ができるが、しっかり使い分けること
    canonicalはあくまで、「URL正規化をするための手法のひとつ」です。
    他にも正規化には方法があり、その中に「301リダイレクト」というものがあります。この二つは、用途に応じて使い分けることが必要になります。
    たとえば「リダイレクトは設定が難しそうだからcanonicalで代用しよう…」ということはしないほうがよい、ということです。301リダイレクトの使用条件としてGoogleが公式にアナウンスしているのは、「重複ページの廃止時」です。
  • canonicalは「Googleに対して希望を伝える」手段である
    canonicalを記述したから100%正規URLとして確実に扱われる、というものではないようです。

    これらの手法を使って Google に希望を伝えることはできますが、さまざまな理由から Google が別のページを正規として選択する場合もあります。

    重複したURLを統合する – Search Console ヘルプ


    クローラーはあくまでもコンテンツ内容など複合的な条件で正規URLを判別しているようです。canonicalに過度な信頼を置くのではなく、コンテンツの充実を重要視したほうが良いかもしれませんね。

まとめ

今回は「canonical」タグについてまとめました。

私はこのcanonicalというものに出会って以来、ずっとこのタグの存在が謎でした(笑)。
出会いから間は空いてしまったのですが、今回この記事にまとめるにあたってcanonicalについての記事を片っ端から読んで、やっとその謎が解けました。

記述自体は簡単なタグですが、その概念や使用上の注意点などが少し難しく感じました。
SEO対策のために重要なタグですので、ぜひ使い方をマスターしておきたいですね。

ここまで読んでいただき、ありがとうございました。

参考URL

canonicalタグとは?設置方法やよくある間違いも解説!
https://wacul-ai.com/blog/seo/internal-seo/canoical-tag

5分で分かるcanonicalタグとは?知らないと評価が落ちる|SEO対策に必須な設定方法
https://service.plan-b.co.jp/blog/seo/4878/

canonicalタグって意味あるの?/解説とSEOに役立つ設定法
https://seopack.jp/seoblog/20160817-canonical/

canonicalタグとは?正しい設定・記述方法について
https://keywordfinder.jp/blog/seo/canonical/

※アクセス日はすべて2020/8/26

この記事を書いた人
葵

28歳未経験から、職業訓練校を経てWebコーダーに。
日々の勉強の記録や、普段使用している技術やツールなどを書き残すためにブログをはじめました。
どうぞよろしくお願いいたします。

著者をフォローする
HTML
スポンサーリンク
著者をフォローする
Web制作向上ダイアリー

コメント

タイトルとURLをコピーしました