タイトル: link要素
SEOタイトル: HTML link要素 完全ガイド（CSS読み込み / rel属性 / preload / favicon / canonical）
| この記事の要点 |
|
link 要素とは
link 要素は HTML 文書と外部リソース（CSS / favicon / 別ドキュメント等）の関係を宣言する空要素です。 内に配置し、終了タグはありません。HTML5 では body 内に配置することも一部の rel 値で許容されますが、基本は head 内です。
基本構文
サンプル
...
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 の読み込み
HTML5 では type="text/css" は省略可能です（既定値が text/css のため）。
favicon の指定
SEO で必須: canonical
同じコンテンツが複数 URL で見える場合（パラメータ付き URL、印刷版など）、canonical がないと検索エンジンの評価が分散します。SEO の最重要タグの 1 つです。
パフォーマンス系: preload / preconnect
preload の as 属性は必須相当。指定しないとブラウザが優先度を判断できず、警告が出ます。
| ヒント | タイミング | 用途 |
|---|---|---|
preload | 現ページで確実に使う | Web フォント / Hero 画像 |
prefetch | 次ページで使うかもしれない | 遷移先ページ |
preconnect | DNS+TCP+TLS まで先取り | サードパーティ CDN / API |
dns-prefetch | DNS 解決のみ | 低コストで複数ドメインに対応 |
media 属性での条件分岐ロード
該当しないメディアの 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 との違い
| 方法 | 特徴 | 推奨度 |
|---|---|---|
| 並列ロード可能、キャッシュ効く | ○ 標準 |
|