Einführung in HTML-Link-Ankertags und ihre Rolle bei der Suchmaschinenoptimierung

Das <a>-Tag wird hauptsächlich verwendet, um Links und Lesezeichen zu definieren, die auch als Hyperlinks oder Ankerlinks bezeichnet werden. Die häufigsten Verwendungen sind wie folgt:

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

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

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

 <a name="nach oben"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">Zurück nach oben</a>
<a href="#1">Kapitel 1 öffnen</a>
<a href="#2">Kapitel 2 öffnen</a>

Beim Öffnen des E-dimensional Technology W3CSchool Online-Tutorials erscheint unterhalb des Titels die Navigation, die durch den Namen des Lesezeichens erstellt wird.

Javascript-Event-Attribute, führen nach dem Klicken verschiedene Befehle aus

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

CSS-Stil für Ankerlinks

Wenn kein benutzerdefinierter Ankerlink-CSS-Stil <a href="https://www.jb51.net/">Ankerlinktext</a> vorhanden ist, sieht der Standard-Ankerlink-Stil wie folgt aus:

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

<style type="text/css">

eine {Farbe:#00F}

a:besucht{color:#800080}

ein:hover{color:#F00}

</Stil>

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

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

a:visited{color:#800080} Der Link ist nach dem Anklicken lila und unterstrichen

a:hover{color:#F00} Wenn die Maus ausgelöst wird, ist die Farbe rot und unterstrichen

Da diese drei Farben jedoch zu stark sind, können sie häufig nicht mit allen Webdesignstilen übereinstimmen. Wenn Sie Ankerlink-Stile in anderen Farben benötigen, müssen Sie die Farbe und den Hintergrund nur selbst in CSS entsprechend den oben genannten drei Stilen ändern.

Warum sind Ankerlinks unterstrichen?

Tatsächlich waren die Browser bei der Einführung von HTML noch nicht so weit fortgeschritten wie heute. Gleichzeitig hatten Computerbildschirme damals noch keine Farben wie LCDs heute. Viele waren sogar schwarzweiß. Damals konnte man durch Unterstreichen erkennen, ob es sich um einen Link handelte. Auf vielen Schwarzweißmonitoren oder Webseiten für farbenblinde Benutzer wird die Unterstreichung jedoch so weit wie möglich beibehalten, da Benutzer sonst die Farben nicht unterscheiden können.

Aus ästhetischen Gründen wird beim modernen Webseiten-Design natürlich grundsätzlich darauf verzichtet, Unterstriche und Unterstriche direkt auf Links zu setzen. Um jedoch auf farbenblinde Benutzer und Benutzer von schwarz-weißen Handydisplays Rücksicht zu nehmen, wird empfohlen, den CSS-Stil so einzustellen, dass beim Auslösen der Maus des Benutzers eine Unterstreichung erfolgt.

Ankerlink Zielsprungfenstereinstellung

Wenn Sie die Links auf dieser Seite öffnen, werden Sie feststellen, dass einige Links in anderen Fenstern angezeigt werden, während andere Links diese Seite direkt ersetzen. 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. das Standardziel = "_self"

 <a href="https://www.jb51.net/" target="_self">Dies ist das aktuelle neue Fenster, das die Homepage von E-dimensional Technology zeigt</a>

_blank Neues Fenster öffnet sich

 <a href="https://www.jb51.net/" target="_blank">Dies ist das neue Fenster zur Anzeige der Homepage von E-dimensional Technology</a>

Unbenanntes Ziel In einem neuen Fenster öffnen

 <a href="https://www.jb51.net/" target="_weigeti"> Wenn _weigeti hier nicht der Name oder die ID innerhalb der Webseite ist, werden alle target="_weigeti"-Links auf der Webseite im selben neuen Fenster geöffnet, während _blank für jeden Link ein anderes neues Fenster öffnet</a>

Frame-Name oder ID

 <a href="https://www.jb51.net/" target="weigeti">Klicken Sie hier, um die Homepage von E-dimensional Technology im Rahmen unter name="weigeti" anzuzeigen. Es wird nicht zu einem neuen Fenster gesprungen oder das aktuelle Fenster ersetzt.</a>
<iframe name="weigeti"></iframe>

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

 <iframe>
   <a href="https://www.jb51.net/" target="_parent">Dies ist innerhalb des Rahmens</a>
</iframe>

_top Die oberste Ebene des Frames . Beispielsweise bettet Webseite A einen Iframe in Webseite B ein und Webseite B bettet einen Iframe in Webseite C ein.

 <iframe>
   <iframe><a href="https://www.jb51.net/" target="_top">Dies ist ein Rahmen innerhalb eines Rahmens</a></iframe>
</iframe>

Wenn der Link in Webseite C target=_parent setzt, wird Webseite B entfernt und der Link zu Webseite C direkt in A eingebettet;

Wenn in der Webseite C target=_top ist, werden alle Iframe-Frames direkt ausgelesen und die Linkseite in C direkt umgeleitet.

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

Die Rolle von Ankerlinks in der SEO

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

Externe Links, die von JS geschrieben werden, sind für SEO nicht effektiv

Es ist leicht zu verstehen, warum Suchmaschinen JavaScript nicht so gerne erkennen.

 <a href="#" onclick="this.href='https://www.jb51.net/'">Solche Links sind für SEO nicht effektiv</a>
<a href="#" onclick="window.open('https://www.jb51.net/');">Solche Links sind für SEO ungültig und können nicht einmal in Browsern wie Chrome geöffnet werden</a>

Link rel=nofollow ist auch für SEO unwirksam

Wenn Sie Links mit anderen Websites austauschen und im Quellcode feststellen, dass die andere Website Ihrem Link das Attribut rel=nofollow hinzugefügt hat, bedeutet dies, dass dieser Link nicht von Suchmaschinen gecrawlt werden darf.

 <a href="https://www.jb51.net/" rel="nofollow">Solche Links sind für SEO ungültig</a>

<meta name="robots" content="nofollow" />
<a href="https://www.jb51.net/">Wenn der obige Satz am Anfang einer Webseite steht, werden alle Links innerhalb dieser Webseite nicht von Suchmaschinen gecrawlt, daher ist er für SEO ungültig</a>

Links sind für SEO genauso ineffektiv wie Hintergrundfarben

Die Suchmaschine Google hat einen neuen Algorithmus eingeführt, um gegen externe Links mit der gleichen Linkfarbe wie Peking vorzugehen, die im Allgemeinen als schwarze Links gelten.

 <style type="text/css">
#vgtlink{Hintergrund:#FFF}
#vgtlinka{Hintergrund:#FFF}
</Stil>
<div id="vgtlink">
  <a href="https://www.jb51.net/" id="vgtlinka">Solche Links sind für SEO ungültig</a>
</div>

 <a href="https://www.jb51.net/" style="background:#FFF">Solche Links sind auch für SEO ungültig</a>