html: リンクの張り方とオプション

UB3/informatics/html/html_basic_link

このページの最終更新日: 2024/09/30

  1. 概要: リンクの張り方 (a tag)
    • 相対リンクと絶対リンク
  2. 追加できる属性
  3. SEO 対策と rel 属性
  4. ページ内リンク
    • html のページ内リンク
    • html5 のページ内リンク
    • ページ内リンクのスクロールを滑らかにする

広告

リンクの張り方 - a tag -

リンクを張るときは <a href="ファイルのパスまたはURL">リンクを張りたい文字列</a> とする。閉じタグをみればわかるように、この a がタグである。anchor の略で、他のページへのリンクだけでなく、指定したメールアドレスに対するメールソフトの起動なども行うことができる。


相対リンクと絶対リンク

href の情報をファイルのパスで指定する方法を 相対リンク という。たとえば、このページから informatics の目次のページにリンクを張る場合には、次のように考える。

  1. このページのパスは informatics/html/html_basic_link.html である。つまり informatics というフォルダがあり、その中にさらに html というフォルダがある。html の中の html_basic_link.html というファイルがこのページである。
  2. ここから、informatics の目次のページにリンクを張りたい。そのページのパスは informatics/informatics_meta/index_informatics.html である。
  3. この場合、href="../informatics_meta/index_informatics.html" とする。../ は一つ上の階層という意味である。

一方、href の中に URL を指定する方法を 絶対リンク という。href = "https://ultrabem-branch3.com/informatics/informatics_meta/index_informatics.html" のようになる。


両者のメリットとデメリットをまとめてみよう。

  1. サーバーを移転した場合は普通 URL が変わるので、絶対リンクだと張り直さなければならない。これはかなり手間。相対リンクなら必要なし。ただし、TextSS や TextWrangler のような複数ファイルのテキストを一括置換できるソフトもあるので、これらを使えば問題ない。
  2. コンピューター内で (local で) ファイルの場所を移動すると、相対リンクだとリンク切れになってしまう。
  3. 相対リンクの方が記述が短くてすむ。わずかであるが、データ転送量 を考えると有利かもしれない。

基本的にはどちらでも OK だが、上記の 1 を重視して、相対リンクを進めているサイトが多いようである。

a タグに追加できる属性

属性 説明
href

href="ファイルのパスまたは URL"。相対パス、絶対パスのどちらも指定することができる。
title

title="補足情報", マウスをリンク上に合わせたときに表示される情報を含めることができる。リンク先のサイト名などを表示させたいときに用いる。
target

target="_blank" のようにして、リンクを新しいウィンドウで開くかどうかなどを指定できる (3)。

  • _blank: 新規ウィンドウでリンクを開く
  • _self: 現在のウィンドウでリンクを開く
  • _parent: 親フレームでリンクを開く
  • _top: フレーム分割を解除してメインウィンドウでリンクを開く
rel

詳細は次の項目 SEO 対策と rel 属性 を参照のこと。

  • rel="nofollow" で Google などのクローラーがリンクを辿らないようにする。

SEO 対策と rel 属性

他のページから被リンクがあるかどうかは、依然として SEO の重要な項目の一つである (2)。これは、リンク元のページからリンク先のページへと ある種のパワーを送っている という形で評価されているため、自分のページのパワーを渡したくない場合には rel="nofollow" を使うことになる。

外部リンクの場合

価値のないサイトへの発リンク、とくにスパムの可能性があるサイトへのリンク (2)。

内部リンクの場合

同様に、作りかけのページなど、価値のないページへの内部リンクでも、rel="nofollow" を使うべきである (2)。

ページ内リンクの張り方

html と html5 で記述法が異なる。


html のページ内リンク

目指す場所 (飛ばしたいキーワード) に a タグの name 属性でタイトルを指定する。

<a name="title">キーワード</a>

リンクには、href のところに上記の title を # とともに指定する。

<a href="#title">キーワードのところまでジャンプ</a>


html5 のページ内リンク

html5 でも基本は同じであるが、キーワードの指定には name でなく id 属性を使う。さらに、id は h1, p, div などのさまざまなタグで使用できる ため、基本的に html よりも便利になっている。

name 属性で指定しても動くが、今後を考えると、ページを新しく作るときにはこの id 属性を使うべきだろう。


<a id="title">キーワード</a>

<a href="#title">キーワードのところまでジャンプ</a>


ページ内リンクのスクロールを滑らかにする

2022 年 7 月に実装。方法は 2 つある。

1 つめは CSS で指定する方法。以下の記述を CSS に追加するだけ。

html {scroll-behavior: smooth;}

もう一つは jQuery を使う方法。結局、こちらを採用。詳細は ページ内リンクのスクロールを滑らかにする方法 として別のページにまとめた。


広告

References

  1. とほほの WWW 入門. リンクする. Link.
  2. 東大法学部卒自由商人「速水鏡」のインターネット副業講座. rel=”nofollow”のSEO効果～外部リンク・内部リンクでの使い方. Link.
  3. TAG index. Link.
  4. 相対 URL と絶対 URL はどちらが SEO に強いのか？ Link.

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。

↑