Heim  >  Artikel  >  Web-Frontend  >  Einführung in HTML-Link-Anker-Tags und ihre Rolle bei der Erstellung von SEO_HTML/Xhtml_Webseiten

Einführung in HTML-Link-Anker-Tags und ihre Rolle bei der Erstellung von SEO_HTML/Xhtml_Webseiten

WBOY
WBOYOriginal
2016-05-16 16:38:581493Durchsuche

Das

3499910bf9dac5ae3c52d5ede7383485-Tag wird hauptsächlich zum Definieren von Links und Lesezeichen verwendet. Es wird auch als Hyperlink oder Ankerlink bezeichnet. Die häufigsten Verwendungszwecke sind:

Erstellen Sie ein Hyperlink-href-Attribut und springen Sie zum Link in der Mitte von href="".

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

Erstellen Sie ein Lesezeichen, verwenden Sie das Namens- oder ID-Attribut und fügen Sie „#“ am Ende des Hyperlinks und den Namen dieses Lesezeichens hinzu, um zu einer bestimmten Stelle auf der Webseite zu springen

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

Wenn Sie das Online-Tutorial von E-Dimension Technology W3CSchool öffnen, wird die Navigation unter dem Titel angezeigt. Diese werden über den Lesezeichennamen erstellt.

Javascript-Ereignisattribute, verschiedene Befehle ausführen, nachdem Sie auf

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

Ankerlink-CSS-Stil

Wenn kein benutzerdefinierter Ankerlink7441550ff19d67aece0736607957bb92Ankerlinktext5db79b134e9f6b82c0b36e0489ee08edCSS-Stil vorhanden ist, lautet der Standardankerlinkstil wie folgt:

Standard-Linkstil, bitte verwenden Sie die Maus zum Auslösen, um den Effekt zu sehen

080b747a20f9163200dd0a7d304ba388

a{color:#00F}

a:visited{color:#800080}

a:hover{color:#F00}

531ac245ce3e4fe3d50054a55f265927

7441550ff19d67aece0736607957bb92www.jb51.net5db79b134e9f6b82c0b36e0489ee08ed

a{color:#00F} Nicht besuchte Ankerlinks sind blau und unterstrichen

a:visited{color:#800080} Der Link wird nach dem Klicken lila und unterstrichen sein

a:hover{color:#F00} Wenn die Maus gedrückt wird, wird es rot und unterstrichen

Da diese drei Farben jedoch zu stark sind, passen sie oft nicht zu allen Webdesign-Stilen. Wenn Sie Ankerlink-Stile in anderen Farben benötigen, müssen Sie nur die Farbe und den Hintergrund in CSS entsprechend den oben genannten drei Stilen ändern.

Warum müssen Ankerlinks unterstrichen werden?

Tatsächlich waren die Browser noch nicht so fortschrittlich wie heute, als HTML zum ersten Mal eingeführt wurde. Gleichzeitig verfügten Computerbildschirme damals nicht über die Farben heutiger LCDs und viele waren sogar schwarzweiß. Zu dieser Zeit konnte durch Unterstreichen unterschieden werden, ob es sich um einen Link handelte. Auf vielen Schwarz-Weiß-Anzeigen oder auf Webseiten für farbenblinde Benutzer war es am besten, die Unterstreichung beizubehalten, da Benutzer sonst nicht in der Lage wären, Farben zu unterscheiden .

Natürlich setzt modernes Webdesign aus ästhetischen Gründen im Allgemeinen keine Unterstreichungen direkt auf Links. Um jedoch auf farbenblinde Benutzer und Benutzer mit Schwarzweiß-Displays auf Mobiltelefonen Rücksicht zu nehmen, wird empfohlen, den CSS-Stil so einzustellen, dass er unterstrichen wird, wenn die Benutzermaus ihn auslöst.

Ankerlink Zielsprungfenstereinstellungen

Wenn Sie Links auf dieser Seite öffnen, werden Sie feststellen, dass das Öffnen einiger Links zu anderen Fenstern führt, während das Öffnen einiger Links diese Seite direkt ersetzt. Diese Sprungmethode kann das Zielattribut des Ankerlinks verwenden, um das Sprungfenster festzulegen.

_self Das aktuelle Fenster ist geöffnet und Ankerlinks springen standardmäßig zum aktuellen Browserfenster, d. h. zum Standardziel="_self"

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

_blank Neues Fenster öffnet sich

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

Unbenanntes Ziel wird in einem neuen Fenster geöffnet

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

Rahmenname oder -ID

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

_parent Das übergeordnete Fenster öffnet und lädt die verknüpfte Datei in das übergeordnete Frameset oder übergeordnete Fenster, das den verknüpften Frame enthält. Wenn der Frame mit dem Link nicht verschachtelt ist, wird die verknüpfte Datei genau wie der Parameter _self im Vollbildfenster des Browsers geladen.

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

_top Die oberste Ebene des Frames , zum Beispiel ist Webseite B in Iframe in Netzwerk A eingebettet und Webseite C ist in Iframe in Webseite B eingebettet

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

Wenn die Link-Einstellung target=_parent in Webseite C ist, dann springen Sie, um Webseite B zu entfernen und die Link-Seite direkt in Webseite C in A einzubetten;

Und wenn target=_top in Webseite C, springt es aus allen Iframes heraus und geht direkt zur Linkseite in C.

_top öffnet das verlinkte Dokument im gesamten aktuellen Browserfenster und entfernt somit alle Frames

Die Rolle von Ankerlinks bei SEO

Externe Links gelten seit jeher als Kernelement der Suchmaschinenoptimierung. Aus diesem Grund gibt es verschiedene Formen externer Links, aber nicht alle externen Links sind für SEO effektiv.

In JS geschriebene externe Links sind für SEO ungültig

Suchmaschinen sind relativ zurückhaltend bei der Erkennung von Javascript, daher ist dies leicht zu verstehen.

<a href="#" onclick="this.href='http://www.jb51.net/'">这样的链接对SEO无效</a>
<a href="#" onclick="window.open('http://www.jb51.net/');">这样的链接对SEO无效,甚至在Chrome等浏览器下都无法打开</a>
Link rel=nofollow ist auch für SEO ungültig

Wenn Sie Links mit einer anderen Website austauschen und anhand des Quellcodes feststellen, dass die andere Website Ihrem Link das Attribut rel=nofollow hinzugefügt hat, bedeutet dies, dass der Link nicht von Suchmaschinen gecrawlt wird.

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

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

Die Google-Suche hat einen neuen Algorithmus eingeführt, um gegen externe Links mit derselben Farbe wie Peking vorzugehen. Solche externen Links werden im Allgemeinen als schwarze Links betrachtet.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn