HOME内部対策 > HTMLアンカーリンク(a hrefタグ)とは~使い方と別ページ(target blank)について
PR

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

2016/09/13内部対策[最終更新日]:2017/03/06
このエントリーをはてなブックマークに追加

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

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

HTMLアンカーリンク(a hrefタグ)とは~使い方と別ページ(target)について

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR

アンカーリンク(aタグ)とは

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

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

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

アンカーリンク(aタグ)の使い方

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

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

記述例:
<a href=”http://seolaboratory.jp”>SEOブログ SEOの疑問を実験で解き明かす | SEOラボ ブログ</a>

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

記述例:
<a id=”point”>SEOブログ SEOの疑問を実験で解き明かす | SEOラボ ブログ</a>

※HTML5ではアンカー要素(aタグ)のname属性の指定が非推奨となり、id属性の使用が推奨されました。
ページ内リンク(ジャンプ)のHTML・HTML5記述法」でも解説してますので、合わせてご参照ください。

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

記述例:
<a href=”http://seolaboratory.jp” target=”_blank”>SEOブログ SEOの疑問を実験で解き明かす | SEOラボ ブログ</a>

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

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

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

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

記述例:
<a href=”http://seolaboratory.jp” target=”_target”>別ページ・別ウィンドウを開いてリンク</a>

その他、アンカーリンク(aタグ)のtarget属性値には、以下のようなものがあります。
※参考:<a>-HTML5タグリファレンス

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

記述例:
<a href=”http://seolaboratory.jp” target=”_self”>リンク元と同じフレームにリンク</a>

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

記述例:
<a href=”http://seolaboratory.jp” target=”_parent”>ひとつ上の親フレームにリンク</a>

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

記述例:
<a href=”http://seolaboratory.jp” target=”_parent”>フレームをすべて解除してリンク</a>

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

アンカーリンク(aタグ)とSEOについて

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

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

・リンク先がわかる内容にする
アンカーリンク(aタグ)のhref属性でリンクされたテキストや画像のalt属性に、リンク先がわかるような文言を入れる。
そうすれば、ユーザー・Googleクローラーがリンク先ページ内容を把握しやすく、整合性も高まり、SEO効果が期待できる

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

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

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

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

name属性を使ったアンカーポイントの記述例
<a name=”point”>SEOラボ</a>
id属性を使ったアンカーポイントの記述例
<a id=”point”>SEOラボ</a>

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

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

<a href=”#point”>SEOラボへジャンプする</a>

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

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

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

記述例:
<a href=”” onclick=”myfunction(); return false;”>処理実行

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

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

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

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

ページ内リンク(ジャンプ)が飛ばない原因と対処法」でも、アンカーリンク(aタグ)が飛ばない原因を解説してますので、合わせてご参照ください。

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

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

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

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

ページ内リンク(ジャンプ)の位置がずれる原因と調整法」で、さらに詳しい対処法を紹介してますので、ご参考ください。

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

アンカーリンク(aタグ)を無効にするには以下のような方法があります。
※参考:aリンクを無効にする方法 – JQuery、javascript、[#]リンク等 – How to disable links

・ハッシュで無効にする方法
href属性値に「#(ハッシュ)」を指定し、アンカーリンク(aタグ)を無効にする

・javascript:void(0)で無効にする方法
href属性値に「javascript:void(0)」を指定し、アンカーリンク(aタグ)を無効にする

・jQueryで無効にする方法
jQueryを事前に読み込ませ、スクリプトで指定し、アンカーリンク(aタグ)を無効にする

まとめ

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

良質なリンクを増やし、内部リンク被リンクを集めながら、順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。
follow us in feedly