フロントエンドで知っておきたいリンクタイプにまつわるエトセトラ
はじめに
カニ食べ行こう〜 はにかんで行こう〜 🎶
「渚にまつわるエトセトラ」 PUFFY
言うてますけど
本記事では意外と知られていないリンクタイプについてまとめた記事になります。
あまりリンクタイプに焦点を当てた記事が少なかったので調べてみて学びが多かったです。
リンクタイプとは？
リンクタイプとは、HTML 文書や文書内の一部とそのリンク先との間の関係を定義するものです。
少しわかりづらいので、例をあげると
<link href="CSSファイルのパス" rel="stylesheet" />
フロントエンドエンジニアであれば駆け出しの頃、誰でもこのようにスタイルシートを読み込んだことがあるのではないでしょうか？
href 属性には CSS ファイルのパスを指定することはどこの教材にも書いてあると思います。
ただ、rel 属性に関しては 「CSS を読み込む際はとりあえず stylesheet」 と rel 属性について言及している教材はほとんどなかった印象です。
（記憶に残っていないだけかもしれませんが）
リンクタイプとは、まさにこの rel 属性の属性値のことです。
<link href="CSSファイルのパス" rel="stylesheet" />
このコードは、「現在の HTML 文書と href="CSSファイルのパス" との関係は rel="stylesheet" ですよ」と定義しているわけです。
rel 属性を指定できる要素
rel 属性は、どの HTML 要素にも指定できるわけではありません。
リンクタイプとは、HTML 文書や文書内の一部とそのリンク先との間の関係を定義するものです。
と、冒頭で説明したようにリンクと関係のあるタグでしか指定できません。
具体的に使用できるタグ要素を挙げると、
<link><a><area><form>
の 4 つタグ要素で rel 属性を指定できます。
relの指定の仕方
その他の属性と同じように rel="キーワード" で指定できます。
キーワードは大文字でも小文字でも、その両方を合わせても問題ありません。
✅ rel="stylesheet"
✅ rel="STYLESHEET"
✅ rel="StyleSheet"
また、リンクタイプは複数指定できます。
<link href="CSSファイルのパス" rel="alternate stylesheet" />
このように、複数指定する場合は半角スペースで区切って指定します。
リンクタイプを指定する意味
リンクタイプを指定する意味は、ブラウザや検索エンジンにリンクされているリソースと現在の文書との関係を明示することにあります。
ブラウザや検索エンジンがリンクの性質を理解することで、それに応じた適切な処理を行うことができます。
ブラウザや検索エンジンが適切な処理を行うことによって、アクセシビリティの向上やサイトの高速化を期待できます。
このリンクがどんなリンクなのかわからなければブラウザや検索エンジン側も扱いづらいというわけです。
リンクタイプの紹介
ここからは、個々のリンクタイプの解説になります。
リンクタイプ alternate
alternate は、リンク先が現在の文書の代替表現であることを示します。
ユースケース
スタイルシートの代替表現
スタイルシートの代替表現は異なるスタイルシートを提供するために指定します。
上記の例ではデフォルトのスタイルシートとダークモード用のスタイルシートを指定しています。
title 属性にスタイル名を指定することで切り替え時に表示されます。
しかし、このような切り替え機能を持たないブラウザもあるため注意が必要です。
また、対応しているブラウザでも変更方法がわかりにくくユーザが活用するケースは少ないです。
<!-- デフォルトのスタイルシート -->
<link href="./default.css" rel="stylesheet" title="デフォルト" />
<!-- 代替スタイルシート -->
<link href="./dark-mode.css" rel="alternate stylesheet" title="ダークモード" />
異なる言語のページへのリンク
現在の文書の代替言語のページへのリンクを指定するときにも用いることができます。
hreflang="ja" はリンク先の言語を示しており、title 属性でリンクの説明を提供しています。
<a href="example-ja.html" hreflang="ja" rel="alternate" title="日本語版">
日本語
</a>
リンクタイプ archives
archives は、リンク先がアーカイブ（過去の記事やコンテンツ）ですことを示します。
ユースケース
<link rel="archives" href="archive-2023.html" title="2023年のアーカイブ" />
現代のウェブ開発において archives リンクタイプは一般的ではなく、HTML5 仕様には含まれていないため、実際にはあまり使用されません。
リンクタイプ author
author は、リンク先が著作者に関連する情報であることを示します。
ユースケース
<head> 内で author を指定した場合は、現在の文書全体の著作者を示します。
<head>
<link href="mailto:email@example.com" rel="author" />
</head>
<a> や <area> タグで author を指定した場合、もっとも近くの祖先の article 要素の著作者を示します。
<article>
<a href="https://twitter.com/username" rel="author">著作者の情報</a>
</article>
このように、メールアドレスや X(Twitter) のプロフィール、LinkedIn ページ、個人ウェブサイト、ブログなど著作者の情報へアクセスできるリンクに指定することで読者がアクセスを望む場合に有用です。
リンクタイプ external
external は、リンク先が外部サイトであることを示します。
ユースケース
リンクタイプ external は、通常 target="_blank" や rel="noopener noreferrer" と併用して使用します。
<a href="example.com" rel="external noopener noreferrer" target="_blank">
外部サイト
</a>
リンクタイプnoopener や noreferrer は後に紹介しますが、この組み合わせは、リンクを新しいタブで開くと同時に、新しいページが元のページの window オブジェクトにアクセスできないようにすることで、フィッシングなどの特定のタイプの攻撃から保護します。
リンクタイプ help
help は、リンク先がヘルプ情報であることを示します。
ユースケース
リンクタイプ help が指定された要素はその親要素や兄弟要素に関連するヘルプ情報であると期待されます。
<p>
<label>
Topic: <input name="topic" />
<a href="/topic/help" rel="help">ヘルプ</a>
</label>
</p>
この場合、<p> の子要素となっているため <p> のヘルプであることが期待されます。
また、<head> の <link> で rel="help" が指定された場合は、文書全体のヘルプであることが期待されます。
リンクタイプ icon
icon は、リンク先がアイコンであることを示します。
ユースケース
icon は主に favicon の指定に用いられます。
<link href="./assets/favicon.ico" ref="icon" />
明示的に <link> を使って指定しなくてもブラウザは /favicon.ico という URL にアクセスしてアイコンの取得を試みます。
なので、そちらを使用するのであれば指定は不要です。
また、ユーザーの端末やブラウザによってアイコンを出し分けることもできます。
<!-- 一般的なfavicon -->
<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- Appleデバイス用のアイコン -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="./assets/apple-touch-icon.png"
/>
<!-- Androidデバイス用のアイコン -->
<link
rel="icon"
type="image/png"
sizes="192x192"
href="./assets/android-chrome-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="256x256"
href="./assets/android-chrome-256x256.png"
/>
リンクタイプ license
license は、リンク先が著作権情報、ライセンス情報であることを示します。
ユースケース
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/" />
この例では文書がクリエイティブ・コモンズの「表示 4.0 国際 (CC BY 4.0)」ライセンスであることを示しています。
リンクタイプ canonical
canonical は、リンク先が正規の URL であることを示します。
ユースケース
同じリソースを指すが複数の URL がある場合に、正規の URL をリンクタイプ canonical で指定すると検索エンジンは選択した URL を優先し、重複コンテンツの問題を回避します。
https://www.example.com/
https://example.com/
https://example.com/?token=hogehoge
また、URL は異なるが https://www.example.com/ にリダイレクトされるページなどある場合に正規の URL を検索エンジン側に把握させます。
<link rel="canonical" href="https://www.example.com/" />
リンクタイプ nofollow
nofollow は、サイトオーナーがリンク先を推奨しないことを示します。
ユースケース
サイトオーナーがリンク先を推奨しないことを示します。
これを検索エンジンが読み取り評価の参考にする場合があります。
<a href="http://untrusted.com" rel="nofollow">信頼していないページ</a>
リンクタイプ noopener
noopener は、リンク先からリンク元のブラウジングコンテキストへアクセスできないようにします。
ユースケース
target=”_blank” などで新しいブラウジングコンテキストを開始した場合、リンク先のコンテンツから JavaScript を用いてアクセスできる場合があり、それを防ぎます。
<a href="https://example.com" target="_blank" rel="noopener">外部リンク</a>
新しいタブやウィンドウで開いたページが悪意のあるコンテンツを含む場合、window.opener を介して元のページを操作することが可能です。
noopener を使用することで、このような攻撃から保護することができます。
リンクタイプ noreferrer
noreferrer は、リンクをたどる際に参照情報を送信しないようにします。
ユースケース
リンクをクリックして新しいページに移動する際に、参照元の情報（リファラー情報）を送信しないようにブラウザに指示します。
ユーザーがリンクをクリックした際に、元ページの URL が新しいページのサーバに伝えられることを防ぎます。
<a href="https://example.com" rel="noreferrer">外部リンク</a>
リンクタイプ noreferrer は、先述の noopener と組み合わせて使用することが一般的です。
こうすることによってセキュリティとプライバシーの両方を向上させることができます。
リンクタイプ dns-prefetch
dns-prefetch は、事前に指定されたドメインの名前解決を行うよう働きかけます。
ユースケース
あとでアクセスする予定のある URL がある場合、リソースの読み込み時間の短縮が期待できます。
<link rel="dns-prefetch" href="https://example.com" />
ただ、ドメインの名前解決までしか行わないのでリソースによっては後述する preconnect や prefetch の方が適している場合もあります。
リンクタイプ preconnect
preconnect は、事前にドメインへの接続を確立しておくよう働きかけます。
ユースケース
あとでアクセスする予定のある URL がある場合、ドメインの名前解決、TCP コネクションの確立、TLS のネゴシエーションまで行います。
<link rel="preconnect" href="https://example.com" />
ページ上のリソースが読み込まれる際の待ち時間が短縮され、ページの読み込み速度が向上します。
リンクタイプ prefetch
prefetch は、今後利用する可能性のあるリソースを事前に取得し、ブラウザにキャッシュさせるよう働きかけます。
ユースケース
あとでアクセスする可能性が高い URL がある場合、ブラウザに事前にキャッシュさせるための指示を行います。
<link rel="prefetch" href="https://example.com/next-page" />
上記コードは、https://example.com/next-page を事前に取得し、キャッシュするようにブラウザに指示します。
これにより、https://example.com/next-pageにアクセスした際にページとスタイルがすでにキャッシュされているため、より迅速にページを表示できます。
リンクタイプ preload
preload は、現在のページで使用する予定のサブリソースを事前に取得してメモリに組み込んでおくよう働きかけます。
ユースケース
特定のリソースをページの初期読み込みの段階で事前に取得し、ブラウザにキャッシュさせるために使用します。
<link rel="preload" href="main.css" as="style" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="script.js" as="script" />
上記のコードは、現在のページで間も無く必要となるリソース、例えばスタイルシート、スクリプト、フォント、画像などに対して使用します。
これにより、ブラウザは他のリソースを読み込む前にこれらの重要なリソースの読み込みを優先的に行うことができます。
as 属性はリソースの種類を指定し、ブラウザに適切な優先度とキャッシュポリシーでリソースを処理させます。
crossorigin 属性は、フォントや他のクロスオリジンリソースに必要な場合に使用されます。
リンクタイプ modulepreload
modulepreload は、指定したモジュールスクリプトを事前に読み込みをします。
ユースケース
JavaScript モジュールの事前読み込みをブラウザに指示するために使用されます。
<link rel="modulepreload" href="module.js" />
modulepreload リンクタイプを使用すると、ブラウザはページの読み込みプロセスの早い段階でモジュールとその依存関係を事前に読み込み、解析することができます。これにより、ページのパフォーマンスが向上します。
リンクタイプ prerender
prerender は、リソースを事前に取得した上でバックグラウンドでレンダリングしておくよう働きかけます。
ユースケース
あとでアクセスする可能性が高い URL に prerender を指定することによって、ページがすでに読み込まれているため、表示が非常に迅速になります。
<link rel="prerender" href="https://example.com/next-page" />
上記のコードは、https://example.com/next-page というページをバックグラウンドでレンダリングし、キャッシュするようブラウザに指示します。
これにより、ユーザーがこのページにアクセスした際に表示速度の向上が期待されます。
リンクタイプ stylesheet
stylesheet は、リンク先が外部スタイルシートであることを示します。
ユースケース
外部スタイルシートを HTML 文書に関連付けるために用いられます。
<link rel="stylesheet" href="style.css" type="text/css" />
こうすることにより、CSS ファイルを HTML 文書から切り離して、デザインとコンテンツを分離することができます。
また、stylesheet ブラウザによっては CSS ファイルはキャッシュされます。
これにより、同じスタイルシートを使用する複数のページをユーザーが訪れる際、スタイルシートを再ダウンロードする必要がなくなり、ページの読み込み時間が短縮されます。
リンクタイプ prev / next
prev / next は、リンク先が現在のページと一続きのコンテンツであることを示します。
ユースケース
主にページネーションされたコンテンツや一連のプロセスをもつページに指定します。
<link rel="prev" href="https://example.com/prev-page" />
<link rel="next" href="https://example.com/next-page" />
この例では、現在のページの前のページのリソースが /prev、次のページのリソースが /next であることを検索エンジンに示しています。
これにより、検索エンジンはページネーションされたコンテンツであることを理解し、ユーザーにとって関連性の高いコンテンツを提供するのに役立てます。
さいごに
今回は、リンクタイプについての記事を書きました。
調べてみると思った以上に種類があったのと、リンクタイプを正しく指定することでアクセシビリティや、ページスピード、セキュリティ、プライバシーの向上までさまざまな恩恵があるので今後も意識してコードを書いていこうと感じました。
まだ紹介できていないリンクタイプもあるので興味がある方は W3C のドキュメントを確認することをおすすめします。
参考文献
Discussion