URLに「#(シャープ)」が付く意味は?URLフラグメントを使いこなそう!

URLに「#(シャープ)」が付く意味は?URLフラグメントを使いこなそう!

「#(シャープ)」がついたURLを見たことは無いでしょうか?HTMLを勉強中の方はリンクを作るaタグのhref属性にURLを設定する事を知っていますが、そのURLに「#」が付くとどうなるか、その意味について解説していきます。


目次[非表示]

  1. URLに「#(シャープ)」が付く意味は?
  2. まとめ

URLに「#(シャープ)」が付く意味は?

HTMLを勉強している方はリンクのタグがaタグ(アンカー: Anchorの略)でhref属性にリンク先のURLを設定することを知っているかと思います。

しかし時にWEBページを見ている時に「#(シャープ)」が入力されているURLに遭遇することがあります。

このURLに「#(シャープ)」が入る意味は何なのでしょうか?

「#(シャープ)」はURLフラグメント

例えばこの2つのURLは同じページの事を指します。

  • https://aprico-media.com/posts/1459
  • https://aprico-media.com/posts/1459#head-8a8e63b948dd145970870f943dca8cc0
しかし後者のURLではいきなり大見出しの位置まで移動している事が確認できるのではないでしょうか?

実はその大見出し(h2タグ)に設定されているid属性は「#(シャープ)」のあとに続いている文字列となっています。

つまり「#(シャープ)」のあとにつける文字列はそのページ内にあるDOMのid属性を指しており、そのDOMが表示される位置までジャンプします。

例えば記事ページの目次などはこのページ内リンクを使って作られることが多いです。その目次の場所まですぐに移動するという事がページ内リンクを使うことで簡単に実現できます。

このURLにハッシュ記号である「#」が入った指定方法はURLフラグメントと呼ばれます。

URLに「#(シャープ)」がつく意味

  • 「#(シャープ)」が付くのはURLフラグメント
  • aタグのhref属性にURLの後ろに「#(シャープ)+DOMのidの値」を入力することでそのDOMの位置まで移動するリンクとなる

まとめ

URLについている「#(シャープ)」の意味についてご紹介してきました。

URLフラグメントは最近のSEOではインデックスされるようになってきていて、Googleの検索結果からいきなり大見出しの位置までジャンプするという事もこれから増えていくのではないでしょうか。(多分そこに検索した答えがあるので、たどり着くのが早いのが評価?)

SEO的な評価を抜きにしても例えば下記のコードは「id="top"」と指定した位置まで遷移するページ内リンクです。

<a href="#top">TOPへ</a>
<a href="#">TOPへ</a>

このリンクがWEBページの下部にあれば、すぐにTOPまでスクロールできて便利ですよね!

ページ内リンクだけではなく、JavaScriptでも利用できますので、ぜひURLフラグメントを使いこなして、よりよいWEBページ作りに活かしていきましょう!


関連記事