May 2nd,2015
＃
“rel”属性について
“rel”属性は文書と外部リソースの関係を示します。属性値はリンクタイプで指定し、現在の文書から見たリンク先の外部リソースとの関係を示します。
“rel”属性に“body-ok”な値のみを指定した“link”要素は“body”要素の中にも配置できます。
“rel”属性の値は空白文字で区切ることで複数指定できます。値が複数指定される場合は“link”要素は外部リソースに対して複数のリンクを生成します。例えば、“rel”属性の値に“author”と“license”をどちらも指定した場合は同じ文書へのリンクを2つ生成します。なお、“rel”属性を指定していない“link”要素はリンクを生成しません。
“link”要素には“rel”属性とマイクロデータ属性の“itemprop”属性のうちどちらかを指定しなければなりません。ただし、両方は指定できません。
＃
指定できる値
| リンクタイプ | 説明 | “body-ok” |
|---|---|---|
| alternate | リンク先は現在の文書の代替文書 | No |
author |
リンク先は著者情報 | No |
canonical |
リンク先が類似する文書の中で最も推奨される文書 | No |
| dns-prefetch |
リンク先のDNSによる名前解決を事前に行う | Yes |
| help | リンク先は詳細なヘルプを提供する文書 | No |
| icon |
リンク先は現在の文書を表すアイコン | No |
| license |
リンク先はライセンス情報を説明する文書 | No |
| manifest |
リンク先はウェブアプリマニフェスト | No |
| modulepreload |
リンク先のモジュールスクリプトを先行して読み込む | Yes |
| next | リンク先は一連の文書の中で現在の文書の次の文書 | No |
| pingback |
リンク先は現在の文書のピンバックを扱うピンバックサーバー | Yes |
| preconnect |
リンク先への接続を事前に確立する | Yes |
| prefetch |
リンク先を事前に取得する | Yes |
| preload |
リンク先を先行して読み込む | Yes |
prerender |
リンク先を事前に取得してレンダリングする | Yes |
| prev | リンク先は一連の文書の中で現在の文書の前の文書 | No |
| search |
リンク先現在の文書と関連する文書内を検索するための機能 | No |
| serviceworker |
リンク先は登録する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>
...
