株式会社Telescope SEOブログ「#ハッシュタグ(フラグメント)付きURLはcanonicalで対応」サムネイル画像
Telescope SEO Blog「#ハッシュタグ(フラグメント)付きURLはcanonicalで対応」

#ハッシュタグ(フラグメント)付きURLはcanonicalで対応

ウェブページのURLには正規のURLから派生した類似のURLが生成されることがよくあります. 「 .(ドット)」, 「 /(スラッシュ)」が最後につくURLなどがそうです.

#ハッシュタグ付きのURLもこれに近い性質のURLです.

今回はSEO観点からの#ハッシュタグ(フラグメント)付きURLの正しい対応について解説します.

ページ内遷移のための#ハッシュタグ(フラグメント)付きURL

そもそも#(ハッシュタグ)が付いたURLとは, 主にページ内遷移を行わせるために生成されるURLです.

このケースにおいては「ハッシュタグ」ではなく「フラグメント」と呼ぶのが一般的なので, 本記事でも以降は「フラグメント」の呼称に統一します.

ページ内の任意の箇所において, HTMLの<div>などのタグ内でIDを設定すると, そのページのURLの末尾に「#(ID)」を付けることでIDが記述された箇所へページ内遷移させることができます.

example.comにおいて, “id = summary” で定義されたまとめ段落があるとすると, “example.com/#summary” をリクエストすることでそのまとめ段落に移動させることができます.

IDを記述しておくと, ページ内遷移だけでなく, 検索エンジンの検索結果や他サイトのリンクなどからでも#付きURLによってページ内の任意の箇所に移動させることができます.

これが#フラグメントの効用です.

SEO観点からは扱いに注意する必要のあるフラグメント#付きURL

一見便利なフラグメント#付きURLですが, SEO観点からすると注意する必要があります.

主に発生し得ると考えられる問題は, インデックスの問題と重複の問題の2つです.

① インデックスの問題

HTML内でIDを利用してフラグメントに飛べるというシンプルな仕様であればページ内コンテンツは全て問題なくインデックスされます.

しかし, #のフラグメントを利用してAjaxベースでコンテンツが変化する場合はインデックスに問題が発生する可能性があります.

② 重複の問題

Googleは厳密にはURL単位でウェブページを評価します.

#フラグメント付きURLも立派なURLなので, 当然検索エンジンからは1つのURLと認識されます.

そして一般的なケースにおいて#フラグメント付きURLのページは#なしのURLのページと全く同じコンテンツを持ちます.

#フラグメント付きURLが重複コンテンツとしてGoogleからネガティブな評価を受けることは基本的にはありませんが, #付きURLにリンクが集まったり, #付きURLがSNSでシェアされるというケースは十分考えられます.

これによってオリジナルのURLと#付きURLに評価が分散してしまうのはもったいないことです.

#フラグメント付きURLはcanonicalでオリジナルURLに正規化する

被リンク等の効用の分散を防ぐ, クローラビリティを向上させるため, #フラグメント付きURLは正規のURLに正規化するアノテーションを行うのが良いです.

#付きURL “example.com/#smmary” を “example.com” に正規化する場合の canonical の記述方法は以下です.

canonical のアノテーションは正規でないページの<head>タグ内に記述します.(今回の例では “example.com/#smmary” の<head>)

<head>
   <link rel="canonical" href"example.com" />
</head>

冒頭にも述べた通り, 正規URLが “example.com” だとすると, “example.com.”, “example.com/”, “www.example.com” など, 意図せずとも非正規のURLが生成されるのが常です.

これ全てにcanonicalのアノテーションを記述するのが当然理想なのですが, 取りこぼす可能性もあります.

不測の非正規URLに備えて, 正規のページには自己参照の canonical を記述するのがおすすめです.(Googleもこれを推奨しています.)

自己参照の canonical とは, example.com の<head>に example.com へのcanonicalを記述することです.

これによって, 同一コンテンツにアクセスできるURL群の中で自らのURLが正規のURLであることを宣言することができます.

株式会社Telescope SEO担当 山内遼

SEOのご相談は, 問い合わせフォーム よりご連絡ください.

Telescope SEO Blog トップ

株式会社Telescope概要

社名    株式会社Telescope(Telescope Inc.)

代表者   山内 遼(代表取締役)

所在地   東京都渋谷区円山町28-4 大場ビルA館 6階B室

設立    2016年7月7日

資本金   4,194万円

事業内容  自動車比較メディア「SUNROOF(サンルーフ)

Telescope Inc.(株式会社テレスコープ)トップ


Haruka Yamauchi

株式会社Telescope代表取締役社長 / CEO