rel=relation - 関係指定

属性
サポート
使用可能要素
一覧
説明
リンク

属性

<tagName rel=relation>

サポート

使用可能要素

一覧

HTML Living Standard に採用されているか、どの要素で使用できるかを示します。

Name	HTML Living Standard	<link>	<a> / <area>	<form>
alternate	○	○	○	×
amphtml	×	○	×	×
appendix	×	○	○	○
apple-touch-icon	×	○	×	×
author	○	○	○	×
archives	×	？	？	？
bookmark	○	×	○	×
canonical	○	○	×	×
canonical	○	○	×	×
chapter	×	？	？	？
copyright	×	○	○	○
dns-prefetch	○	○	×	×
expect	○	○	×	×
external	○	×	○	○
fontdef	×	○	×	×
glossary	×	○	○	○
help	○	○	○	○
icon	○	○	×	×
made	×	○	○	×
manifest	○	○	×	×
mask-icon	×	○	×	×
me	×	？	？	？
modulepreload	○	○	×	×
license	○	○	○	○
next	○	○	○	○
nofollow	○	×	○	○
noopener	○	×	○	○
noreferrer	○	×	○	○
opener	○	×	○	○
pingback	○	○	×	×
preconnect	○	○	×	×
prefetch	○	○	×	×
preload	○	○	×	×
prerender	×	？	？	？
prev	○	○	○	○
privacy-policy	○	○	○	×
chapter	×	？	？	？
section	×	○	○	○
search	○	○	○	○
sponsored	×	×	○	○
stylesheet	○	○	×	×
subsection	×	○	○	○
tag	○	×	○	×
terms-of-service	○	○	○	×
ugc	×	×	○	○

説明

スタイルシート

カスケーディングスタイルシート(stylesheet)

link で使用し、この文書に適用するスタイルシートを指定します。

<head>
    :
  <link rel="stylesheet" href="css/style.css">
</head>

JavaScriptスタイルシート(stylesheet)

今はもう使用されていませんが、Netscape Communicator 4.* では、CSS の他にも JavaScript の文法でスタイルを記述する JSS(JavaScript Style Sheet)をサポートしていました。

<link rel="stylesheet" type="text/javascript" href="example.jss">

代替スタイルシート(alternate stylesheet)

Firefox では代替スタイルシートをサポートしています。下記の様に記述しておくことで、Firefox ブラウザの [表示]-[スタイルシート] メニューから、閲覧者が好みのスタイルシートを選択することができます。

<link rel="stylesheet" href="normal.css" title="標準スタイル">
<link rel="alternate stylesheet" href="red.css" title="赤系スタイル">
<link rel="alternate stylesheet" href="blue.css" title="青系スタイル">

アイコン

ファビコン(icon)

link で使用し、この文書に関するアイコンファイル(ファビコン:favicon)を指定します。以前は rel="shortcut icon" の様に指定していましたが、IE8 以下に対応しないなら shortcut は不要です。

<link rel="icon" href="images/favicon.ico" sizes="16x16 32x32 48x48">

アップルタッチアイコン(apple-touch-icon)

link で使用し、iPhone で Webページをホーム画面に登録する際のアイコンを指定します。HTML Living Standard には登録されていません。

<link rel="apple-touch-icon" href="images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="167x167" href="images/touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/touch-icon-iphone-retina.png">

マスクアイコン(mask-icon)

Safari がサポートしているページピン用のアイコンを指定します。アイコンは黒一色の SVG ファイルを指定し、color 属性で色を指定します。

<link rel="mask-icon" size="any" href="images/mask-icon.svg" color="#f00">

ショートカットアイコン(shortcut icon)

古いブラウザではファビコン(icon)の代わりに rel="shortcut icon" を実装していたものもありましたが、現在では shortcut は不要です。

<link rel="shortcut icon" href="images/shortcut-icon.ico">

フォント

フォント(fontdef)

古い Netscape Communicator 4.* でサポートされていた、フォントを読み込む機能です。現在では使用されていません。

<link rel="fontdef" href="custom-font.pfr">

先読み

先読み(DNS解決)(dns-prefetch)

先読み(接続)(preconnect)

先読み(読み込み)(prefetch)

先読み(読み込み)(preload)

先読み(レンダリング)(prerender)

速度改善のためにブラウザに事前処理を行うことを指示します。dns-prefetch は DNS の名前解決まで、preconnect は接続まで、prefetch や preload は読込まで、prerender はメモリ内部でレンダリングまでを事前に行うことを意味します。prefetch は「読み込むかも」といったヒント的な情報ですが、preload は読込を指示します。link で利用できます。

<link rel="dns-prefetch" href="https://example.com/">
<link rel="preconnect" href="https://example.com/">
<link rel="prefetch" href="example.js" as="script">
<link rel="preload" href="example.js" as="script">
<link rel="prerender" href="https://example.com/">

prefetch や preload の場合は as 属性にコンテンツの種類を指定します。種類には音声(audio), 文書(document), フォント(font), 画像(image), スクリプト(script), スタイルシート(style), 動画(video) などがあります。

