<link要素> - ドキュメントとリソースとの関係を明示する
公開日:
link要素は、HTMLドキュメントと外部にあるリソースとの関係を明示するための要素です。それを受けてブラウザやクローラーは適切に処理します。rel属性によって、様々な用途があります。
概要
- 名前
- link
- カテゴリー
- Metadata content
- Flow content: body要素に配置できる場合のみ。
- Phrasing content: body要素に配置できる場合のみ。
- 配置できる場所
- head要素の中。itemprop属性を付けた場合、または、rel属性にbody-okのキーワードがある場合は、body要素の子孫にできる。
- コンテンツモデル
- 空要素のため、子ノードを持ちません。
- タグの省略
- 省略できません。
- DOM Interface
- HTMLLinkElement
- デフォルトのスタイル
link { display: none; }
- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
属性
href
リソースのURL。
crossorigin
この属性を指定すると、リソースの取得がクロスオリジンモード(CORS)で行なわれる。その上で、クッキーなどの情報(クレデンシャル)を送信するか、しないかをキーワードで指定する。列挙属性で、無効な値を指定した場合は初期値が適用される。
- anonymous
- 送信しない。初期値。
- use-credentials
- 送信する。
rel
ドキュメントとリソースの関係をキーワードで指定する。半角スペース(
)で区切って複数指定可。body-okとあるキーワードを含めた場合、link要素をhead要素の外に配置できます。仕様書はLink typesを参考。仕様書以外でも広く使われているキーワードはmicroformats.orgを参照。
- alternate
stylesheet
のキーワードと一緒に指定した場合、リソースが代替スタイルシートであることを意味し、Firefoxなどでユーザーがスタイルシートを任意に切り替える選択肢になる。type属性にapplication/rss+xml
、またはapplication/atom+xml
を指定した場合、リソースがフィードであることを意味する。- author
- リソースが、著者を説明するページ、または著者との連絡先であることを意味する。
- dns-prefetch
- body-ok。事前にリソースのオリジンのDNSの名前解決をしておくよう、ヒントを与える。
- help
- リソースが、ドキュメントの内容についての説明であることを意味する。
- icon
- リソースが、アイコンであることを意味する。
- license
- リソースが、ドキュメントのライセンスの説明であることを意味する。
- next
- リソースが、現在のドキュメントの次に参照すべきであることを意味する。
- pingback
- body-ok。リソースが、Pingbackを受け付けるURLであることを意味する。
- preconnect
- body-ok。事前に接続を確立(DNSルックアップ、TCPハンドシェイク、TLSネゴシエーション)しておくよう、ヒントを与える。
- prefetch
- body-ok。事前にリソースをダウンロードして、それをキャッシュしておくよう、ヒントを与える。別ページへ移動する際の高速化。
- preload
- body-ok。現在のナビゲーション(ページ)において、事前にリソースをダウンロードして、それをキャッシュしておくようにヒントを与える。現在のページで、今後、そのリソースを利用する際の高速化。
- prerender
- body-ok。事前にリソースをダウンロードして、さらに、HTML、CSS、JavaScriptを実行したレンダリングも行なっておくよう、ヒントを与える。
- prev
- リソースが、現在のドキュメントの前に参照すべきであることを意味する。
- search
- リソースが、検索コンテンツであることを意味する。
- stylesheet
- body-ok。リソースが、スタイルシートであることを意味する。
as
rel属性にpreload
を指定する時に、そのリソースが何であるのかをキーワードで指定する。省略化。これがあると、ユーザーエージェントはアクセスする前に種類を知ることができるため、適切な接続方法でスムーズにリソースをダウンロードできる。主なキーワードは下記の通り。destination keywordsを参考。
- report
- CSPなどのレポート。
- document
- HTMLドキュメント。
- media
- HTMLの<audio>、<video>、<track>。
- font
- フォント。
- image
- 画像。
- script
- JavaScript。
- style
- スタイルシート。
media
メディアクエリを指定すると、ユーザーエージェントはそのメディアクエリの条件に一致した場合だけ、リソースにアクセスするようになる。例えば、スタイルシートの振り分けで利用する。
nonce
CSPで利用する暗号。
integrity
SRIで利用する暗号。
hreflang
リソースの言語。
type
リソースの種類。
sizes
rel属性がicon
の場合に、画像のサイズを指定する。x
、またはX
で区切って横幅、高さの順に単位なしのピクセル値で指定する。複数のサイズがある場合は、半角スペース(
)で区切る。画像がベクターの場合は、キーワードでany
を指定して、どのサイズにも対応できることを表す。
referrerpolicy
リソースにアクセスする際のリファラーポリシーをキーワードで指定する。Referrer Policiesを参考。
- no-referrer
- リファラーを送信しない。
- no-referrer-when-downgrade
- https接続以外ではリファラーを送信しない。
- origin
- スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
- origin-when-cross-origin
- 異なるオリジンへのアクセスの場合だけ、リファラーにパスを含めない。
- unsafe-url
- https接続、http接続ともに、スキーム、ホスト、ポート、パスをリファラーに含める。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
link要素の役割は多岐に渡ります。代表的なものをいくつか紹介していきます。
スタイルシート
外部のスタイルシートを読み込む時に利用します。
HTML
<!-- スタイルシートの読み込み -->
<link rel="stylesheet" href="./style.css">
media属性を利用すれば、メディアクエリで読み込むスタイルシートの振り分けができます。
HTML
<!-- ウィンドウ幅が768px以上の場合にだけ読み込み -->
<link rel="stylesheet" href="./style.css" media="(min-width:768px)">
rel属性のstylesheet
は、body-okのキーワードです。なので、head要素の外に配置することができます。例えば、モーダルウィンドウで利用するような、アクセスしてすぐに必要のないスタイルシートはbody要素の終了タグの手前で読み込んでおけば、ウェブページのレンダリングがよりスムーズになります。
HTML
<!-- スタイルシートの読み込み -->
<link rel="stylesheet" href="./modal-window.css">
</body>
正式なURL
仕様書にはありませんが、rel属性にcanonical
を指定すると、Googleをはじめとする検索エンジンのクローラーに正式なURLを伝えることができます。
HTML
<!-- このURLをインデックスするべきとクローラーに伝える -->
<link rel="canonical" href="https://syncer.jp/content.php">
例えば、次のように同じページでもアクセス方法によってURLが変わる場合にクローラーは正式なURLだけをインデックスします。検索エンジンから「違うURLで似たようなページがたくさんある怪しいサイトだ」と誤判定されないためにも指定しておきましょう。
同じページに複数のURLがある例
https://syncer.jp/content.php?mode=mb
https://syncer.jp/content.php?mode=tablet
https://syncer.jp/content.php?mode=pc
アイコン
faviconやAndroidのアイコンはrel属性にicon
を指定します。Appleの場合はapple-touch-icon
というキーワードを指定します。これらはブックマークした時にタブやホーム画面に表示されるアイコンとなります。
HTML
<!-- favicon -->
<link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">
<!-- Android -->
<link rel="icon" href="/android-chrome-192x192.png" sizes="192x192" type="image/png">
<!-- Apple -->
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png" sizes="57x57">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png" sizes="72x72">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png" sizes="114x114">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png" sizes="144x144">
<link rel="apple-touch-icon" href="/apple-touch-icon-192x192.png" sizes="192x192">
高速化
CDNを利用している場合、dns-prefetch
を利用すれば事前にDNSの名前解決を済ませておけます。いざ、画像などを表示する時に、よりスムーズになるでしょう。
HTML
<link rel="dns-prefetch" href="https://cdn.syncer.jp/">
これから移動する可能性が高いページがあれば、リソースをあらかじめ読み込んでおくことができます。ユーザーはリンクをクリックした時、対象のウェブページに、より高速にアクセスできます。
HTML
<!-- コンテンツをダウンロードせず、接続だけ確立しておく -->
<link rel="preconnect" href="./next.html">
<!-- コンテンツをダウンロードしておく -->
<link rel="prefetch" href="./next.html">
<!-- コンテンツをダウンロードして、さらにレンダリングも済ませておく -->
<link rel="prerender" href="./next.html">
フィード
フィードの存在をブラウザに知らせるには、type属性にや
を指定します。最初の要素がデフォルトとなるのを覚えておきましょう。
HTML
<link rel="alternate" type="application/rss+xml" title="SYNCERのフィード (RSS2.0)" href="/rss2.xml">
<link rel="alternate" type="application/atom+xml" title="SYNCERのフィード (Atom)" href="/atom.xml"/>
<link rel="alternate" type="application/rss+xml" title="SYNCERのフィード (RSS1.0)" href="/rss1.rdf">
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<link要素> - ドキュメントとリソースとの関係を明示する</title>
<link rel="stylesheet" href="./style.css">
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/link/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>link要素を使って、<a href="./style.css" target="_blank">スタイルシート</a>を読み込みました。</p>
</body>
</html>