HTMLアンカーリンク（a hrefタグ）とは～使い方と別ページ（target blank）について

HTML（HTML5）のアンカーリンク（a hrefタグ）を適切に使い、テキストや画像のリンクを最適化することが大切です。

今回は、アンカーリンク（a hrefタグ）の使い方、アンカーリンク（a hrefタグ）と別ページ（target）、アンカーリンク（a hrefタグ）とSEOについて中心に解説したいと思います。

アンカーリンク（aタグ）とは

アンカーリンク（aタグ）とは、HTMLファイルに記述するタグで、ページ遷移するためのジャンプリンクによく使用されるタグです。

アンカーリンク（aタグ）は、href属性（リンク先指定）やtarget属性（別ページ表示指定）と合わせてよく利用されます。

アンカーリンク（aタグ）は、HTMLファイルに記述する最も有名なタグの一つです。

アンカーリンク（aタグ）の使い方

アンカーリンク（aタグ）は、以下のような使い方があります。

• リンク先を指定する使い方
• アンカーポイントとして指定する使い方
• 別ページ・別ウィンドウで表示する使い方

リンク先を指定する使い方

アンカーリンク（aタグ）のhref属性を使い、リンク先へページジャンプ（遷移）させることができます。

記述例：

アンカーポイントとして指定する使い方

アンカーリンク（aタグ）のidやname属性を使い、ページ内の特定位置（アンカーポイント）を指定することができます。

記述例：

※HTML5ではアンカー要素（aタグ）のname属性の指定が非推奨となり、id属性の使用が推奨されました。

別ページ・別ウィンドウで表示する使い方

アンカーリンク（aタグ）のtarget属性の属性値で_blankを指定し、リンク先を別ページ・別ウィンドウで表示させることができます。

記述例：

上記のようなアンカーリンク（aタグ）は、よく活用される使い方です。
適切に活用し、テキストや画像にリンクさせながら、サイト構築を進めましょう。

アンカーリンク（aタグ）と別ページ・別ウィンドウ（target属性）について

アンカーリンク（aタグ）のtarget属性値「_blank」は、リンク先を別ページ・別ウィンドウ表示させるためによく使われます。

記述例：

その他、アンカーリンク（aタグ）のtarget属性値には、以下のようなものがあります。

• _self
• _parent
• _top

※参考：＜a＞－HTML5タグリファレンス

_self

現在のウィンドウでリンク先を開くことができます。

記述例：

_parent

現在のウィンドウの親ウィンドウでリンク先を開く

記述例：

_top

現在のウィンドウの最上位階層のウィンドウでリンク先を開く

記述例：

また、任意のターゲット名を付け、任意の名前を付けたウィンドウでリンク先を開くこともできるようです。

アンカーリンク（aタグ）とSEOについて

アンカーリンク（aタグ）のhref属性は、テキストや画像のリンク作成に役立ちます。

アンカーリンク（aタグ）のhref属性でリンクされたテキストや画像を最適化し、以下のようSEO効果を高めることが可能です。

• リンク先がわかる内容にする
  アンカーリンク（aタグ）のhref属性でリンクされたテキストや画像のalt属性に、リンク先がわかるような文言を入れる。
  そうすれば、ユーザー・Googleクローラーがリンク先ページ内容を把握しやすく、整合性も高まり、SEO効果が期待できる
• 簡潔な文言にする
  アンカーリンク（aタグ）のhref属性でリンクされたテキストや画像のalt属性に使用する文言を、短いフレーズや説明的なテキスト（こちら」「クリック」などは避ける）を使い、簡潔な内容にする。
  わかりやすく魅力的な文言にし、Googleクローラーへの認識、ユーザーのクリック行動を促進させることで、SEO効果が期待できる

アンカーリンク（aタグ）とname・id属性について

アンカーリンク（aタグ）のname属性やid属性を使い、以下のようアンカーポイントを作成することが可能です。

name属性を使ったアンカーポイントの記述例：

id属性を使ったアンカーポイントの記述例：

※HTML5ではアンカー要素（aタグ）のname属性の指定が非推奨となり、id属性の使用が推奨されました。

上記「id」や「name」のアンカーポイントに、以下のようhref属性を指定して、遷移させることが可能です。

上記のよう、アンカーリンク（aタグ）のname属性やid属性を活用し、特定の位置にリンクジャンプさせながら、適切なコンテンツを表示させましょう。

アンカーリンク（aタグ）とonclick属性について

アンカーリンク（aタグ）にonclick属性を使い、javascriptを実行させることが可能です。

記述例：

「return false;」を記述することで、href属性のリンク先ジャンプを無効にできます。
※参考：javascriptでaタグにonclickつけるときにreturn falseもつける : 森のコーディング

アンカーリンク（aタグ）が飛ばない原因

アンカーリンク（aタグ）が飛ばない原因として、以下のようなことが考えられます。

• href、name、id属性の属性値のスペルミス
• ブラウザの依存
• jquerymobile(ジェイクエリモバイル)を利用している

アンカーリンク（aタグ）の位置・ポイントがずれる原因とずらす対処法

アンカーリンク（aタグ）のidやname属性で指定したアンカーポイントへリンクしても、位置がずれる原因として「ヘッダーをposition:fixed；で固定してる」ケースが多いようです。

ずれを改善し、適切なアンカーポイントの位置にずらす対処法は以下になります。

• CSSで調整する方法
• JavaScriptで調整する方法

アンカーリンク（aタグ）を無効にする方法

アンカーリンク（aタグ）を無効にするには以下のような方法があります。

• ハッシュで無効にする方法
  href属性値に「#（ハッシュ）」を指定し、アンカーリンク（aタグ）を無効にする
• javascript:void(0)で無効にする方法
  href属性値に「javascript:void(0)」を指定し、アンカーリンク（aタグ）を無効にする
• jQueryで無効にする方法
  jQueryを事前に読み込ませ、スクリプトで指定し、アンカーリンク（aタグ）を無効にする

※参考：aリンクを無効にする方法 – JQuery、javascript、[#]リンク等 – How to disable links

まとめ

HTMLのアンカーリンク（aタグ）を適切に使い、テキストや画像リンクを最適化しましょう。

具体的には、リンク先の内容がわかるようなテキストや画像にして、リンク自体の質を高めながらSEO対策を進めることが上位表示を目指すためのポイントとなります。