A cosa serve il tag <link>?

Il tag <link> viene utilizzato per stabilire collegamenti tra il documento corrente e altre risorse.

Principali casi d'uso:

• Connessione a fogli di stile CSS: L'uso più comune. Permette di collegare file CSS esterni per la stilizzazione della pagina.

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

• Connessione a font: Ad esempio, 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">
  

• Connessione a icone (Favicon): Modifica dell'icona standard della scheda del browser.

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

• Indicazione del link canonico: Aiuta i motori di ricerca a determinare la versione principale della pagina in presenza di contenuto duplicato.

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

• Indicazione di versioni alternative del documento: Ad esempio, per diverse lingue.

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

• Precaricamento delle risorse (preload, prefetch, preconnect, prerender): Miglioramento delle prestazioni tramite caricamento anticipato o stabilimento di connessioni.

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

Gli attributi chiave includono rel (relazione con il documento corrente), href (URL della risorsa), type (tipo MIME) e media (query dei media).