リンクタグの作り方

リンクするときのタグは <a href= のhtmlタグですが、どのホームページでも必ず出てくる、ホームページ作成に欠かせない大切なhtmlタグです。

htmlソースで見てみますと、このようなタグになります。

<a href="参照するリンク先のURL">アンカーテキスト</a>

例えば、あなたがこのページへのリンクを貼ろうと思った際、作り方の手順はこのようになります。

  1. リンク先のページを表示させ、ブラウザに表示されているURLをコピペして、上の「参照するリンク先のURL」の箇所に貼り付ける。

    <a href="http://www.homepage-tukurikata.com/hp/link.html">アンカーテキスト</a>

  2. リンク先のページのタイトルを「アンカーテキスト」の部分にコピペして完成。

    <a href="http://www.homepage-tukurikata.com/hp/link.html">リンクタグの作り方</a>

アンカーテキストはどのような言葉でも自由ですが、一般的には、そのページのタイトルとか、「こちらのサイト」とか、もしくはURLをそのまま記入しているケースが多いです。
詳細:リンクのhtmlタグ a href

このリンクタグの「href」というのは「ハイパーレファレンス」の略で、レファレンスというのは参照という意味です。リンクをすることで他のページにとんでハイパーに文章を参照するというニュアンスになります。

target="_blank"で外窓で開くリンクタグの作り方

通常、リンクをクリックした場合、現在の表示しているページが切り替わって、新しいリンク先のページへと移動します。この場合、それまでに開いていたページは消えてしまいますが、元のページにはブラウザの戻るボタンで戻ることができます。

けれども、現在のページを開いたままの状態で外部サイトを参照する場合など、外部のページへちょっとだけ移動するといった場合には、リンクタグに target="_blank" を入れることで外窓で開くように設定することができます。

<a href="参照するリンク先のURL" target="_blank">アンカーテキスト</a>

ただ、リンクをクリックするたびに新しいウィンドウやタブが立ち上がるように設定してしまうと、サイト内を閲覧しているうちに、無数のウィンドウが開いてしまいます。

ですので、自サイト内へリンクする場合には target="_blank" を使わないで、普通にリンクした方がよいかと思われます。

一般的には、自サイト内の内部リンクには target="_blank" を入れずに普通にリンクし、外部サイトの場合にだけ target="_blank" を入れて外窓で開く設定にしているケースが多いです。

外部リンクと内部リンクの違い

リンクには大きくわけて「外部リンク」と「内部リンク」とがあります。
ホームページ内のほかのページにリンクする場合を内部リンク、外部のサイトへリンクする場合を外部リンクといいます。

また、「発リンク」といった場合、自サイトから他サイトへリンクをするという意味になります。
逆に、他サイトから自サイトへリンクが貼られるのは「被リンク」といわれています。

内部リンクには、詳しくみると、つづきを読むなどで使われるname指定や、ページの上部へ移動するpagetopなどの「同一ページ内のリンク」もあります。

  • 外部リンク <a href="外部サイトのURL">アンカーテキスト</a>
  • 内部リンク <a href="サイト内のURL">アンカーテキスト</a>
  • 同一ページ <a href="同一ページ内のname指定した特定箇所">more など</a>

このなかで、外部リンクはURLを省略して記述することはできませんが、自サイト内の内部リンクの場合は相対リンクでURLを省略して書くこともできます。

絶対リンクと相対リンクの違い

URLを省略しない場合を絶対リンク、省略する場合を相対リンクといいますが、初心者でも簡単なのは、省略しない形の絶対リンクでの書き方です。

多少長くなってしまうかもしれませんが、絶対リンクの形で作成しておけば、リンク切れの心配がなく間違いありません。

たとえば、このページから当サイト内の「フォルダ分けによる階層化」のページへ絶対リンクを貼る場合はこんなふうになります。


<a href="http://www.homepage-tukurikata.com/hp/folder.html">フォルダ分けによる階層化</a>


一方、このリンクタグは自サイト内の内部リンクですので、ドメインのURLの部分を省略してこんなふうにしても同じ機能をはたすことになります。

<a href="http://www.homepage-tukurikata.com/hp/folder.html">フォルダ分けによる階層化</a>

この赤字のドメインの部分を省略して…

<a href="/hp/folder.html">ホームページのフォルダと階層</a>

実際の相対リンクで作ったタグ:フォルダ分けによる階層化


トップページへの相対リンクはこのようなタグになります。
<a href="/">ホームページの作り方</a>

同一階層へのリンクの場合は、さらに省略することができ、上のように省略する以外にも、スラッシュをつけないでそのままファイル名のみでも記述できます。

<a href="folder.html">ホームページのフォルダと階層</a>


ただ、独自ドメインで作成している場合は大丈夫ですが、ジオシティーズなどのサブディレクトリ型の無料ホームページの場合は注意が必要になります。

例えば、トップページへのURLを省略して相対リンクで作成したとしても、自分のホームページのトップではなく、ヤフージオシティーズ本体のトップページまで飛んでしまったりすることもあります。

例)
自分のホームページのトップページ
http://www.geocities.jp/freehomepageblog/

このようなサイトで、URLを省略してトップページへのリンクを / と記述しても、http://www.geocities.jp/freehomepageblog/ ではなく、
http://www.geocities.jp/ のポータルサイトのトップへと飛んでしまいます。

独自ドメインを取得している場合と無料のホームページをレンタルしている場合では、URLの省略方法にも若干の違いが出てきてしまうので、完全なURLの絶対リンクで作成しておく方が間違いありません。

この相対リンクにすることの利点は、主に、ドメインを変更してサイトのurlが変わってしまった場合でも、いちいち全部のページのURLを変更しなくても、そのままアップロードできるのでサイトの引越しが楽だという点にあります。

ドメインを変更する予定がない場合は、絶対リンクで作成しておくのがぶなんです。

リンクタグでrel="nofollow"の使い方

リンクされる数が多ければ多いほど、それだけ検索結果でも上位に表示される傾向がありますが、これを有料でリンクを購入して、意図的にランキングの上位に表示させようとするSEO対策の手法も存在します。

けれども、このような意図的にランキングを操作する行為については検索エンジン側は嫌っており、有料でのリンク販売への対策が強化されてきています。

ただ、広告掲載などでリンクする形もありますので、このような場合にはリンクタグに rel="nofollow" を入れて、その外部リンクをSEO的に無効にするのが望ましいとされています。

<a href="参照するリンク先のURL" rel="nofollow">アンカーテキスト</a>

どのようなケースに rel="nofollow" を入れるのがよいかについては各社でまちまちです。

あまりはっきりとした決まりはありませんが、グーグルの場合、「信頼できないコンテンツ」や「有料リンク」、あるいはログインページなどの「検索エンジンがクロールする必要のないページ」に使うとよいとされています。

広告などの有料リンクには、rel="nofollow"を入れておくのがよいでしょう。