このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

link”要素~“rel”属性

記事May 2nd,2015
July 7th,2020
現在の文書から見たリンク先との関係を示す属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

rel”属性について

rel”属性は文書と外部リソースの関係を示します。属性値はリンクタイプで指定し、現在の文書から見たリンク先の外部リソースとの関係を示します。

rel”属性に“body-ok”な値のみを指定したlink”要素body”要素の中にも配置できます。

rel”属性の値は空白文字で区切ることで複数指定できます。値が複数指定される場合はlink”要素は外部リソースに対して複数のリンクを生成します。例えば、“rel”属性の値にauthorlicenseをどちらも指定した場合は同じ文書へのリンクを2つ生成します。なお、“rel”属性を指定していないlink”要素はリンクを生成しません。

link”要素には“rel”属性とマイクロデータ属性itemprop”属性のうちどちらかを指定しなければなりません。ただし、両方は指定できません。

指定できる値

リンクタイプ 説明 “body-ok”
alternate リンク先は現在の文書の代替文書 No
authorHTML5で追加 リンク先は著者情報 No
canonicalHTML Living Standardで定義 リンク先が類似する文書の中で最も推奨される文書 No
dns-prefetchHTML Living Standardで定義 リンク先のDNSによる名前解決を事前に行う Yes
help リンク先は詳細なヘルプを提供する文書 No
iconHTML5で追加 リンク先は現在の文書を表すアイコン No
licenseHTML5で追加 リンク先はライセンス情報を説明する文書 No
manifestHTML Living Standardで定義 リンク先はウェブアプリマニフェスト No
modulepreloadHTML Living Standardで定義 リンク先のモジュールスクリプトを先行して読み込む Yes
next リンク先は一連の文書の中で現在の文書の次の文書 No
pingbackHTML Living Standardで定義 リンク先は現在の文書のピンバックを扱うピンバックサーバー Yes
preconnectHTML Living Standardで定義 リンク先への接続を事前に確立する Yes
prefetchHTML5で追加 リンク先を事前に取得する Yes
preloadHTML Living Standardで定義 リンク先を先行して読み込む Yes
prerenderHTML Living Standardで定義 リンク先を事前に取得してレンダリングする Yes
prev リンク先は一連の文書の中で現在の文書の前の文書 No
searchHTML5で追加 リンク先現在の文書と関連する文書内を検索するための機能 No
serviceworkerHTML Living Standardで定義注意 リンク先は登録するService Worker No
stylesheet リンク先は現在の文書に適用する外部スタイルシート Yes

値は空白文字で区切ることで複数指定できます。

標準外の値

リンクタイプは仕様書に定義されている標準のリンクタイプ以外にも拡張として登録されているリンクタイプを使用することが認められています。以下はそのうちの広く使用されているものです。

リンクタイプ 説明 “body-ok”
apple-touch-icon リンク先は現在の文書のウェブクリップアイコン No
apple-touch-icon-precomposed リンク先は現在の文書のウェブクリップアイコン(古いバージョンのiOSではアイコンの光沢が無効) No
mask-icon リンク先はSafariのページピン用のアイコン No

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="alternate" hreflang="en" href="en/banana.html">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" href="css/stylesheet.css">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク