HTMLでlink要素を使いこなしたいと思っていませんか？

link要素が重要な要素であることは分かっていても、複数の用途があって、複雑そうに感じますよね。

今回は、HTMLのlink要素をきちんと理解しておきたいという方に向けて、

以上の項目に沿って、説明していきます。

この記事を読めば、HTMLのlink要素や、その中のrel属性の使い方が分かるようになりますよ。ぜひ最後まで読んでくださいね！

link要素とは？どこで使用するのか

link要素は、そのページのHTML文書と、外部のファイルやページを関連付けるための要素です。

具体的には以下のように記述します。

<link rel="stylesheet" href="style.css">

link要素は、HTML文書の中のどこに書き込むのが良いのでしょうか？

HTMLは一般的に、headとbodyで構成されています。

head内には、検索エンジンやブラウザなどに、Webページの情報を伝えるための記述をします。

文字コードやページタイトル、読み込むファイルなど機械が判断する情報ですね。

これに対して、ページを訪れたユーザーが見るテキストや画像などの情報は、bodyの中に記述します。

link要素は、検索エンジンやブラウザに対する情報ですので、上記のheadの方に記述します。

実際は、リンクの条件によってbody内に置くこともできますが、文書の構成が煩雑になるため、本文のコンテンツから離したhead内に書くことを推奨します。

a要素とは何が異なるのか

a要素もリンクと呼ばれますよね。

この要素とlink要素は何が違うのでしょうか。

両者は使い道が全く異なるのできちんと覚えておきましょう。

a要素はbodyの中に設置し、別ページや同ページ内の違う場所に移動するリンクを作成します。

ユーザーがリンクをクリックすると、指定された場所に飛ぶことができます。

link要素は、前述のとおり、外部ファイルやページと関連付けるためのもので、クリックできるリンクを作成するわけではありません。

rel属性について

link要素の中でも特に重要な、rel属性について解説していきます。

rel属性とは、リンク先のファイルやページとの関係性を指定します。

例えば、リンク先がスタイルシートのファイルであれば、「stylesheet」という値を使います。

rel属性の値について、詳しく見ていきましょう。

alternate

rel=”alternate”の場合、link要素で指定されたリンク先は、現在の文書の代替文書であることを示します。

後述するtype属性などと組み合わせて、どのような形式の代替文書であるか、示すこともできます。

author

rel=”author”の場合、文書の著者の情報であることを示します。

「mailto:」というスキームを利用すると、リンク先として、メールアドレスを指定することもできます。

<link rel="author" href="mailto:example@gmail.com">

canonical

rel=”canonical”の場合、リンク先は正規ページのURLであることを示します。

検索エンジンに推奨するURLを伝えたいときに役立ちます。

dns-prefetch

Webサイトのサーバーにアクセスする際に、コンピュータは、ドメイン名を「DNS(Domain Name System)」へ問い合わせます。

そこで得たIPアドレスを使用して、サーバーと通信を行います。これを「名前解決」といいます。

rel=”dns-prefetch”を指定することで、この名前解決を先に行い、外部リソースの読み込みを早くすることができます。

help

rel=”help”の場合、現在の文書のヘルプ文書であることを示します。

icon

rel=”icon”の場合、指定された画像は、Webサイトのアイコンであることを示します。

画像以外の形式も指定可能ですが、基本的には画像が利用されます

license

rel=”license”の場合、文書のメインコンテンツの著作権情報であることを示します。

manifest

rel=”manifest”の場合、文書のウェブアプリマニフェストであることを示します。

これにより、オフラインでの動作など、スタンドアロンアプリの機能を実装できるようになります。

modulepreload

rel=”modulepreload”の場合、先読みするモジュールスクリプトであることを示します。

モジュールスクリプトとは、複数のスクリプトファイルで構成されたファイルのことです。

next

rel=”next”の場合、現在の文書の次の文書であることを示します。

1つの記事が複数の文書に分かれているときなどに使います。

pingback

rel=”pingback”の場合、文書のピンバックサーバーであることを示します。

ピンバックとは、ハイパーリンクを設置した際に、リンク先に通知を送信する仕組みのことです。

処理を行うプログラムをピンバックサーバーといいます。

preconnect

rel=”preconnect”の場合、事前に接続しておくべきオリジンであることを示します。

異なるオリジンからの外部リソースである場合などに、接続にかかる時間を減らすことができます。

prefetch

rel=”prefetch”の場合、リンク先が事前読み込みをする外部リソースであることを示します。

取得したリソースの保存先はキャッシュであり、読み込んだスクリプトなどが自動的に実行されるわけではありません。

