HTML リンク アンカー タグと SEO_HTML/Xhtml_Web ページ制作におけるその役割の概要

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

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

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

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

<a name="top"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">返回顶部</a>
<a href="#1">打开第一章</a>
<a href="#2">打开第二章</a>

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

JavaScript イベント属性。 をクリックした後に別のコマンドを実行します。

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

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

カスタム アンカー リンクアンカー リンク テキストCSS スタイルがない場合、デフォルトのアンカー リンク スタイルは次のとおりです:

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

<a href="http://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 ページでは下線を使用することであり、下線を付けないとユーザーは色を区別できませんでした。 。

もちろん、見た目を美しくするために、現代の Web デザインでは一般的にリンクに直接下線を引きません。ただし、色覚異常のユーザーや白黒の携帯電話のディスプレイを使用するユーザーに配慮するために、ユーザーのマウスがトリガーしたときに CSS スタイルに下線が表示されるように設定することをお勧めします。

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

このページ上のリンクを開くと、一部のリンクを開くと他のウィンドウが表示され、一部のリンクを開くとこのページが直接置き換えられることがわかります。このジャンプメソッドは、アンカーリンクのターゲット属性を使用してジャンプウィンドウを設定できます。

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

<a href="http://www.jb51.net/" target="_self">这里是当前新窗口显示E维科技首页</a>

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

<a href="http://www.jb51.net/" target="_blank">这里是打开新窗口显示E维科技首页</a>

名前のないターゲットが新しいウィンドウで開きます

<a href="http://www.jb51.net/" target="_weigeti"> 如果这里面的_weigeti不是网页内部的name或id，就网页中所有target="_weigeti" 链接都在同一个新窗口打开，而_blank每个链接都打开不同新窗口 </a>

フレーム名または ID

<a href="http://www.jb51.net/" target="weigeti">点击这里，将在下面name="weigeti" 的框架里面显示E维科技首页，不会跳转新窗口或者替换当前窗口</a>
<iframe name="weigeti"></iframe>

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

<iframe>
   <a href="http://www.jb51.net/" target="_parent">这里是框架内部</a>
</iframe>

_top フレーム の最上位レベル。たとえば、Web ページ B はネットワーク A の iframe に埋め込まれ、Web ページ C は Web ページ B の iframe に埋め込まれます。

<iframe>
   <iframe><a href="http://www.jb51.net/" target="_top">这里是框架内部的框架</a></iframe>
</iframe>

Web ページ C のリンク設定 target=_parent の場合、Web ページ B が削除され、リンク ページが A の Web ページ C に直接埋め込まれます。

Web ページ C で target=_top の場合、すべての iframe を飛び出し、C のリンク ページに直接移動します。

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

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

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

JS で書かれた外部リンクは SEO では無効です

検索エンジンは Javascript を認識することに比較的消極的であるため、これは簡単に理解できます。

リンク rel=nofollow も SEO では無効です

<a href="#" onclick="this.href='http://www.jb51.net/'">这样的链接对SEO无效</a>
<a href="#" onclick="window.open('http://www.jb51.net/');">这样的链接对SEO无效，甚至在Chrome等浏览器下都无法打开</a>

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

リンクと背景色は SEO には効果的ではありません

<a href="http://www.jb51.net/" rel="nofollow">这样的链接对SEO无效</a>

<meta name="robots" content="nofollow" />
<a href="http://www.jb51.net/">如果网页开头有上面一句话，那么这个网页内部所有链接都不会会搜索引擎抓取，所以对SEO无效</a>

Google 検索は、北京と同じ色の外部リンクを取り締まる新しいアルゴリズムを開始しました。そのような外部リンクは一般にブラックリンクとみなされます。