1.

HTML link要素 完全ガイド（CSS読み込み / rel属性 / preload / favicon / canonical）

▶
編集
この記事の要点
  • link 要素は HTML と外部リソースを関連付ける空要素。終了タグなし
  • 配置は <head> 内。CSS 読み込みが最頻出: <link rel="stylesheet" href="style.css">
  • rel 属性で関係性を指定: stylesheet / icon / canonical / preload / alternate など
  • SEO 必須: rel="canonical" で正規 URL を宣言、重複コンテンツ対策
  • パフォーマンス: rel="preload" / preconnect / dns-prefetch で読み込み高速化
  • favicon やレスポンシブ画像、フィードリンクなど用途は CSS 以外にも多岐にわたる

link 要素とは

link 要素は HTML 文書と外部リソース（CSS / favicon / 別ドキュメント等）の関係を宣言する空要素です。<head> 内に配置し、終了タグはありません。HTML5 では body 内に配置することも一部の rel 値で許容されますが、基本は head 内です。

基本構文

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <!-- CSS の読み込み（最頻出） -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  ...
</body>
</html>

rel 属性で「どんな関係か」を、href 属性で「リソースの場所」を指定します。

主要な属性

属性意味例
relリソースとの関係性 (必須)stylesheet / icon
hrefリソースの URL (必須相当)css/style.css
typeMIME タイプtext/css / image/png
media適用メディア (CSS 用)screen / (max-width: 600px)
sizesアイコンサイズ32x32 / any
crossoriginCORS 設定anonymous / use-credentials
integritySRI ハッシュ（改ざん検知）sha384-...
aspreload するリソース種別font / script / image
hreflangリンク先の言語en / ja

rel 属性の代表値

rel 値用途
stylesheetCSS の読み込み（最頻出）
iconfavicon の指定
apple-touch-iconiOS ホーム画面アイコン
manifestPWA マニフェストファイル
canonical正規 URL（SEO 必須）
alternate別表現 (RSS / 別言語版など)
preload事前読み込み（描画前にロード開始）
prefetch次ページで使うリソースの先読み
preconnect事前 TCP/TLS 接続
dns-prefetchDNS 解決のみ先取り
modulepreloadES モジュールの事前読み込み
author著者情報
licenseライセンス情報
searchOpenSearch 連携

CSS の読み込み

<!-- 基本 -->
<link rel="stylesheet" href="css/style.css">

<!-- メディアクエリで条件分岐 -->
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

<!-- CDN + SRI（改ざん検知） -->
<link rel="stylesheet"
      href="https://cdn.example.com/lib.css"
      integrity="sha384-xyz..."
      crossorigin="anonymous">

HTML5 では type="text/css" は省略可能です（既定値が text/css のため）。

favicon の指定

<!-- 基本 favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- SVG 版（モダンブラウザ用） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- iOS ホーム画面追加用 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- PWA マニフェスト -->
<link rel="manifest" href="/site.webmanifest">

SEO で必須: canonical

<!-- 正規 URL を宣言（重複コンテンツ対策） -->
<link rel="canonical" href="https://example.com/page">

<!-- 多言語サイト -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">

<!-- RSS フィード -->
<link rel="alternate" type="application/rss+xml"
      title="サイトの RSS" href="/feed.xml">

同じコンテンツが複数 URL で見える場合（パラメータ付き URL、印刷版など）、canonical がないと検索エンジンの評価が分散します。SEO の最重要タグの 1 つです。

パフォーマンス系: preload / preconnect

<!-- 重要リソースを早期に取得開始 -->
<link rel="preload" href="/hero.jpg" as="image">
<link rel="preload" href="/main.js" as="script">
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>

<!-- DNS 解決 & TCP 接続を事前に -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="dns-prefetch" href="https://api.example.com">

<!-- 次ページで使うリソースの先読み -->
<link rel="prefetch" href="/next-page.html">

<!-- ES モジュール（モジュール本体 + 依存関係） -->
<link rel="modulepreload" href="/main.mjs">

preload の as 属性は必須相当。指定しないとブラウザが優先度を判断できず、警告が出ます。

ヒントタイミング用途
preload現ページで確実に使うWeb フォント / Hero 画像
prefetch次ページで使うかもしれない遷移先ページ
preconnectDNS+TCP+TLS まで先取りサードパーティ CDN / API
dns-prefetchDNS 解決のみ低コストで複数ドメインに対応

media 属性での条件分岐ロード

<!-- 画面幅で CSS を出し分け（古い手法、media-query を直接書ける） -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px) and (max-width: 1023px)">
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">

<!-- 印刷専用 -->
<link rel="stylesheet" href="print.css" media="print">

該当しないメディアの CSS はロードはされるがブロッキングはしない（低優先度）ため、初期表示性能を高めるテクニックとして使えます。

