× は HTML Living Standard に採用されていない値であることを示します。
link で使用し、この文書に関するアイコンファイル(ファビコン:favicon)を指定します。以前は rel="shortcut icon" の様に指定していましたが、IE8 以下に対応しないなら shortcut は不要です。
<link rel="icon" href="images/favicon.ico" sizes="16x16 32x32 48x48">
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">
この文書のひとつ前(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>
トップページのURLを指定します。HTML Living Standard には採用されていません。link, a, area, form で利用できます。
<a rel="index" href="/">トップ</a>
最初のページのURLを指定します。HTML Living Standard には採用されていません。link, a, area, form で利用できます。
<a rel="start" href="/page_1.html">最初に戻る</a>
この文書に関する用語集ページのURLを指定します。HTML Living Standard には採用されていません。link, a, area, form で利用できます。
<a rel="glossary" href="glossary.html">用語集</a>
<article>～</article> の中にある時はそのアーティクルの、さもなくばこの文書全体の著者に関するページのURLを指定します。link, a, area で利用できます。
<a rel="author" href="author.html">著者</a> <article> <p>...</p> <a rel="author" href="yamada.html">著者:山田</a> </article>
コンテンツの著作者に関するURLを指定します。コンテンツとURLが同じドメインの場合は author を、異なるドメインの場合は me を使用します。HTML Living Standard には採用されていません。link, a, area で利用できます。
<a rel="me" href="https://example.com/author.html">著者</a>
この文書のライセンスに関するページのURLを指定します。link, a, area, form で利用できます。
<a rel="license" href="license.html">ライセンスについて</a>
この文書の作成者のメールアドレスを指定します。rel ではなく rev 属性に指定します。歴史的に使用されることがありますが、HTML Living Standard には採用されておらず、スパムメールの標的にもされるため、利用は薦められていません。link, a, area で利用できます。
<a rev="make" href="mailto:example@example.com">作者へのメール</a>
この文書の著作権に関するページのURLを指定します。歴史的に利用されていますが HTML Living Standard には採用されていません。代わりに license を使用します。link, a, area, form で利用できます。
<a rel="copyright" href="copyright.html">著作権について</a>
この文書の代替ページの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" />
検索エンジンに対してURLの正規化を依頼します。例えば、下記のページがいずれも同じ内容の場合、検索エンジンがそれぞれを別のページとして認識してしまうと SEO 的にページ評価が分散してしまいます。rel=canonical を指定することにより、検索エンジン上の扱いをひとつの正規化URLに集約することができます。link で利用できます。
<link rel="canonical" href="https://example.com/">
この文書の著者はリンク先を宣伝するものではないことを示します。rel=nofollow をつけたリンク先は検索エンジンがクロールを行わず、リンク先のページ評価を上げないことがあります。以前は強制的でしたが現在ではヒントとしての情報となります。広告サイトへのリンクなどに指定されていましたが、現在では広告サイトに関しては rel=sponsored が推奨されています。a, area, form で利用できます。
<a rel="nofollow" href="https://example.com/">Example</a>
リンク先がスポンサーサイトであることを示します。HTML Living Standard には採用されていませんが、Google が採用しています。動作的には rel=nofollow とほぼ同等です。a, area, form で利用できます。
<a rel="sponsored" href="https://example.com/">Example</a>
リンク先がユーザ生成コンテンツ(User Generated Content)であることを示します。HTML Living Standard には採用されていませんが、Google が採用しています。動作的には rel=nofollow とほぼ同等です。a, area, form で利用できます。
<a rel="ugc" href="article/123/comments">Comments</a>
この文書はリンク先文書の 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>
rel=noopener とは逆に target="_blank" で開いたリンク先からリンク元に JavaScript の window.opener でアクセスすることを許可します。a, area, form で利用できます。
<a rel="opener" target="_blank" href="example.html">Example</a>
このリンク先を参照した時、ユーザエージェント(ブラウザ)が、リンク元情報(HTTP Refereヘッダ)を送信しないことを要求します。a, area, form で利用できます。
<a rel="noreferrer" href="https://example.com/">Example</a>
リンク先が外部のサイトであることを示します。a, area, form で利用できます。
<a rel="external" href="https://example.com/">Example</a>
速度改善のためにブラウザに事前処理を行うことを指示します。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 モジュールとそモジュールで読み込まれる別スクリプトを先読みすることをブラウザにヒント的に依頼します。
<link rel="modulepreload" href="modules.js">
microformats のひとつでリンク先ページに対してタグを関連づけることができます。a, area で利用できます。下記の例ではこのページに tech というタグをつけています。(→ 詳細)
<link rel="tag" href="https://example.com/tags/tech">
<article>～</article> の中にある時はそのアーティクルの、さもなくばリンクが存在するセクションのパーマリンク(固定的なURL)を示します。a, area で利用できます。
<a rel="bookmark" href="https://example.com/">Example</a>
Webアプリケーションのマニフェストファイルを指定します。詳細は https://developer.mozilla.org/ja/docs/Web/Manifest を参照してください。link で利用できます。
<link rel="manifest" href="manifest.json">
この文書が、他の文書から参照されたことを知るための Pingback サーバの URL を指定します。link で利用できます。詳細は、[PINGBACK 1.0] を参照してください。5章の例がわかりやすいです。
<link rel="pingback" href="https://example.com/pingback">