Для чего используется тег <link>?

Тег <link> используется для установления связей между текущим документом и другими ресурсами.

Основные случаи использования:

• Подключение таблиц стилей CSS: Самое распространенное применение. Позволяет подключить внешние CSS-файлы для стилизации страницы.

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

• Подключение шрифтов: Например, 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">
  

• Подключение иконок (Favicon): Изменение стандартной иконки вкладки браузера.

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

• Указание канонической ссылки: Помогает поисковым системам определить основную версию страницы при наличии дублирующего контента.

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

• Указание альтернативных версий документа: Например, для разных языков.

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

• Предварительная загрузка ресурсов (preload, prefetch, preconnect, prerender): Улучшение производительности путем заблаговременной загрузки или установления соединений.

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

Ключевые атрибуты включают rel (отношение к текущему документу), href (URL ресурса), type (тип MIME) и media (медиа-запрос).