À quoi sert la balise <link>?

La balise <link> est utilisée pour établir des liens entre le document actuel et d'autres ressources.

Principaux cas d'utilisation:

• Connexion aux feuilles de style CSS: L'utilisation la plus courante. Permet de lier des fichiers CSS externes pour styliser la page.

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

• Connexion aux polices: Par exemple, 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">
  

• Connexion aux icônes (Favicon): Changement de l'icône standard de l'onglet du navigateur.

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

• Indication de lien canonique: Aide les moteurs de recherche à déterminer la version principale de la page en cas de contenu dupliqué.

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

• Indication de versions alternatives du document: Par exemple, pour différentes langues.

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

• Préchargement des ressources (preload, prefetch, preconnect, prerender): Amélioration des performances par le chargement anticipé ou l'établissement de connexions.

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

Les attributs clés incluent rel (relation au document actuel), href (URL de la ressource), type (type MIME) et media (requête média).