CSS, HTML und Javascript mit {stil}

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

HTML link Tag zum Einbinden von CSS, hreflang, rel

Das HTML link-Tag im head-Bereich der Seite bindet externe Resourcen (z.B. eine CSS-Datei) in die Seite ein, kennzeichnen 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.

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

Das link-Tag kann mehrmals benutzt werden – um genau zu sein, ein Mal pro Link. Jedes Vorkommen des Tags muss dabei innerhalb des head-Elements liegen. Der Wert für das href-Attribut ist erforderlich.

<link rel="stylesheet" href="style.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="">

link ist ein leeres Tag. In XHTML muss noch ein Schrägstrich am Ende des link-Tags gesetzt werden, in HTML5 kann der abschließende Schrägstrich entfallen (muss aber nicht). Ebenso entfallen kann type="text/css" für Links zur CSS-Datei.

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.
rev
Reverser Link (nicht HTML5)
sizes (neu in HTML5)
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 HTML5 nicht angegeben werden.

Microdata erweitert das HTML link-Tag 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.

link rel="canonical"

link rel="canonical" kennzeichnet eine kanonische Seite als bevorzugte Version, wenn es mehrere Seiten mit ähnlichen oder gleichen Inhalten. 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/">

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 Bilder, Video oder Javascript »auf Vorrat« zu laden, die erst später auf der Seite gebraucht werden.

<head>
<link rel="preload" href="scripts.js" as="script">

</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)">

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.

<link>