Das rel-Attribut des HTML-Link-Tags

Das <link>-Tag definiert die Beziehung zwischen dem aktuellen Dokument und anderen Dokumenten in der Websammlung. Das Link-Element ist ein leeres Element, das nur Attribute enthält. Dieses Element kann nur im Kopfbereich erscheinen, dafür aber beliebig oft. In HTML hat das <link>-Tag kein schließendes Tag. In XHTML muss das <link>-Tag ordnungsgemäß geschlossen werden.

Zusätzlich zu den standardmäßigen allgemeinen Attributen von HTML enthält das Link-Element viele optionale Attribute: charset, href, hreflang, media, rel, rev, target, title und type . Von diesen Attributen darf „target“ nur in Übergangs- und Frameset-DTDs verwendet werden, während die anderen in strikten, Übergangs- und Frameset-DTDs verwendet werden können.

Unter diesen Attributen ist das rel-Attribut der Kern. In diesem Artikel stellt 123WORDPRESS.COM einige uns bekannte Rel-Attribute sowie die Verarbeitung einiger Link-Elemente in WordPress vor, was für Anfänger zum Erlernen geeignet ist.

1. Aufruf eines externen Stylesheets

(1). Stylesheet anzeigen

Der Link-Tag wird am häufigsten verwendet, um externe Stylesheets aufzurufen, beispielsweise die folgenden:

 < link rel = "stylesheet" href = "http://paranimage.com/wp-content/themes/v5/style.css" type = "text/css" media = "screen" / >

Dabei ist „href“ die URL des Zieldokuments, „type“ gibt den MIME-Typ der Ziel-URL an und „media“ gibt an, auf welchem ​​Gerät das Dokument angezeigt wird.

(2). Stylesheet für Druckgeräte

Der folgende Stylesheet-Aufruf von webdesignerwall gibt die CSS-Stile für das Dokument an, wenn es auf einem Druckgerät angezeigt wird:

 < link rel = "stylesheet" href = "http://www.webdesignerwall.com/wp-content/themes/wdw/print.css" type = "text/css" media = "print" / >

(3). Austauschbare Stylesheets

Auf manchen Webseiten werden möglicherweise auch Stylesheet-Aufrufe wie die folgenden angezeigt:

 < link rel = "alertnate stylesheet" href = "http://paranimage.com/wp-content/themes/v5/red.css" type = "text/css" media = "screen" / >

Dieser Code definiert ein alternatives Stylesheet, das in Verbindung mit dem ersten Linkelement verwendet wird. Das erste definiert das bevorzugte Stylesheet, während dieses dem Benutzer die Auswahl eines alternativen Stylesheets ermöglicht. Dieser Ersetzungsvorgang erfordert jedoch Browserunterstützung, die jedoch von vielen Browsern wie beispielsweise dem Internet Explorer nicht unterstützt wird.

Daher nutzen Webseiten, die Ersetzungsstile verwenden, im Allgemeinen etwas JS zum Stylesheet-Wechsel, sodass Benutzer die Schnittstellenstile frei wechseln können. Das sollte jeder schon einmal gesehen haben. Manche Websites definieren mehrere Farbschemata für Webseiten. Wenn WordPress-Benutzer interessiert sind, können sie Small Potatos WPDesigner 7 WordPress-Theme zur Testversion herunterladen (oder die DEMO-Version ausprobieren ). Es verwendet ein einfaches JS und mehrere austauschbare Stile, damit Benutzer die Farbe der Webseite ändern können. Für fortgeschrittenere Benutzer können Sie auch JS verwenden, um den Stil mit der Zeit zu ändern, z. B. indem tagsüber helle Farben und nachts dunkle Farben angezeigt werden.

Hinweis : Wenn Sie media="all" als bevorzugtes Stylesheet angeben und ein Druck-Stylesheet hinzufügen, entsprechen Sie eher den Webstandards (bei normalen Websites werden allerdings nur wenige Leute Ihre Seiten ausdrucken wollen). Palan Image definiert keinen Druckstil, ich werde später Zeit dafür finden

Hinweis : Die Verwendung alternativer Stile ist eine Ermessensfrage. Wenn nur das Farbschema geändert wird und der Gesamtton unverändert bleibt, ist dies akzeptabel. Aber manche Freunde, wie etwa WordPress-Benutzer, aktivieren mehrere Designs mit völlig unterschiedlichen Stilen und verwenden dann Plug-Ins, um Benutzern freie Änderungen zu ermöglichen. Das klingt vielleicht cool, aber ich rate Ihnen, es nicht zu tun. Unabhängig davon, ob es Auswirkungen auf die Suchmaschinenoptimierung hat, wird den Leuten ein klares Bild Ihrer Website fehlen.

2. Definieren Sie das Website-Favoritensymbol

Eine ausführliche Einführung zum Favicon/Lesezeichensymbol finden Sie in der Baidu-Enzyklopädie ( 1 , 2 ). Sie können es mit dem folgenden Code aufrufen.

 < link rel = "shortcut icon" href = "http://paranimage.com/wp-content/themes/v5/images/favicon.ico" type = "images/x-icon" / > < link rel = "icon" href = "http://paranimage.com/wp-content/themes/v5/images/favicon.png" type = "images/png" / >

