Do czego służy tag <link>?

Znacznik <link> służy do ustanawiania połączeń między bieżącym dokumentem a innymi zasobami.

Główne przypadki użycia:

• Podłączanie arkuszy stylów CSS: Najczęstsze zastosowanie. Pozwala na podłączenie zewnętrznych plików CSS do stylizacji strony.

  <link rel="stylesheet" href="/css/style.css">
  

• Podłączanie czcionek: Na przykład 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">
  

• Podłączanie ikon (Favicon): Zmiana standardowej ikony zakładki przeglądarki.

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

• Wskazanie linku kanonicznego: Pomaga wyszukiwarkom określić główną wersję strony w przypadku duplikatów treści.

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

• Wskazanie wersji alternatywnych dokumentu: Na przykład dla różnych języków.

  <link rel="alternate" hreflang="en" href="https://example.com/en/page">
  

• Wstępne ładowanie zasobów (preload, prefetch, preconnect, prerender): Poprawa wydajności poprzez wstępne ładowanie lub ustanawianie połączeń.

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

Kluczowe atrybuty obejmują rel (związek z bieżącym dokumentem), href (adres URL zasobu), type (typ MIME) i media (zapytanie medialne).