HTMLのリンク（<a>タグ）について改めて知っておきたい基本

SEOmozは英国Distilled社と提携し、検索エンジン市場のニュースと情報を提供している。この記事はDistilled.co.ukに勤務する協力者から提供されたもので、内容はすべて筆者自身の見解であり、SEOmozの見解を反映しているとは限らない。

リンクについて考えてみたい。リンクについて話すときは、なぜリンクが欲しいのか、どうやったらリンクを得ることができるのかを語ることが多いんだけど、今回は基本に立ち返って、HTMLの構成要素を考えてみようと思う。

確かにこの記事は、新参のSEO担当者や、自分の体験を広げたいと考えているウェブ開発者に向けたものだが、経験豊富な検索マーケターだって、ちっぽけなアンカータグの属性の各要素に含まれる微妙な意味合いについて、少し述べてみたいと思うこともあるだろう。

リンクの例をいくつか挙げてみよう。1つ目はホワイトハウスのWebサイトへのリンク、もう1つはDistilledの新しい米国Webサイトへのリンクだ。

この2つのリンクは両方とも同じ構造に従っている。つまり、さまざまな属性を含むことができる開始タグ<a>で始まり、次にリンクの内容（「クリック可能な」要素つまり「アンカーテキスト」）が来て、アンカーの終了タグ</a>で終わる、という構造だ。

次からHTMLリンクの各要素の説明に入るけど、その中で僕は、

• 検索エンジン最適化 SEO
• ユーザーインターフェイス UI
• ユーザー体験 UX

という3つのうち、どの観点からそのリンク要素が重要性を持つのかを示している。

属性

アンカータグには、いろいろな属性（パラメータ）がある。必須の属性と省略可能な属性があり、中にはまったくと言っていいほど使われないものもある。こうした属性のそれぞれが、異なる人々の興味を引きつけるわけだ。それでは、代表的な属性を見てみよう。

href ―― リンク「先」
SEO UX

上で紹介した2つのリンク例からもわかるように、href（おそらく「hypertext reference」の略）は、ユーザーがリンクをクリックしたときに飛んでいく先のURLだ。

同じサイト内のページへのリンクを設定する場合も、http://とドメイン名を含む完全URL（「絶対」URL）で指定することを、SEOmozは推奨している。

URLを構成する個々の要素については、「SEOチートシート（トラの巻）：URLの構造」を一読するといいだろう。

hrefには、「mailto:name@example.com」のようなメールアドレスを設定することもできる。これは一般的に、訪問者のEメールクライアントを起動するリンクを提供する機能だが、僕自身はこれを使うことを無条件には推奨できない印象を持っているので、この機能を使う場合には、リンクをクリックすると何が起きるのかがユーザーにはっきりわかるようにしておくことをお勧めする（どうすればいいかについては、次の例を参照してほしい）。

rel ―― リンク元ページから見たリンク先ページとの関係
SEO UI UX

SEO業者として僕たちが最も多く目にするのは、relに「nofollow」（Googleは、有料リンクを見分ける目印として設定することを求めている）を設定しているケースだが、ほかにもさまざまな使い道があるんだ。

relで使用可能な属性値のリストはHTML5で拡張される予定だけど、今のところ、ミラーページや印刷用ページなどの指定を目的とする「alternate」や、複数ページにまたがるコンテンツを行き来するための「previous」「next」などを設定できる。ブラウザによっては、ブラウジングしやすくするために「next」リンクをいつも同じ形で表示したり、ブラウジング速度を向上させるために次のページをあらかじめ読み込んだりするものもある。

target ―― リンクを開くウィンドウ
UX

target属性は、フレームを使ったサイトを作成した場合、特に便利だった。このごろ最も多く見かけるのは、targetに「_blank」を設定しているケースだ。これは、ウェブブラウザに、新しいウィンドウ（または、新しいタブ：最近ではこっちの方が多くなっている）でリンクを開くように指示するものだ。

もっとも、僕は、この機能を使うのはお勧めしない。どのリンクを新しいタブで開くかは、ユーザーが決めればいいことなんだ。

※Web担編注：実際に、XHTML 1.0 strictでは、リンクのtarget属性は仕様に含まれていない。

classとid ―― CSSスタイルの適用に最も多く使われる
UI UX

リンクには、ほとんどのHTML要素と同じように、クラスやIDを設定できる。これらは通常、CSSを使ってリンクにスタイルを適用するときに使われるものだ。たとえば、Webページではなく空のEメールを開くことを示す、小さなアイコンをmailto:リンクに追加することも可能だ。

リンクには、CSSの疑似クラス「:hover」や「:visited」がとりわけ役に立つ。リンクがすでに訪問済みである場合やマウスポインタをリンク上に置いたときにスタイルを変更することにより、ユーザーインターフェイスやユーザー体験を向上させられる可能性がある。

※Web担編注：クラスやIDはJavaScriptで特定のリンクに対して操作を行う場合などに利用されるし、IDを指定した場所はページ内リンクの飛び先としても利用できる。

title ―― リンクの「説明」
UI UX

リンクのtitle属性で設定されているテキストは通常、マウスポインタをリンク上に置くと、ツールチップとしてマウスポイントのそばに表示される。これは、リンク先ページについてより詳しい情報をユーザーに提供したいときに利用できる。これもまた、リンクをクリックするとEメールクライアントが起動する場合、注意を喚起するのに使える。

アンカーテキスト
SEO UI

アンカーテキストは、SEO業者にとって非常に重要な要素だ。というのも、ほとんどの検索エンジンが、特定の検索キーワードとの関連性をリンク先ページに伝える主要な手段として、アンカーテキストを使っているからだ。

リンクにアンカーテキストでなく画像を設定したとしても、検索キーワードとの関連性をリンク先ページに伝えるチャンスを失うことにはならない。画像タグに「alt」属性を設定すればいいからだ。これは、画像が表示できないときに現れる代替文字列だ。ほとんどの場合、検索エンジンはこのテキストを参照して、他のアンカーテキストの代わりとして使うはずだ。

altテキストは、画像に含まれるテキストに一致するものだけを設定しよう。いろいろなキーワードを詰め込みたくなるものだが、その誘惑をはねのけられれば、ストレートなテキストリンクを使う場合とほとんど変わらない効果が得られるはずだ。

見本と分かりやすいヒント

これらをすべてまとめると、どうなるだろう？ 次のようなものができあがるはずだ。

HTMLではこうなる。

<a href="http://twitter.com/RobOusbey" rel="author" title="Twitterでロブをフォローする">ロブ・ウーズビー</a>

これがウェブではこう表示される。

Twitterで僕、ロブ・ウーズビーを自由にフォローしてくれ。