Ich bin immer noch ein wenig verwirrt über diesen Anruf und die Ergebnisse meines Experiments sind:

• IE unterstützt nur Favicons im ICO-Format;
• Das rel-Attribut muss eine Verknüpfung enthalten, die im IE angezeigt werden soll;
• Beim Erstellen eines transparenten ICOs habe ich immer Probleme. Es gibt immer einen schwarzen Hintergrund. Selbst wenn ich im Internet Explorer einen nicht schwarzen Hintergrund einstelle, wird er in Chrome wieder schwarz.
• Erstellen Sie also ein transparentes ICO und ein transparentes PNG. Der erste Teil ist für den Aufruf durch den IE-Browser und der zweite Teil für den Aufruf durch andere Browser.

Hinweis : Sie können dieses Linkelement auch nicht verwenden, sondern direkt eine favicon.ico-Datei erstellen und diese im Stammverzeichnis der Website ablegen.

Shun Ding Share: Fügen Sie Ihrer Website ein Apple Touch-Symbol hinzu

Auf iPhone- oder iPod Touch-Geräten können Benutzer einen Link zu Ihrer Website auf dem Home-Bildschirm hinzufügen. Verwenden Sie den folgenden Code, um Ihrer Website ein Apple Touch-Symbol zuzuweisen:

 < link rel = "apple-touch-icon" href = "http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png" / >

Die Größe des Symbols beträgt 57 x 57 im PNG-Format. Wenn nicht, wird es automatisch skaliert. Und wenn ich mich nicht irre, muss es nicht die schönen abgerundeten Ecken des iPhone-Stils haben. Das iPhone lässt das Symbol mit abgerundeten Ecken automatisch entsprechend seinem Stil farbverlaufen, wie beispielsweise das Apple Touch-Symbol von last.fm.

Von den Privatanwendern nutzen nicht viele das iPhone. Und selbst wenn es viele gibt, wird Ihre Website auf dem Startbildschirm angezeigt? Ich fürchte, das ist etwas, was unsere kleinen Websites nicht leisten können. Aber nur zum Spaß habe ich eines für meine Website erstellt und das Link-Element hinzugefügt.

3. Das Link-Element in WordPress

(1). RSS-Adresse und Pingback-Adresse

Nachfolgend finden Sie die Definition der RSS2-Adresse, Atom-Adresse und Pingback-Adresse im Standard-WordPress-Theme. Ich denke, die spezifischen Prinzipien sind sehr tiefgründig und kompliziert, deshalb werde ich sie nicht studieren. Wie dem auch sei, Ihr Blog braucht es, also scheint es, als könne Atom auch ohne es auskommen?

 <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

(2) Link-Element für Remote-Publishing

Wenn Ihr Design über die Funktion <?php wp_head(); ?> verfügt, werden die folgenden beiden Linkelemente angezeigt:

 < link rel = "EditURI" type = "application/rsd+xml" title = "RSD" href = "http://localhost/wordpress/xmlrpc.php?rsd" / > < link rel = "wlwmanifest" type = "application/wlwmanifest+xml" href = "http://localhost/wordpress/wp-includes/wlwmanifest.xml" / >

Diese beiden Elemente werden hauptsächlich für die Remote-Veröffentlichung verwendet. Beispielsweise verwenden Sie zum Veröffentlichen von Artikeln einen Desktop-Blog-Editor wie Windows Live Write. Wenn Sie diese Funktion nicht benötigen, können Sie diese beiden Elemente löschen. Öffnen Sie dazu die Datei functions.php Ihres WordPress-Themes und fügen Sie unten vor dem Tag <?php } ?> bzw. ?> den folgenden Code ein:

 remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link');

Hinweis : Sie denken vielleicht, da es die Funktion <?php wp_head(); ?> ist, die diese beiden Dinge generiert, warum löschen Sie sie nicht einfach? Ja, wenn Sie nicht davon ausgehen, dass eines Ihrer anderen Plugins diese Funktion benötigt, löschen Sie sie einfach.

4. Kanonische Attribute zur Vermeidung doppelter Inhalte

Google, Yahoo und Live Search haben etwa im Februar dieses Jahres angekündigt, dass sie ein neues Link-Attribut namens Canonical unterstützen werden, das hauptsächlich dazu dient, autoritative Ketten für Webseiten anzugeben, um das Problem doppelter Inhalte zu lösen.

Eine ausführliche Einführung in dieses Attribut finden Sie unter „Angeben Ihres URL-Formats im Google Chinese Webmaster“.

Hier sind zwei Plugins, die WordPress-Benutzern empfohlen werden, um dieses Attribut zu Ihrem Kopfbereich hinzuzufügen: SEO No Duplicate oder Canonical URL’s . Verwenden Sie, was Ihnen gefällt.

Obwohl ich sagte, dass es eine vollständige Analyse sei, habe ich tatsächlich nur über einige häufig verwendete gesprochen, was für die meisten Leute ausreicht. Wenn Sie andere wichtige und häufig verwendete rel-Attribute kennen, können Sie diese gerne weitergeben.