リンクタグの作り方
リンクするときのタグは<a href= のHTMLタグですが、どのホームページでも必ず出てくるホームページ作成に欠かせないHTMLタグです。
HTMLソースで見てみるとこのようなタグになります。
<a href="参照するリンク先のＵＲＬ">アンカーテキスト</a>
例えば、あなたがこのページへのリンクを貼ろうと思った際、作り方の手順は以下のようになります。
リンク先のページを表示させてブラウザに表示されているURLをコピペし、上記の「参照するリンク先のＵＲＬ」の箇所に貼り付ける。
<a href="https://www.homepage-tukurikata.com/hp/link.html">アンカーテキスト</a>
リンク先のページタイトルを「アンカーテキスト」の部分にコピペして完成。
<a href="https://www.homepage-tukurikata.com/hp/link.html">リンクタグの作り方</a>
このアンカーテキストにはどのような文字を記入しても自由ですが、一般的にはそのページの「タイトル」や「こちらのサイト」、もしくは「ＵＲＬ」をそのまま記入しているケースが多いです。
このリンクタグの「href」は「ハイパーレファレンス」の略で、レファレンスというのは参照という意味です。リンクをすることで他のページに飛び、ハイパーに文章を参照するというニュアンスになります。
target="_blank"で外窓で開くリンクタグの作り方
リンクをクリックした際、通常は現在表示しているページが切り替わり、リンク先の新しいページへと移動します。この場合、それまでに開いていたページは消えてしまいますが、元のページには「ブラウザの戻るボタン」で戻ることができます。
けれども、現在のページを開いたままの状態で外部サイトを参照する場合など、外部のページへ一時的に移動するといった場合、リンクタグに target="_blank" を入れることで外窓や別タブで開くように設定することができます。
<a href="参照するリンク先のＵＲＬ" target="_blank">アンカーテキスト</a>
ただし、この場合はリンクをクリックするたびに新しい別のウィンドウやタブが立ち上がってしまうため、サイト内を閲覧しているうちに無数のウィンドウが開いてしまうことになります。また、一部のスマートフォンアプリでの閲覧時に不具合が発生するケースもあります。
そのため、自サイト内へリンクする場合には、この target="_blank" はできるだけ使わないでリンクすることをおすすめします。
一般的には、自サイト内の内部リンクには target="_blank" を入れずにリンクし、外部サイトの場合にだけ target="_blank" を入れて外窓で開く設定にしているケースが多いです。
外部リンクと内部リンクの違い
リンクには大きくわけて「外部リンク」と「内部リンク」があります。
ホームページ内の他のページにリンクする場合を内部リンク、外部サイトへリンクする場合を外部リンクといいます。
また、「発リンク」といった場合、自サイトから他サイトへリンクをするという意味になります。逆に、他サイトから自サイトへ貼られるリンクは「被リンク」といわれています。
詳しくみると、内部リンクには「つづきを読む」で使われるname指定やページの上部へ移動するpagetopなどの「同一ページ内のリンク」もあります。
- 外部リンク <a href="外部サイトのＵＲＬ">アンカーテキスト</a>
- 内部リンク <a href="自サイト内のＵＲＬ">アンカーテキスト</a>
- 同一ページ <a href="同一ページ内のname指定した特定箇所">more など</a>
外部リンクについてはURLを省略して記述することはできませんが、自サイト内の内部リンクの場合は相対リンクでURLを省略して書くこともできます。
絶対リンクと相対リンクの違い
ＵＲＬを省略しない場合を絶対リンク、省略する場合を相対リンクといいますが、初心者でも簡単なのは省略しない形の絶対リンクでの書き方です。
省略しないので多少長くなってしまいますが、絶対リンクの形で作成しておけば、リンク切れの心配がなく間違いはありません。
たとえば、このページから当サイト内の「フォルダ分けによる階層化」のページへ絶対リンクを貼る場合は以下のようになります。
■絶対リンクの場合
<a href="https://www.homepage-tukurikata.com/hp/folder.html">フォルダ分けによる階層化</a>
一方、このリンクタグは自サイト内の内部リンクのため、以下のドメインの部分を省略して記述しても同じ機能を果たします。
<a href="https://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を変更しなくてもそのままアップロードできるため、サイトの引越しが楽という点にあります。
ドメインを変更する予定がない場合は、絶対リンクで作成しておくのが無難です。
リンクタグでrel="nofollow"の使い方
リンクされる数が多ければ多いほど、それだけ検索結果でも上位に表示される傾向がありますが、有料のリンクを購入して意図的にランキングの上位に表示させる検索エンジンスパムも存在します。
けれども、このような意図的にランキングを操作する行為について検索エンジン側は嫌っており、有料でのリンク購入への対策が強化されてきています。
その一方で広告掲載などでリンクするケースもあるため、そのような場合にはリンクタグに rel="nofollow" を入れ、その外部リンクをSEO的に無効にするのが望ましいとされています。
<a href="参照するリンク先のＵＲＬ" rel="nofollow">アンカーテキスト</a>
どのようなケースに rel="nofollow" を入れるのがよいかについては検索エンジン各社でまちまちです。
あまりはっきりとした決まりはありませんが、グーグルの場合は「信頼できないコンテンツ」や「有料リンク」、あるいはログインページなどの「検索エンジンがクロールする必要のないページ」に使うとよいとされています。
広告などの有料リンクには、とりあえずrel="nofollow"を入れておくのがよいでしょう。