Externes Ressourcen-Link-Element

08/10/2022
HTML Link Types

Das <link>-Tag, das zwischen den <head></head>-Tags verwendet wird, wird verwendet, um Ressourcen außerhalb der Seite in die Seite zu laden.

Das Attribut rel="" bestimmt die Verwendung des <link>-Tags.

<link> Tag für Stildateien (rel=”stylesheet”)

Das Link-Tag rel="stylesheet" wird verwendet, um die auf der Seite verwendeten externen CSS-Dateien aufzurufen.

<link rel="stylesheet" href="https://example.com/style.css" type="text/css" media="all" />

<link> Tag für Canonical (rel=”canonical”)

Verwenden Sie das kanonische rel="canonical" <link>-Attribut, mit dem die kanonische URL der Seite angegeben wird.

<link rel="canonical" href="https://example.com/"/>

<link> Tag für Favicon (rel=”icon”)

Um der Seite ein Favicon hinzuzufügen, verwenden Sie das Tag rel="icon" <link> im Quellcode der Seite.

<link rel="icon" href="https://example.com/icon-32.png" sizes="32x32" />
<link rel="icon" href="https://example.com/icon-32.png" sizes="1922x922" />

<link> Tag für Sprachversionen von Seiten (rel=alternate)

Das Tag rel="alternate" <link> wird verwendet, um alternative Seiten von Webseiten in Fremdsprachen anzugeben.

<link rel="alternate" href="https://juniortoexpert.com/de/" hreflang="de" /> 
<link rel="alternate" href="https://juniortoexpert.com/en/" hreflang="en" /> 
<link rel="alternate" href="https://juniortoexpert.com/tr/" hreflang="tr" /> 
<link rel="alternate" href="https://juniortoexpert.com/fr/" hreflang="fr" /> 
<link rel="alternate" href="https://juniortoexpert.com/" hreflang="x-default" />

<link> Tags für die Seitenladeleistung

rel="dns-prefetch", rel="preconnect", rel="preload" werden verwendet, um den Ladevorgang der Seite zu beschleunigen.

rel=”dns-prefetch” <link> Tag

<link rel="dns-prefetch" href="https://tagmanager.google.com/" />

rel=”preconnect” <link> Tag

<link rel="preconnect" href="https://example.com">

rel=”preoad” <link> Tag

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2">

Wird das Link-Tag außerhalb des <head>-Tags verwendet?

Es wird empfohlen, <link>-Tags innerhalb von <head>-Tags in der HTML-Architektur zu verwenden, aber das <link>-Tag funktioniert, wenn es außerhalb des <head>-Tags positioniert wird.

Verweise:

https://web.dev/