<link rel="preload" href="example.js" as="script">
<link rel="preload" href="example.css" as="style">

JavaScriptモジュール(modulepreload)

速度改善のために、JavaScript モジュールとそモジュールで読み込まれる別スクリプトを先読みすることをブラウザにヒント的に依頼します。

<link rel="modulepreload" href="modules.js">

他文書との関係

インデックスページ(index)

トップページのURLを指定します。HTML Living Standard には採用されていません。link, a, area, form で利用できます。

<a rel="index" href="/">トップ</a>

前のページ(prev)

次のページ(next)

目次ページ(contents)

この文書のひとつ前(prev)、ひとつ後(next)、目次(contents)のURLを指定します。contents は HTML Living Standard には採用されていませんが、歴史的に用いられています。link, a, area, form で利用できます。

<a rel="prev" href="content_3_2.html">前頁</a>
<a rel="contents" href="contents.html">目次</a>
<a rel="next" href="content_3_4.html">次頁</a>

スタートページ(start)

最初のページのURLを指定します。HTML Living Standard には採用されていません。link, a, area, form で利用できます。

<a rel="start" href="/page_1.html">最初に戻る</a>

ヘルプページ(help)

この文書に関するヘルプページのURLを指定します。link, a, area, form で利用できます。

<a rel="help" href="html.html">ヘルプ</a>

検索ページ(search)

この文書に関する検索画面のURLを指定します。link, a, area, form で利用できます。

<a rel="search" href="search.html">検索</a>

用語集(glossary)

この文書に関する用語集ページのURLを指定します。HTML Living Standard には採用されていません。link, a, area, form で利用できます。

<a rel="glossary" href="glossary.html">用語集</a>

著作者(author)

<article>～</article> の中にある時はそのアーティクルの、さもなくばこの文書全体の著者に関するページのURLを指定します。link, a, area で利用できます。

<a rel="author" href="author.html">著者</a>

<article>
  <p>...</p>
  <a rel="author" href="yamada.html">著者:山田</a>
</article>

著作者(me)

コンテンツの著作者に関するURLを指定します。コンテンツとURLが同じドメインの場合は author を、異なるドメインの場合は me を使用します。HTML Living Standard には採用されていません。link, a, area で利用できます。

<a rel="me" href="https://example.com/author.html">著者</a>

作成者(made)

この文書の作成者のメールアドレスを指定します。rel ではなく rev 属性に指定します。歴史的に使用されることがありますが、HTML Living Standard には採用されておらず、スパムメールの標的にもされるため、利用は薦められていません。link, a, area で利用できます。

<a rev="make" href="mailto:example@example.com">作者へのメール</a>

コピーライト(copyright)

この文書の著作権に関するページのURLを指定します。歴史的に利用されていますが HTML Living Standard には採用されていません。代わりに license を使用します。link, a, area, form で利用できます。

<a rel="copyright" href="copyright.html">著作権について</a>

ライセンス(license)

この文書のライセンスに関するページのURLを指定します。link, a, area, form で利用できます。

<a rel="license" href="license.html">ライセンスについて</a>

プライバシーポリシー(privacy-policy)

この文書のプライバシーポリシーに関するページのURLを指定します。link, a, area で利用できます。

<a rel="privacy-policy" href="privacy-policy.html">プライバシーポリシー</a>

利用規約(terms-of-service)

この文書の利用規約に関するページのURLを指定します。link, a, area で利用できます。

<a rel="terms-of-service" href="terms-of-service.html">利用規約</a>

章(chapter)

節(section)

項(subsection)

付録(appendix)

HTML 4.01 で定義されていたもので、それぞれ、章、節、項のページを示します。HTML Living Standard には採用されていません。

<a rel="chapter" href="chapter-1.html">第1章</a>
<a rel="section" href="section-1-1.html">第1章1節</a>
<a rel="subsection" href="subsection-1-1-1.html">第1章1節1項</a>
<a rel="appendix" href="appendix.html">付録</a>

アーカイブ(archives)

この文書を含むアーカイブページのURLを指定します。HTML Living Standard には採用されておらず、あまり使用されていません。

<a rel="archives" href="archives.html">アーカイブ</a>

代替文書

代替文書(alternate)

この文書の代替ページのURLを指定します。下記の例はこのページの他言語版のページを示しています。link, a, area で利用できます。

<a rel="alternate" hreflang="en" href="https://example.com/en/">英語版</a>
<a rel="alternate" hreflang="ja" href="https://example.com/ja/">日本語版</a>

下記の例ではスマホ版サイトのページを示しています。

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://example.com/sp/">

Firefox では代替スタイルシートがサポートされています。[表示]-[スタイルシート] メニューで適用するスタイルシートを切り替えることができます。Chrome でも Chrome 1～47 でサポートされていましたが、Chrome 48 で廃止されました。

<link rel="stylesheet" href="normal.css" title="標準スタイル">
<link rel="alternate stylesheet" href="red.css" title="赤系スタイル">
<link rel="alternate stylesheet" href="blue.css" title="青系スタイル">