移動先のWebページで使用する可能性のあるリソースを事前に読み込んでおくことで、実行するまでの時間短縮になります。

preload

rel=”preload”の場合、リンク先が事前読み込みをする外部リソースであることを示します。

rel=”prefetch”とは異なり、読み込んだものは実行されます。

通常は、読み込み順が後になるようなリソースを先に読み込み、webページのファーストビューまでの時間を早めることができます。

prerender

rel=”prerender”の場合、事前にレンダリングする外部リソースであることを示します。

rel=”prefetch”のリソースの取得に加えて、レンダリングも行う機能です。

prev

rel=”prev”の場合、現在の文書の前の文書であることを示します。

rel=”next”と同様、1つの記事が複数の文書に分かれているときなどに使います。

search

rel=”search”の場合、外部リソースが文書の検索機能であることを示します。

stylesheet

rel=”stylesheet”の場合、外部リソースが文書のスタイルシートであることを示します。

rel=”alternate”と併せて指定すると、ユーザーが切り替えできる代替スタイルシートに指定されます。

rel属性はどうやって使う？具体例を紹介

rel属性の値について、理解していただけたでしょうか？

それぞれの値の説明のみでは、具体的にどう使うのか、よく分からなかったかもしれません。

そこで、ここではrel属性の値を使った、具体的な活用方法について説明していきます。

rel属性以外の属性と組み合わせて使用する場合もあります。

その他の属性については、後の章で紹介しますね。

スタイルシートを読み込む

<link rel="stylesheet" href="style.css">

前述したとおり、rel=”stylesheet”は、外部リソースがスタイルシートであることを示します。

上記のコードでは、「style.css」というCSSファイルを読み込んでいます。

Webアイコンフォントとして有名な「Font Awesome」を使用する際にも、この値を指定しますね。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">

代替スタイルシートを指定する

<link rel="alternate stylesheet" href="style01.css">
<link rel="alternate stylesheet" href="style02.css">

rel=”stylesheet alternate”を指定した場合は、そのスタイルシートが代替スタイルシートであることを示します。

このような指定をすることで、ユーザーは、ブラウザ上のメニューなどから、スタイルシートの切り替えを行うことができるようになります。

端末に最適なリソースをメディアクエリで読み込む

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="desktop.css" media="all">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)">

media属性では、読み込んだリソースを適用するメディアを指定することができます。

例えば、media=”all”と指定すると、すべてのデバイスに対応します。これは初期値でもあります。

media=”print”は、印刷する際のプレビューを示しています。

media=”screen”は、コンピュータ・スクリーンのことで、コンピュータのディスプレイ画面やモニター画面を指します。

これらのメディアタイプの他に、横幅・高さを示す「width」「height」などを指定することもできます。

検索エンジン向けに正規URLを示す

<link rel="canonical" href="正規ページのURL">

rel=”canonical”は、検索エンジンに対して、このページの正規ページを示します。

WebページのURLにパラメータが追加されることで、内容が重複する別のURLが発生する場合があります。

検索エンジンのクローラーは、このようなURLも別ページとして判断してしまいます。

同じ内容のページが複数あることは、検索エンジンのSEOとしても好ましくない状態ですので、このように正規ページのURLを指定して、情報を統一することが推奨されています。

Webサイトのアイコンを指定

<link rel="icon" href="favicon.png">

rel=”icon”を使うと、Webサイトのアイコンを示すことができます。

このアイコンは、ブックマーク一覧やブラウザのタブなどに表示されます。

以下のように、アイコンを複数指定することで、ユーザーの閲覧環境に応じて最適な画像を表示させることができます。

<link rel="icon" href="favicon64.png" sizes="64x64">
<link rel="icon" href="favicon128.png" sizes="128x128" >
<link rel="apple-touch-icon-precomposed" href="apple-icon.png">

rel属性とsizes属性を適切に指定することで、ブラウザがアイコンを選択するためのヒントを与えます。

リソースの先読みを指示する

<link rel="preload" href="main.js" as="script">

rel=”preload”を指定すると、指定したパスのリソースの先読みを実行します。

as属性には、リソースの種類を指定する必要があります。

上記のコードのように、JavaScriptファイルを読み込む場合には、「script」を指定します。

任意のリソースを先読みさせることで、ファーストビューの速度を速める効果があります。

ただ、同時に読み込むリソースのサイズが大きくなると、逆にページが重くなってしまうので注意しましょう。

RSSフィードのURLを示す

<link rel="alternate" type="application/rss+xml" title="フィード" href="/index.xml">

代替文書であることを示すrel=”alternate”に加えて、 type属性を上記のように記述することで、RSSフィードを表すことができます。

