タイトル: link要素
SEOタイトル: HTML link要素 完全ガイド（CSS読み込み / rel属性 / preload / favicon / canonical）
| この記事の要点 |
|
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 |
type | MIME タイプ | text/css / image/png |
media | 適用メディア (CSS 用) | screen / (max-width: 600px) |
sizes | アイコンサイズ | 32x32 / any |
crossorigin | CORS 設定 | anonymous / use-credentials |
integrity | SRI ハッシュ（改ざん検知） | sha384-... |
as | preload するリソース種別 | font / script / image |
hreflang | リンク先の言語 | en / ja |
rel 属性の代表値
| rel 値 | 用途 |
|---|---|
stylesheet | CSS の読み込み（最頻出） |
icon | favicon の指定 |
apple-touch-icon | iOS ホーム画面アイコン |
manifest | PWA マニフェストファイル |
canonical | 正規 URL（SEO 必須） |
alternate | 別表現 (RSS / 別言語版など) |
preload | 事前読み込み（描画前にロード開始） |
prefetch | 次ページで使うリソースの先読み |
preconnect | 事前 TCP/TLS 接続 |
dns-prefetch | DNS 解決のみ先取り |
modulepreload | ES モジュールの事前読み込み |
author | 著者情報 |
license | ライセンス情報 |
search | OpenSearch 連携 |
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 | 次ページで使うかもしれない | 遷移先ページ |
preconnect | DNS+TCP+TLS まで先取り | サードパーティ CDN / API |
dns-prefetch | DNS 解決のみ | 低コストで複数ドメインに対応 |
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 読み込みは描画ブロッキングなので、可能なら以下順序が定石:
charset/viewportpreconnect/dns-prefetchpreload（フォント・ヒーロー画像など）title/description/canonical- OGP / Twitter Cards
link rel="stylesheet"- favicon 系
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 内に置くのが安全です。