下記の例では RSS や Atom フィードのURLを指定しています。

<link rel="alternate" type="application/rss+xml" title="RSS1.0" href="index.rdf" />
<link rel="alternate" type="application/rss+xml" title="RSS2.0" href="rss.xml" />
<link rel="alternate" type="application/atom+xml" title="Atom1.0" href="atom.xml" />

AMPファイル(amphtml)

この文書の AMP ファイル版がある場合、その文書のURLを指定します。AMP ファイル側には rel="canonical" で通常版の URL を参照します。(詳細(↗))

<link rel="amphtml" href="https://www.example.com/amp/document.html">

リンク先への追加情報

外部サイト(external)

リンク先が外部のサイトであることを示します。a, area, form で利用できます。

<a rel="external" href="https://example.com/">Example</a>

ユーザ生成コンテンツ(ugc)

リンク先がユーザ生成コンテンツ(User Generated Content)であることを示します。HTML Living Standard には採用されていませんが、Google が採用しています。動作的には rel=nofollow とほぼ同等です。a, area, form で利用できます。

<a rel="ugc" href="article/123/comments">Comments</a>

URL正規化

パーマリンク(bookmark)

<article>～</article> の中にある時はそのアーティクルの、さもなくばリンクが存在するセクションのパーマリンク(固定的なURL)を示します。a, area で利用できます。

<a rel="bookmark" href="https://example.com/">Example</a>

正規化URL(canonical)

検索エンジンに対してURLの正規化を依頼します。例えば、下記のページがいずれも同じ内容の場合、検索エンジンがそれぞれを別のページとして認識してしまうと SEO 的にページ評価が分散してしまいます。rel=canonical を指定することにより、検索エンジン上の扱いをひとつの正規化URLに集約することができます。link で利用できます。

https://www.example.com/
https://www.example.com/index.html
https://example.com/
https://example.com/index.html
https://example.com/pc/ ... PC版
https://example.com/sp/ ... スマホ版

<link rel="canonical" href="https://example.com/">

宣伝・広告

非宣伝宣言(nofollow)

この文書の著者はリンク先を宣伝するものではないことを示します。rel=nofollow をつけたリンク先は検索エンジンがクロールを行わず、リンク先のページ評価を上げないことがあります。以前は強制的でしたが現在ではヒントとしての情報となります。広告サイトへのリンクなどに指定されていましたが、現在では広告サイトに関しては rel=sponsored が推奨されています。a, area, form で利用できます。

<a rel="nofollow" href="https://example.com/">Example</a>

スポンサーサイト(sponsored)

リンク先がスポンサーサイトであることを示します。HTML Living Standard には採用されていませんが、Google が採用しています。動作的には rel=nofollow とほぼ同等です。a, area, form で利用できます。

<a rel="sponsored" href="https://example.com/">Example</a>

マニフェスト

マニフェスト(manifest)

Webアプリケーションのマニフェストファイルを指定します。詳細は https://developer.mozilla.org/ja/docs/Web/Manifest を参照してください。link で利用できます。

<link rel="manifest" href="manifest.json">

その他

タグ付け(tag)

microformats のひとつでリンク先ページに対してタグを関連づけることができます。a, area で利用できます。下記の例ではこのページに tech というタグをつけています。(→ 詳細)

<link rel="tag" href="https://example.com/tags/tech">

オープナー宣言(opener)

rel=noopener とは逆に target="_blank" で開いたリンク先からリンク元に JavaScript の window.opener でアクセスすることを許可します。a, area, form で利用できます。

<a rel="opener" target="_blank" href="example.html">Example</a>

非オープナー宣言(noopener)

この文書はリンク先文書の opener ではないことを示します。これにより、target="_blank" で開いたリンク先文書から、この文書を window.opener で参照・操作されてしまうことを防ぎます。ただし、Chrome 88 や Firefox 79 からはデフォルトで target="_blank" で開いたリンク先文書からは window.opener を参照できなくなりました。a, area, form で利用できます。

<a rel="noopener" target="_blank" href="example.html">Example</a>

リファラ送信抑制(noreferrer)

このリンク先を参照した時、ユーザエージェント(ブラウザ)が、リンク元情報(HTTP Refereヘッダ)を送信しないことを要求します。a, area, form で利用できます。

<a rel="noreferrer" href="https://example.com/">Example</a>

ピンバック(pingback)

この文書が、他の文書から参照されたことを知るための Pingback サーバの URL を指定します。link で利用できます。詳細は、[PINGBACK 1.0] を参照してください。5章の例がわかりやすいです。

<link rel="pingback" href="https://example.com/pingback">

レンダリングブロック(expect)

href で指定したコンテンツを、要素が完全に解析し終わるまでレンダリングをブロックします。2024年4月の Chrome 124 でサポートされました。(サポート状況(↗))

<link ref="expect" href="#target-element">

リンク

初版:2015年1月10日最終更新:2023年4月16日

https://www.tohoho-web.com/html/attr/rel.htm