タイトル: link要素
SEOタイトル: HTML link要素 完全ガイド（外部CSS読み込み / favicon / preload / rel属性 / a要素との違い）
| この記事の要点 |
|
link要素とは
は HTML 文書と外部リソースの関係（relationship）を宣言する要素です。 内に書き、画面には表示されません。CSS の読み込み、favicon の指定、リソースのプリロード、RSS フィードの宣言などに使われます。クリックできる「リンク」とは別物で、それは 要素です。
基本構文
主な属性
| 属性 | 意味 | 例 |
|---|---|---|
rel | リソースとの関係（必須） | stylesheet / icon / preload / canonical |
href | リソースの URL | /css/style.css |
type | MIME タイプ | text/css / image/x-icon |
media | 適用条件（メディアクエリ） | (max-width: 600px) |
as | preload 時のリソース種別 | script / style / font |
crossorigin | CORS / プリロード設定 | anonymous |
integrity | SRI ハッシュ（改ざん検知） | sha384-... |
hreflang | リソースの言語 | en |
rel 属性の代表値
| 値 | 用途 |
|---|---|
stylesheet | 外部スタイルシート（CSS） |
icon | favicon |
apple-touch-icon | iOS ホーム画面用アイコン |
manifest | PWA のマニフェスト |
canonical | 正規 URL（SEO） |
alternate | RSS フィード / 多言語ページ |
preload | 後で使うリソースを早期取得 |
prefetch | 次のページ遷移を見越して事前取得 |
preconnect | 外部ホストに早めに接続（DNS+TCP+TLS） |
dns-prefetch | DNS だけ事前解決 |
media 属性で条件付き読み込み
media 属性は、画面幅や印刷時など条件にマッチしたときだけCSS を適用する仕組みです。マッチしない CSS はレンダリングをブロックしないため、表示パフォーマンスにも有利です。
preload で早期取得
あとで使うとわかっているリソース（フォント、重要画像、JS）を早めに取得させ、レンダリング開始を待たせない用途で使います。as 属性で種別を指定する必要があります。
SRI（改ざん検知）
CDN から CSS / JS を読み込むときに、ハッシュ値で内容を検証できます。改ざんされたファイルが配信された場合、ブラウザは読み込みを拒否します。
と の違い
| 項目 | ||
|---|---|---|
| 表示 | されない | される |
| クリック | 不可 | 可 |
| 置く場所 | 内 | 内 |
| 用途 | リソース・関係の宣言 | ユーザーが押すリンク |
よくある落とし穴
- に書くと無視されがち —
内に置く - 閉じタグは書かない（空要素）。XHTML 時代の
は HTML5 では不要 - preload に
asを付け忘れると2 度ダウンロードされる - CDN フォント等で
crossoriginを忘れると preload が効かない