RSSフィードとは、Webサイトの更新情報などを記述したデータのことです。

ユーザーはRSSリーダーを使って、RSSフィードの更新を受け取ることで、素早く情報を入手することができます。

WordPressで作ったサイトには、この機能が自動で組み込まれています。

別URLのページがあることを示す

<link rel="alternate" media="screen and (max-width: 640px)" href="モバイルページのURL">

現在のWebページの他に、スマホ版のページがある場合などに、そのURLを伝えることができます。

PCとモバイル版でページが変わらないレスポンシブデザインであれば、使う必要はありませんね。

同様に、現在のページに翻訳版のページがあるときに、下記のコードを指定します。

<link rel="alternate" hreflang="en" href="翻訳ページのURL">

多言語を扱うサイトなどで利用されます。

hreflang属性では言語コードを指定でき、英語であれば「en」、アメリカ英語であれば「en-us」というように指定します。

前後のページのURLを指定する

<link rel="prev" href="1つ前のページのURL">
<link rel="next" href="1つ後のページのURL">

rel属性が「prev」の場合は、リンク先が前のページであることを示し、「next」の場合には次のページであることを示します。

この指定は、主に1つの記事が複数のページで構成されているときに使用されます。

最初のページにはnextのタグのみを書き、最後のページにはprevのタグのみを書きます。

link要素の他の属性

これまで、rel属性を中心にlink要素を説明してきました。

リンクタイプを指定するrel属性は大切ですが、他の属性も組み合わせて使うことが多かったですね。

他の属性についても詳しく見ていきましょう。

as属性

<link rel="preload" as="script" href="script.js">
<link rel="preload" as="image" href="picture.png">

as属性は、link要素が事前に読み込むリソースの種類を指定することができます。

rel属性に「preload」または「prefetch」が指定された場合にのみ使用します。

前述のように、「preload」と「prefetch」は、リソースの先読みを実行させる値です。

ここにas属性を指定することで、正確な優先順位の指定やコンテンツセキュリティポリシーの適用、Acceptリクエストの設定ができます。

as属性の値を一覧で紹介します。値によって、適用先のリソースの種類が変わります。

crossorigin属性

crossorigin属性は、外部リソースを取得する際に、CORSリクエストを有効にし、設定を行う属性です。

CORSは「Cross Origin Resource Sharing」のことで、日本語訳するとオリジン間リソース共有となります。

オリジンとは、URLの「スキーム（http,httpsなど）」、「ホスト（ドメイン）」、「ポート」の3つで構成されています。

これらすべてが一致しているときに、同じオリジンであると言います。

CORSは、あるオリジンで動作しているサイトに、異なるオリジンにあるリソースへのアクセスを認める仕組みです。

通常は、Webページの脆弱性を防ぐために、同一オリジンのリソースのみアクセスできるように制限がかかっています。

crossorigin属性で指定できる値は、以下の2つです。

anonymous

CORSリクエストが有効になります。

このときに、CookieやSSL証明書、HTTP認証などの信用情報は送信されません。

crossorigin属性の値を空にしていた場合にも、これと同じ動作をします。

use-credentials

こちらも、CORSリクエストが有効になります。

CookieやSSL証明書、HTTP認証などの信用情報が送信されます。

disabled属性

disabled属性は、rel属性が「stylesheet」の場合にのみ適用される属性です。

href属性に指定された外部スタイルシートの読み込みを無効化します。

スクリプトを用いて、disabled属性の値を「false」に変更するか、削除することでスタイルシートの読み込まれるようになります。

href属性

href属性は、link要素を使って関連付ける外部リソースのURLを指定します。

URLは、絶対パス・相対パスどちらも使用可能です。

link要素には、href属性かimagesrcset属性のどちらかを指定する必要があります。

どちらもない場合には、機能がない要素となってしまいます。

hreflang属性

hreflang属性は、指定された外部リソースの記述言語を示します。

「en」や「ja」などといった、言語コードで指定ができます。

文書の翻訳版をリンクに指定しているときなどに、ブラウザやユーザーに伝える目的で使用します。

imagesizes属性

imagesizes属性は、rel属性が「preload」またはas属性が「image」のときに、先読みする画像の表示サイズを指定します。

img要素やpicture要素に埋め込まれた画像ファイルをlink要素で先読みさせたい場合に使用します。

imagesrcset属性

imagesrcset属性は、rel属性が「preload」またはas属性が「image」のときに、レスポンシブ画像を先読みさせたい場合に使います。

指定できる値は、「ビューポートの横幅ごとの画像URL」もしくは「デバイスピクセル比ごとの画像URL」となります。

