SYNCER

SYNCER

<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>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>