<link>

対応:		HTML 4（1997）

『<link>』タグは外部リソース（CSSファイル・faviconなど）とHTMLドキュメントを紐付けるタグです。『<head>』内に記述し、終了タグは不要な空要素です。

構文

<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="style.css">

<!-- faviconの指定 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- 印刷用CSSの読み込み -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 先読み（プリロード） -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

属性一覧

属性	概要
rel	リンク先リソースとの関係を指定します。最も重要な属性で、必須です。
href	リンク先リソースのURLを指定します。
type	リソースのMIMEタイプを指定します。省略可能な場合がほとんどです。
media	リソースを適用するメディアを指定します。『screen』『print』などを指定します。
crossorigin	クロスオリジンリソースの取得方法を指定します。フォントのプリロード時などに使用します。
as	プリロード（rel="preload"）時にリソースの種類を指定します。

relの主な値一覧

rel値	概要
stylesheet	外部CSSファイルを読み込みます。最もよく使用される値です。
icon	ブラウザのタブに表示されるfaviconを指定します。
canonical	重複ページが存在する場合に正規URLを検索エンジンに伝えます。
preload	ページ表示に必要なリソースをあらかじめ読み込んでおきます。
alternate	別言語版・印刷版などの代替ページを指定します。

サンプルコード

sample_link.html

<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>

  <!-- CSSファイルの読み込み（最もよく使います） -->
  <link rel="stylesheet" href="css/style.css">

  <!-- 印刷時にだけ適用されるCSS -->
  <link rel="stylesheet" href="css/print.css" media="print">

  <!-- faviconの指定 -->
  <link rel="icon" href="favicon.ico">

  <!-- スマートフォン用のアイコン -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <!-- 正規URLの指定 -->
  <link rel="canonical" href="https://wp-p.info/page/">

  <!-- 多言語サイト：日本語・英語版の対応を示す -->
  <link rel="alternate" hreflang="ja" href="https://wp-p.info/ja/page/">
  <link rel="alternate" hreflang="en" href="https://wp-p.info/en/page/">
  <link rel="alternate" hreflang="x-default" href="https://wp-p.info/page/">

  <!-- フォントを先読みして表示崩れを防ぐ -->
  <link rel="preload" href="fonts/NotoSansJP.woff2"
        as="font" type="font/woff2" crossorigin>
</head>

実行結果

CSSファイルが読み込まれてページにスタイルが適用されます。faviconはブラウザのタブや、スマートフォンでホーム画面に追加した際のアイコンとして表示されます。印刷プレビューでは『print.css』が適用され画面表示とは異なるスタイルになります。フォントのpreloadによりテキストが正しいフォントで描画されるまでの時間が短縮されます。

サンプルページはこちら

概要

『<link>』タグで最もよく使用するのは『rel="stylesheet"』によるCSSファイルの読み込みです。複数のCSSファイルを読み込む場合は、複数の『<link>』タグを記述します。

CSSファイルはページのレンダリングをブロックするため、できるだけ少ないファイル数にまとめることがページの表示速度向上につながります。JavaScriptファイルは逆に『<body>』の末尾に置くか、『<script>』タグに『defer』属性を指定することで読み込みを遅延させるのが一般的です。

『rel="preload"』を使うと、フォントや画像などをHTMLの解析と並行して先読みできるため、ページの表示速度改善に効果的です。フォントをプリロードする場合は『crossorigin』属性の指定を忘れないようにしてください。指定がないとフォントが二重に読み込まれてしまいます。

preload / prefetch / preconnect / dns-prefetch の使い分け

リソースの先読みには4種類の方法があります。用途に応じて使い分けることが重要です。

rel値	優先度	タイミング	向いている用途
preload	高	今のページで確実に使う	Webフォント・ヒーロー画像・クリティカルCSS
prefetch	低	次のページで使う可能性がある	次のページのJS・画像（アイドル時間に取得）
preconnect	中	外部ドメインへの接続を事前確立	Google Fonts・CDN・API サーバー
dns-prefetch	低	DNSのみ事前解決	preconnectに非対応ブラウザへのフォールバック

<!-- Google Fontsを高速化するパターン（推奨） -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- preconnectに非対応のブラウザ向けフォールバック -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap">

<!-- ヒーロー画像を優先的に先読み -->
<link rel="preload" href="/img/hero.webp" as="image" type="image/webp">

<!-- 次のページを先読み（一覧ページ→詳細ページの流れがある場合） -->
<link rel="prefetch" href="/articles/page2/">

JavaScriptでlinkタグを動的に操作する

// CSSを動的に読み込む（テーマ切り替えなど）
function loadCSS(href) {
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = href;
  document.head.appendChild(link);
}
loadCSS("/css/theme-dark.css");

// CSSを削除する（テーマ元に戻す）
var themeLink = document.querySelector('link[href="/css/theme-dark.css"]');
if (themeLink) {
  themeLink.parentNode.removeChild(themeLink);
}

// faviconをJavaScriptで動的に変更する（通知バッジ等）
var favicon = document.querySelector('link[rel="icon"]');
if (favicon) {
  favicon.href = "/img/favicon-notify.png";
}