値の中身は、画像ファイルが読み込まれたsource要素のsrcset属性と同じものになります。

integrity属性

integrity属性は、値としてBASE64でエンコードしたハッシュ値を指定します。

外部リソースを読み込んだ際に、integrity属性のハッシュ値とリソースのハッシュ値が一致した場合にのみ、そのリソースを使用します。

第三者によって、リソースが予期せぬ改ざんを加えられていないかを検証するセキュリティ機能です。

rel属性が「stylesheet」、「preload」または「modulepreload」のときに使うことができます。

media属性

media属性は、使用する外部リソースのメディア条件を指定します。

ユーザーのデバイス環境に応じて、最適なリソースを提供することに役立ちます。

値は、CSSで定義されているメディアクエリで記述します。

media属性を指定していない場合は、既定値「all」が適用され、すべてのメディアが対象になります。

referrerpolicy属性

referrerpolicy属性は、外部リソースを読み込む際に、リファラーポリシーを用いるかどうかを指定します。

リファラーとは、ユーザがWebページに訪れた時に、経由してきた参照元のURLのことです。

この参照元URLをWebサーバーに送信するかどうか、および送信する内容をリファラーポリシーで決めることができます。

多くのWebサイトでは、この参照元URLを使用し、ユーザーがどのように訪れたかを解析します。

URLに、ユーザーIDなど外部に知られてはいけない情報が含まれていた場合、セキュリティ上の理由からこれを制御することができます。

また、多くのブラウザでは、リンク先がHTTPであるなど、セキュリティレベルが低い場合にはリファラーを送信しない仕組みになっています。

こういったときにも、通常は送信しないリファラーを送信する設定に変更することができます。

値の一覧を紹介します。

no-referrer

リファラー送信は行われません。

no-referrer-when-downgrade

現在の文書とリンク先のセキュリティレベルを比較して、等しいと判断された場合にリファラーを送信します。

リンク先の方が低い場合には、送信しない設定です。

例えば、両者とも「HTTPS」である場合などは送信されますが、リンク元が「HTTPS」で、リンク先が「HTTP」である場合には送信されません。

same-origin

現在の文書とリンク先のオリジン（URLの「スキーム」「ホスト」「ポート」で構成されたもの）が等しい場合に、リファラーを送信する設定です。

origin

送信するリファラーとして、オリジンのみ（ドメインより後ろは含まない情報）を設定します。

strict-origin

「no-referrer-when-downgrade」と同じく、セキュリティレベルが等しいと判断されたときに送信されます。

送信されるリファラーはオリジンのみです。

origin-when-cross-origin

現在の文書とリンク先のオリジンが等しい場合には、リファラーとしてURLをそのまま送信します。

異なる場合には、オリジンのみを送信します。

strict-origin-when-cross-origin

現在の文書とリンク先のオリジンが等しい場合には、リファラーとしてURLをそのまま送信します。

セキュリティレベルが等しいと判断されたときには、オリジンのみを送信、セキュリティレベルが低い場合には何も送信しない設定です。

unsafe-url

リファラーとして、URLをそのまま送信します。

sizes属性

sizes属性は、読み込まれるアイコンファイルのサイズを指定します。

値は横幅と高さのピクセル数です。

rel属性が「icon」や「apple-touch-icon」などを指定したときに使われます。

アイコンファイルが複数ある場合に、このsizes属性をヒントにして、どのアイコンを読み込むか選択します。

title属性

title属性は、rel属性に「stylesheet」を含んでいた場合、代替スタイルシートの名前として指定されます。

これに加えて、rel属性に「alternate」を含んでいる場合には、指定のスタイルシートはデフォルトでは使用されません。

ユーザーの切り替え操作によって、適用されるようになります。

「alternate」を含んでいない場合には、スタイルシートはデフォルトで適用されますが、他のスタイルシートに切り替えると適用から外れます。

type属性

type属性は、指定された外部リソースのデータのタイプを指定します。

具体的には、CSSファイルであれば「text/css」、JavaScriptファイルであれば「text/javascript」と指定します。

ただし、link要素でスタイルシートを読み込む場合、使用されるものはCSSファイルのみであるため、「text/css」を省略することが推奨されています。

まとめ：link要素は検索エンジンやブラウザに情報を伝える

ここまで、HTMLのlink要素について、rel属性を中心に解説してきました。

検索エンジンやブラウザへ情報を伝える上で、重要な要素になることがわかっていただけたでしょうか？

実際にユーザーに見える部分ではないので、手を出しにくいかもしれませんが、これを機に積極的に使ってみてください。

今回の記事が少しでも参考になれば幸いです。

＼プログラミングスクールを比較／