HTML の <head> の中でよく見かける <link> は、外部の CSS やファビコンを読み込むための要素です。ただ、rel 属性に指定する値によって役割が大きく変わり、スタイルシートの読み込みだけでなく、リソースの事前読み込みや外部ドメインへの接続の前倒しなど、表示速度に関わる場面でも使われます。この記事では、<link> 要素の基本と、代表的な rel の値、そして CSS 読み込み・favicon・preload といった実践的な書き方を、初心者〜中級者向けに整理して解説します。
目次
link 要素とは
<link> は、現在の文書と外部リソースとの関係を示すための要素です。基本的には <head> の中に書き、閉じタグを持たない空要素です。中心となる属性は 2 つで、リソースの場所を指す href と、そのリソースが文書に対してどんな関係を持つのかを表す rel（relationship の略）です。
たとえば次のように書くと、href で指定した CSS ファイルを、rel="stylesheet"（＝この文書のスタイルシート）として読み込みます。同じ <link> でも rel の値を変えれば、ファビコンの指定や事前読み込みなど、まったく別の意味になります。
<head> <!-- href で場所、rel で「文書との関係」を示す --> <link rel="stylesheet" href="/css/style.css"> </head>
代表的な rel の値と用途
<link> の役割は rel の値で決まります。まずは実務でよく使うものを一覧で押さえておきましょう。次の表は、代表的な rel の値と、それぞれが何をするためのものかをまとめたものです。
rel の値 | 用途 |
|---|---|
stylesheet | 外部 CSS ファイルを読み込んで文書に適用する |
icon | タブなどに表示するファビコンを指定する |
apple-touch-icon | iOS でホーム画面に追加したときのアイコンを指定する |
preload | 現在のページですぐ必要なリソースを優先的に先読みする |
prefetch | 次に遷移しそうなページで使うリソースを空き時間に先読みする |
preconnect | 外部ドメインへの接続（DNS・TCP・TLS）を前もって済ませておく |
dns-prefetch | 外部ドメインの名前解決（DNS）だけを前もって行う |
canonical | そのページの正規 URL を検索エンジンに伝える |
alternate | 別言語版や RSS フィードなど、代替となる文書を示す |
preload と prefetch、あるいは preconnect と dns-prefetch は名前が似ていて混同しがちですが、目的が異なります。preload は「今このページで確実に使うもの」を早く取りに行くのに対し、prefetch は「次のページで使うかもしれないもの」を優先度低めで取りに行きます。preconnect は接続の準備までまとめて行い、dns-prefetch はそのうち DNS の名前解決だけを行う、より軽量な指定です。
スタイルシートを読み込む
もっとも基本的な使い方が、外部 CSS の読み込みです。rel="stylesheet" を指定し、href に CSS ファイルのパスを書きます。複数の CSS を読み込みたいときは、<link> を必要な数だけ並べます。上に書いたものから順に読み込まれ、同じ指定は後のものが優先されます。
<head> <link rel="stylesheet" href="/css/reset.css"> <!-- 後に書いた style.css が reset.css を上書きできる --> <link rel="stylesheet" href="/css/style.css"> </head>
media 属性で読み込む CSS を出し分ける
<link> には media 属性を付けられます。ここに CSS のメディアクエリと同じ条件を書くと、その条件に合うときだけスタイルが適用されます。たとえば印刷用の CSS や、画面幅に応じたスタイルを別ファイルに分けて指定できます。条件に合わないファイルもダウンロードはされますが、優先度が下げられるため、初期表示に必要な CSS の読み込みを妨げにくくなります。
<!-- すべての画面で適用 --> <link rel="stylesheet" href="/css/base.css"> <!-- 画面幅が 768px 以下のときだけ適用 --> <link rel="stylesheet" href="/css/mobile.css" media="(max-width: 768px)"> <!-- 印刷時だけ適用 --> <link rel="stylesheet" href="/css/print.css" media="print">
ファビコンを指定する
ブラウザのタブやブックマークに表示される小さなアイコンがファビコンです。rel="icon" を指定し、href に画像のパスを書きます。type でファイル形式（image/png や image/svg+xml など）を、sizes で画像のサイズを伝えられます。複数サイズを用意し、ブラウザに適したものを選ばせることもできます。
あわせて、iOS のホーム画面に追加したときのアイコンとして rel="apple-touch-icon" を指定しておくと、スマートフォンでもきれいなアイコンが表示されます。
<head> <!-- 標準的なファビコン --> <link rel="icon" href="/favicon.ico"> <!-- サイズや形式を指定して複数用意する --> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> <link rel="icon" type="image/svg+xml" href="/icon.svg"> <!-- iOS のホーム画面用アイコン --> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> </head>
href のパスはルートからの絶対パス（/favicon.ico）で書くのが無難です。相対パスにすると、サブディレクトリのページで基準がずれてアイコンが見つからないことがあります。
preload でリソースを優先読み込みする
rel="preload" は、そのページで確実に使う重要なリソースを、ブラウザに早めに取得させるための指定です。通常ブラウザは HTML を解析しながら順にリソースを見つけますが、preload を書いておくと、発見を待たずに先にダウンロードを始められます。読み込みが遅れがちな Web フォントや、ページ上部に表示するヒーロー画像などによく使われます。
preload では、何を読み込むのかをブラウザに伝えるために as 属性が必須です。as には style・script・font・image といったリソースの種類を指定します。さらに、フォントのように別ドメインでなくても CORS 扱いになるリソースには crossorigin 属性を付けます。
<head>
<!-- ヒーロー画像を先読み。as="image" が必須 -->
<link rel="preload" as="image" href="/img/hero.webp">
<!-- Web フォントを先読み。フォントには crossorigin が必要 -->
<link rel="preload" as="font" type="font/woff2"
href="/fonts/main.woff2" crossorigin>
</head>
フォントの preload で crossorigin を書き忘れると、preload で取得したファイルと、実際にフォントを使うときの取得とが別物とみなされ、同じフォントが二重にダウンロードされてしまいます。フォントを preload するときは crossorigin をセットで書く、と覚えておくとよいでしょう。
preconnect で外部ドメインへの接続を前倒しする
外部のフォント配信サービスや CDN からリソースを読み込むとき、実際のダウンロードの前に、DNS の名前解決・TCP 接続・TLS のハンドシェイクという準備が必要です。rel="preconnect" を指定しておくと、この接続の準備をブラウザが前もって済ませ、いざリソースを取得するときの待ち時間を短くできます。
<head> <!-- 外部ドメインへの接続を前倒しする --> <link rel="preconnect" href="https://cdn.example.com"> <!-- preconnect に対応しない環境向けのフォールバック --> <link rel="dns-prefetch" href="https://cdn.example.com"> </head>
preconnect は接続の準備までまとめて行うぶん効果が大きい反面、使いすぎると不要な接続を開いて逆に負荷になります。実際に読み込むと分かっている、数個の重要なドメインに絞って指定するのがコツです。より軽量な dns-prefetch を、preconnect の予備として併記しておく書き方もよく使われます。
preload が効かない・二重に読み込まれるとき
preload や preconnect は表示速度を上げるための機能ですが、書き方を少し間違えると効かなかったり、かえって無駄な読み込みが発生したりします。うまく働かないときによくある原因を見ておきましょう。
as 属性が抜けている
preload でもっとも多いつまずきが、as 属性の書き忘れです。as がないとブラウザはリソースの種類を判断できず、先読みが正しく機能しません。さらに、種類が分からないために優先度も適切に設定されず、preload の意味が薄れてしまいます。preload を書くときは、必ず as をセットにすると考えてください。
指定が実際の読み込みと食い違って二重取得になる
preload した内容が、実際にそのリソースを使うときの条件と一致しないと、ブラウザは「別のリソース」とみなして再度ダウンロードします。結果として同じファイルを二重に取得し、かえって遅くなります。前述のフォントの crossorigin 忘れが典型例です。href のパスや type、crossorigin の有無を、実際に使う側の指定とそろえておくことが大切です。
ファビコンのパスやサイズが合っていない
ファビコンが表示されないときは、rel="icon" の href が指すパスに実際にファイルがあるかをまず確認します。相対パスだとサブページで基準がずれることがあるため、ルートからの絶対パスにすると安定します。また、sizes に書いた値と実際の画像サイズが食い違っていると、ブラウザが期待どおりに選んでくれないことがあるので、実ファイルのサイズと合わせておきましょう。
まとめ
<link> 要素は、href でリソースの場所を、rel で文書との関係を示す要素です。rel="stylesheet" で CSS を読み込み、rel="icon" や apple-touch-icon でファビコンを指定するのが基本の使い方です。加えて、preload で重要なリソースを先読みし、preconnect で外部ドメインへの接続を前倒しすれば、表示速度の改善にも役立ちます。preload には as が必須で、フォントには crossorigin が必要、といった条件を守らないと二重読み込みなどの落とし穴にはまります。まずは rel の値ごとの役割を押さえ、実際に使うリソースと指定を丁寧にそろえることを意識してみてください。