HTML リンク アンカー タグと SEO におけるその役割の概要

<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマークを定義するために使用されます。最も一般的な使用法は次のとおりです。

ハイパーリンクの href 属性を作成し、href="" の中央にあるリンクにジャンプします。

 <a href="https://www.jb51.net/">www.jb51.net</a>

ブックマークを作成し、名前またはID属性を使用して、ハイパーリンクの末尾に「#」とブックマークの名前を追加して、Webページ上の特定の位置にジャンプします。

 <a name="トップ"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">トップに戻る</a>
<a href="#1">第 1 章を開く</a>
<a href="#2">第2章を開く</a>

E-dimensional Technology W3CSchool オンライン チュートリアルを開くと、タイトルの下にブックマーク名によって作成されたナビゲーションが表示されます。

Javascriptイベント属性、クリック後に異なるコマンドを実行する

<a href="javascript:void(0)" onclick="this.href='https://www.jb51.net/'">www.jb51.net</a>

アンカーリンクCSSスタイル

カスタム アンカー リンク <a href="https://www.jb51.net/">アンカー リンク テキスト</a> CSS スタイルがない場合、デフォルトのアンカー リンク スタイルは次のようになります。

デフォルトのリンクスタイル。効果を確認するにはマウスを使用してトリガーしてください。

<スタイル タイプ="text/css">

{色:#00F}

a:訪問{color:#800080}

ホバー{色:#F00}

</スタイル>

<a href="https://www.jb51.net/">www.jb51.net</a>

a{color:#00F} 未訪問のアンカーリンクは青色で下線が引かれます

a:visited{color:#800080} クリック後のリンクは紫色で下線が引かれます

a:hover{color:#F00} マウスがトリガーされると、色が赤くなり、下線が引かれます

ただし、この 3 つの色は強すぎるため、すべての Web デザイン スタイルに一致しないことがよくあります。他の色のアンカー リンク スタイルが必要な場合は、上記の 3 つのスタイルに従って、CSS で色と背景を自分で変更するだけです。

アンカーリンクに下線が引かれるのはなぜですか?

実際、HTML が初めて導入されたとき、ブラウザは現在ほど高度ではありませんでした。同時に、当時のコンピュータ画面には今日の LCD のようなカラーはなく、多くは白黒でした。当時は、リンクかどうかを判別する方法として下線が使われていました。しかし、多くの白黒モニターや色覚異常者向けのウェブページでは、下線が可能な限り残されており、そうでないとユーザーは色を判別できません。

もちろん、美観上の理由から、現代​​の Web ページのデザインでは、一般的にリンクにアンダースコアやアンダースコアを直接付けることはありません。ただし、色覚異常のユーザーや白黒の携帯電話ディスプレイを使用するユーザーに対応するために、ユーザーのマウスがトリガーされたときに下線が引かれるように CSS スタイルを設定することをお勧めします。

アンカーリンク ターゲットジャンプウィンドウ設定

このページのリンクを開くと、一部のリンクは他のウィンドウにポップアップ表示され、一部のリンクはこのページを直接置き換えます。このジャンプ方法では、アンカー リンクのターゲット属性を使用してジャンプ ウィンドウを設定できます。

_self 現在のウィンドウが開いており、アンカーリンクはデフォルトで現在のブラウザウィンドウにジャンプします。つまり、デフォルトのtarget="_self"です。

 <a href="https://www.jb51.net/" target="_self">これは、E-dimensional Technology のホームページを表示する現在の新しいウィンドウです</a>

_blank 新しいウィンドウが開きます

<a href="https://www.jb51.net/" target="_blank">これは、E-Dimensional Technology のホームページを表示する新しいウィンドウです</a>

名前のないターゲット 新しいウィンドウで開く

<a href="https://www.jb51.net/" target="_weigeti"> ここでの _weigeti が Web ページ内の名前または ID でない場合、Web ページ内のすべての target="_weigeti" リンクは同じ新しいウィンドウで開かれますが、_blank の場合はリンクごとに異なる新しいウィンドウが開きます</a>

フレーム名またはID

 <a href="https://www.jb51.net/" target="weigeti">ここをクリックすると、name="weigeti" の下のフレームに E-dimensional Technology のホームページが表示されます。新しいウィンドウにジャンプしたり、現在のウィンドウを置き換えたりすることはありません。</a>
<iframe name="weigeti"></iframe>

_parent 親ウィンドウが開き、リンクされたファイルは、リンクされたフレームを含む親フレームセットまたは親ウィンドウに読み込まれます。リンクを含むフレームがネストされていない場合、リンクされたファイルは _self パラメータと同様にブラウザの全画面ウィンドウに読み込まれます。

 <iframe>
   <a href="https://www.jb51.net/" target="_parent">これはフレーム内です</a>
</iframe>

_top フレームの最上位レイヤー。たとえば、Web ページ A は Web ページ B に iframe を埋め込み、Web ページ B は Web ページ C に iframe を埋め込みます。

 <iframe>
   <iframe><a href="https://www.jb51.net/" target="_top">これはフレーム内のフレームです</a></iframe>
</iframe>

ウェブページ C のリンクで target=_parent が設定されている場合、ウェブページ B は削除され、ウェブページ C へのリンクが A に直接埋め込まれます。

Web ページ C で target=_top の場合、すべての iframe フレームが直接ジャンプされ、C のリンク ページが直接リダイレクトされます。

_topはリンクされた文書を現在のブラウザウィンドウ全体で開き、すべてのフレームを削除します。

SEOにおけるアンカーリンクの役割

外部リンクは、常に検索エンジン最適化の中核要素の 1 つと見なされてきました。このため、さまざまな形式の外部リンクが登場していますが、すべての外部リンクが SEO に効果的であるとは限りません。

JSで書かれた外部リンクはSEOには効果がない

検索エンジンが JavaScript を認識したがらない理由は簡単に理解できます。

 <a href="#" onclick="this.href='https://www.jb51.net/'">このようなリンクは SEO には効果がありません</a>
<a href="#" onclick="window.open('https://www.jb51.net/');">このようなリンクは SEO には無効であり、Chrome などのブラウザでも開くことができません</a>

リンクrel=nofollowもSEOには効果がない

他のウェブサイトとリンクを交換し、ソースコードを通じて他のウェブサイトがリンクに rel=nofollow 属性を追加したことがわかった場合、このリンクは検索エンジンによるクロールが許可されていないことを意味します。

 <a href="https://www.jb51.net/" rel="nofollow">このようなリンクは SEO には無効です</a>

<meta name="ロボット" content="nofollow" />
<a href="https://www.jb51.net/">上記の文がウェブページの先頭にある場合、そのウェブページ内のすべてのリンクは検索エンジンによってクロールされないため、SEO には無効です</a>

リンクは背景色と同じくらいSEOに効果がない

Google検索エンジンは、一般的に黒リンクとみなされる北京と同じリンク色を持つ外部リンクを取り締まるための新しいアルゴリズムを導入した。

 <スタイル タイプ="text/css">
#vgtlink{背景:#FFF}
#vgtlinka{背景:#FFF}
</スタイル>
<div id="vgtlink">
  <a href="https://www.jb51.net/" id="vgtlinka">このようなリンクは SEO には無効です</a>
</div>

 <a href="https://www.jb51.net/" style="background:#FFF">このようなリンクも SEO には無効です</a>