記述順序の重要性

head 内で CSS の link はscript より前に書きます。CSS 読み込みは描画ブロッキングなので、可能なら以下順序が定石:

  1. charset / viewport
  2. preconnect / dns-prefetch
  3. preload （フォント・ヒーロー画像など）
  4. title / description / canonical
  5. OGP / Twitter Cards
  6. link rel="stylesheet"
  7. favicon 系
  8. script (defer/async 推奨)

style 要素・@import との違い

方法特徴推奨度
<link rel="stylesheet">並列ロード可能、キャッシュ効く○ 標準
<style> 内に直書きHTTP リクエスト不要△ Critical CSS のみ
CSS 内 @import直列ロード（遅い）× 非推奨

link 要素による外部 CSS 読み込みは、ブラウザが並列に複数の CSS をダウンロードできる点が最大のメリットです。一方、CSS ファイル内部で @import url("other.css"); と書くと、ブラウザは元の CSS をパースし終えてから次のリクエストを開始するため、読み込みが直列になり明らかに遅くなります。HTTP/2 や HTTP/3 の多重化があっても、@import のチェーンはレンダリングの開始を遅らせる致命的なボトルネックになり得るため、リファレンスとなる多くのパフォーマンスガイドは @import を非推奨としています。

style 要素にインラインで直書きする方法は、ファーストビューに必要な最小限の CSS（Critical CSS）だけを埋め込む用途で使われます。それ以外の本体 CSS は link 要素で外部読み込みし、ブラウザキャッシュを活かして 2 回目以降の表示速度を稼ぐ、というのが現代的な定石です。

link 要素を使った描画パフォーマンス最適化のコツ

Web ページの体感速度を決めるのは、最初に画面が描画されるまでの時間（First Contentful Paint）と、主要コンテンツが見えるまでの時間（Largest Contentful Paint）です。link 要素は、この 2 つのタイミングを直接コントロールできるためチューニングの最重要ポイントになります。

具体的には、Web フォントの読み込みを preload で前倒しし、メインで使う外部 CDN には preconnect で TLS ハンドシェイクまで終わらせておく、というシナリオが頻出します。さらに、ファーストビューには使わない大きな CSS は media="print" を一時的に指定して非ブロッキングで読み込み、JS で後から media="all" に書き換えるという「遅延 CSS 読み込み」テクニックもよく使われます。

逆に、第三者の広告・分析・チャット系スクリプトが大量に読み込まれているサイトでは、link の dns-prefetch や preconnect を必要なドメインに対してまとめて記述するだけで、体感速度がはっきり改善することがあります。Lighthouse や WebPageTest で「Reduce DNS lookups」「Preconnect to required origins」といった指摘が出たら、まずは link 要素のヒント追加から始めるのが定石です。

link 要素と SEO の関係を整理する

SEO の観点で見ると、link 要素は検索エンジンに「このページの正体は何か」を伝える宣言の場です。rel="canonical" で重複コンテンツを正規化し、rel="alternate" hreflang で多言語版を関連付け、rel="alternate" type="application/rss+xml" で RSS フィードの存在を知らせる、といった具合に検索ロボットへの誘導をきめ細かく制御できます。

とくに canonical は、パラメータ違いの同一コンテンツや、AMP / モバイル URL の正規化、ページネーションの 1 ページ目への集約など、ありとあらゆる重複対策に登場します。link で正しい canonical を出していないと、検索エンジンが自前のアルゴリズムでどれを正規版と判断するか分からないため、評価値が分散して順位を落とすリスクがあります。SEO 対策の出発点として、まず canonical を正しく書くことを徹底するだけでもサイト全体の品質が一段上がります。

FAQ

Q: link 要素は終了タグが必要？
A: HTML5 では空要素なので不要。XHTML 由来の <link ... /> も互換上は使えますが、HTML5 では <link ...> でOK。

Q: 同じ CSS を 2 回読み込んだら？
A: 2 回 HTTP リクエストが走る（キャッシュが効けば 2 回目は条件付き GET）。CSS としては後に来たものが上書きするルールで適用。

Q: noscript 内の link は動く？
A: 動きます。JS 無効環境でのみ CSS を切り替えたいときに有用。

Q: rel が複数あるときは？
A: 空白区切りで列挙: rel="stylesheet preload" のように書けます (例: 印刷とスクリーン両用)。

Q: body 内に link 要素を置ける？
A: HTML5 で一部の rel (stylesheet / preload / modulepreload など) のみ許容。基本は head 内に置くのが安全です。

関連記事

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. link要素
  2. style要素
  3. style属性
  4. @import
2026-06-11 07:12:00 guest 192

人気ページ

最近更新/作成されたページ