Mit használ a <link> címke?

A <link> címke a jelenlegi dokumentum és más erőforrások közötti kapcsolatok létrehozására szolgál.

Fő felhasználási esetek:

• Stíluslapok (CSS) csatolása: A leggyakoribb alkalmazás. Lehetővé teszi külső CSS fájlok csatolását az oldal stílusozásához.

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

• Betűtípusok csatolása: Például 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">
  

• Ikonok (Favicon) csatolása: A böngészőfül alapértelmezett ikonja módosítása.

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

• Kanonikus hivatkozás megadása: Segít a keresőmotoroknak meghatározni az oldal fő verzióját duplikált tartalom esetén.

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

• Az oldal alternatív verzióinak megadása: Például különböző nyelveken.

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

• Erőforrások előzetes betöltése (preload, prefetch, preconnect, prerender): A teljesítmény javítása az előzetes betöltéssel vagy kapcsolatok létesítésével.

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

A kulcsfontosságú attribútumok közé tartozik a rel (kapcsolat a jelenlegi dokumentummal), href (az erőforrás URL-je), type (MIME-típus) és a media (médiaszűrő).