Wofür wird das <link>-Tag verwendet?

Das <link>-Tag wird verwendet, um Verbindungen zwischen dem aktuellen Dokument und anderen Ressourcen herzustellen.

Hauptanwendungsfälle:

Verbindung zu CSS-Stylesheets: Die häufigste Anwendung. Ermöglicht das Einbinden externer CSS-Dateien zur Gestaltung der Seite.
```
<link rel="stylesheet" href="/css/style.css">
```

Verbindung zu Schriftarten: Zum Beispiel Google Fonts.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Verbindung zu Icons (Favicon): Änderung des Standard-Tab-Icons im Browser.

<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">

Angabe des kanonischen Links: Hilft Suchmaschinen, die Hauptversion der Seite bei doppeltem Inhalt zu erkennen.
```
<link rel="canonical" href="https://example.com/page">
```
Angabe alternativer Versionen des Dokuments: Zum Beispiel für verschiedene Sprachen.
```
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
```

Preload, Prefetch, Preconnect, Prerender: Verbesserung der Leistung durch vorzeitiges Laden oder Verbindungsherstellung.

<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://api.example.com">
<link rel="prefetch" href="/data/next-page.json">
<link rel="prerender" href="https://example.com/next-page">

Wichtige Attribute sind rel (Beziehung zum aktuellen Dokument), href (URL der Ressource), type (MIME-Typ) und media (Medienabfrage).