HTML link-Tag – CSS-Datei einbinden, kanonische URL und preload

HTML link Tag zum Einbinden von CSS, hreflang, rel und Preload

Das HTML link-Element im head-Bereich der Seite bindet externe Resourcen (z.B. eine CSS-Datei) in die Seite ein, kennzeichnet eine URL der Seite mit canonical als bevorzugte Version und weist den Browser an, Ressourcen nach dem Laden der Seite im Voraus (preload) zu laden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Ein link für jeden Link

HTML link kann mehrmals benutzt werden – um genau zu sein, ein Mal pro Link. Die meisten link-Elemente müssen innerhalb des head-Elements liegen. Der Wert für das href-Attribut ist erforderlich.

<link rel="stylesheet" href="style.css" type="text/css" media="screen">

Ein anderes Beispiel für das link-Tag ist der Link zum Favicon.

<link rel="shortcut icon" href="https://www.mediaevent.de/favicon.ico">

Zusätzliche Datenquellen angeben – RSS- oder Atom:

<link rel="alternate" type="application/rss+xml" title="" href="">
<link rel="alternate" type="application/atom+xml" title="" href="">

Wenn CSS-Regeln in einer .css-Datei gespeichert sind, wird z.B. die CSS-Datei durch ein link-Tag in das aktuelle Dokument eingebunden.

link ist ein leeres Tag (void) und muss nicht durch einen abschließenden Schrägstrich geschlossen werden.

Kanonische URL – link rel="canonical"

link rel="canonical" kennzeichnet eine kanonische URL als bevorzugte Adresse, wenn es mehrere URLs für eine Seite oder mehrere Seiten mit ähnlichen oder gleichen Inhalten gibt. Kanonische Links lösen das Problem unterschiedlicher URLs oder Adressen, hinter denen ein und dieselbe Webseite sitzt. Ein klassisches Beispiel ist

<link rel="canonical" href="https://www.mediaevent.de/"> oder
<link rel="canonical" href="https://mediaevent.de/">

oder 

<link rel="canonical" href="https://www.mediaevent.de/index.html"> oder
<link rel="canonical" href="https://www.mediaevent.de/">

Für Content Management Systeme wie WordPress ist der kanonische Link so wichtig, weil die Seiten neben der sprechenden URL auch eine URL als Shortlink ausweisen. Shortlinks sind was der Name sagt: Eine kurze Variante der sprechenden Adresse oder URL. Sie werden z.B. in den sozialen Medien eingesetzt, um den Text kurz zu halten.

<link rel="canonical" href="https://www.mediaevent.de/android-ios-emulator/">
<link rel="shortlink" href="https://www.mediaevent.de/?p=7108">

link-Element am Ende

link-Tags sind nicht nur im head-Element der Seite erlaubt, sondern auch im body-Element. Ein <link …> im head-Element zählt zum Flow Content, im body-Element zählt es als Phrasing Content.

HTMLLiving Standard — Last Updated 27 July 2021 4.2.4. The link element

Damit ist es z.B. kein Problem, das Drucker-Stylesheet erst im Seitenfuß zu laden, damit es das initiale Laden der Seite nicht aufhält.

Link rel, media, sizes

href (erforderlich)
eine gültige URL des gelinkten Dokuments.
crossorigin
wie crossorigin-Anfragen behandelt werden
hreflang
Sprache des gelinkten Dokuments.
media
gibt an, auf welches Medium sich der Link bezieht. Gültige Werte sind all, aural, braille, handheld, print, projection, screen, tty und tv oder Querys wie screen and max-wdith:640.
rel
ist eine durch Leerzeichen getrennte Liste von Werten, mit denen die Art der Verwandschaft zur aktuellen Webseite erklärt wird. Mögliche Werte
  • author Informationen zum Autor,
  • alternate Alternative Version der Seite (z,B. Sprachversion, mobile Version),
  • canonical, eindeutige URL (Adresse) der Webseite,
  • help Hilfestellung zu dieser Seite,
  • icon, importiert ein Icon für den besseren Wiedererkennungswert der Seite in Bookmarks,
  • license, Informationen zum Copyright der Seite,
  • next / prev Kennzeichnet die Seite als Teil einer Serie, der Link in href ist die vorangehende / folgende Seite,
  • prefetch Resource in den Cache laden,
  • preload Navigations-Elemente im Voraus und im Cache speichern,
  • search Suche nach aktuellen / verwandten Dokumenten,
  • stylesheet CSS-Datei laden – type="text/css" für Links zur CSS-Datei ist nicht erforderlich.
rev
Reverser Link
sizes
Größe der gelinkten Resource als [width] x [height], z.B. 32x64. Gilt nur für rel="icon".
<link href="favicon.ico" rel="icon" sizes="32x32 64x64">
type
gibt den MIME-Typ (Multipurpose Internet Mail Extension) des gelinkten Dokuments an. type="text/css" ist der einzig mögliche Wert für rel="stylesheet" und muss in nicht angegeben werden.

Microdata erweitert das HTML link-Element um das itemprop-Attribut. Wenn das itemprop-Attribut gesetzt ist, kann das link-Tag auch im body des Dokuments benutzt werden (und das rel-Attribut darf nicht eingesetzt werden).

Also: mit rel-Attribut nur im head, mit itemprop-Attribut auch im body.

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  by <span itemprop="author">J.D. Salinger</span>
</div>

Beispiel von schema.org: Durch die Angabe eines Links sollen Suchmaschinen die Beschreibung besser verstehen, gleichzeitig ist aber kein sichtbarer Link gewünscht.

Im Voraus laden mit rel preload

rel="preload" ist für Resourcen gedacht, die so früh wie möglich nach dem Laden der Seite zur Verfügung stehen sollen – noch bevor das Rendern der Seite beginnt. Das ist um so effizienter, je größer die angeforderte Resource und je später sie im Dokument geladen wird.

Beim Preload nutzen die Browser Leerlaufzeiten, um Hintergrundbilder, Video oder Javascript »auf Vorrat« zu laden, die erst später auf der Seite gebraucht werden. Ein klassische Beispiel ist das Nachladen von CSS-Dateien für den Seitenfuß per Javascript.

<head>
<link rel="preload" href="/css/footer.css" as="style">

</head>
<body>
<script src="main.js"></script>
</body>

Mehr oder minder jeder Typ von externer Resource kann so vorab angefordert werden:

  • as="script"
  • as="style"
  • as="image"
  • as="media"
  • as="document" (für iframes in der Seite)
  • as="track" (Track – WebVTT-Dateien)

link rel="preload" führt beim Laden von Bildern auch Media Queries durch:

<link rel="preload" as="image" href="map.png" media="(min-width: 920px)">

Für Bilder, die mit loading="lazy" ausgestattet sind, wird kein link rel="preload" as="image" eingestellt. Sie werden von den Browsern, die loading lazy bereits unterstützen, bei der Annäherung so schnell geladen, dass es kaum ins Auge fällt. Der Clou des Nachladens im letzten Moment ist aber gerade, dass Ressourcen gar nicht erst geladen werden, wenn der Benutzer nicht weit genug scrollt und sowohl Benutzer als auch der Server den unnötigen Transfer sparen.

link hreflang

hreflang meldet die Sprachversion der Webseite. Wenn eine Webseite in mehrere Sprachen übersetzt ist, können die Inhalte dennoch teilweise gleich sein – z.B. wenn Seiten nicht übersetzt sind (etwa bei österreichischen und einer deutschen Ausgabe der Seite). Das führt zu Duplicated Content und einer Abwertung im Suchmaschinen-Rang.

<link rel="alternate" hreflang="de-de" href="https://myshop.de/">
<link rel="alternate" hreflang="de-at" href="https://myshop.at/">
<link rel="alternate" hreflang="en-en" href="https://myshop.com/">

Diese Einträge im Seitenkopf zeigen den Suchmaschinen, dass es mehrere Sprachversionen der Seite gibt. Am besten führt der internationale Internet-Auftritt die link hreflang-Tags für jede einzelne URL auf.

<link rel="alternate" hreflang="de-de" href="https://myshop.de/produkt-1">
<link rel="alternate" hreflang="de-at" href="https://myshop.at/produkt-1">
<link rel="alternate" hreflang="en-en" href="https://myshop.com/product-1">

Mehr zum richtigen Einsatz des hreflang-Attributs für mehrsprachige Webseiten: hreflang: Die 9 häufigsten Fehler

link rel="next" / rel="prev"

Mit dem rel-Attribut kann das link-Tag die Beziehung zu anderen Seiten innerhalb des Internet-Auftritts aufzeigen, typischerweise next und previous, nächste und vorangehende Seite. Der praktische Nutzen dieser Angabe ist allerdings zweifelhaft, denn der Benutzer oder Besucher der Seite sieht von diesen Angaben nichts.