リンク要素（link）の仕様と使い方

カテゴリ：HTML編

link要素

link要素は関連するページ（ファイル）をリンクするために使用し、head要素内に記述します。

stylesheet

外部ファイル化したスタイルシートを読み込む場合、rel属性にstylesheetを指定し、type属性にtext/css、hrefにCSSファイルのパスを指定します。（type属性は省略可能です）

<link rel="stylesheet" type="text/css" href="/css/main.css">

レスポンシブサイトにおいては、media属性にメディアを指定し、hrefにCSSファイルのパスを指定します。
max-width: 640pxはデバイスの幅が640pxまでの場合に読み込む事を意味します。
つまりhref属性にはスマートフォン表示用のCSSを指定します。
※これはPCサイトをベースとし、スマートフォン用のCSSをメディアで分ける場合です。

<link rel="stylesheet" media="(max-width: 640px)" href="/css_max640/main-max640.css">

※レスポンシブサイトやメディアクエリの詳細については、別ページで解説します。

alternate

PC用ページとスマートフォン用ページが別URLで作成されている場合、rel属性にalternateを指定し、media属性にメディア、href属性にスマートフォンのページのURLを指定します。
こうすることで、検索エンジンは指定したURLをスマートフォン用ページとして認識し、スマートフォンで検索した際の検索結果に反映します。
※別URLでスマートフォンサイトを作成している場合、モバイルフレンドリーサイトとして評価されるには下記の指定は必須となります。

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

shortcut icon

Webサイトのショートカットアイコン（Webブラウザでブックマークに登録した場合になどに表示されるアイコン）はrel属性にshortcut iconを指定し、hrefにアイコンファイル（拡張子がicoのファイル）を指定します。

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

author

著者情報ページを指定する場合は、rel属性にauthorを指定し、href属性に著者情報ページ（プロフィール）を指定します。

<link rel="author" href="/profile.html">

prevおよびnext

1つの記事が複数のページにまたがる場合（記事のページ分割）、rel属性に前のページをprev、次のページをnextで指定し、href属性でページのURLを指定します。
下記を指定した場合、検索エンジンは関連するページを1つのグループとして扱い、検索結果には1ページ目を表示します。

<link rel="prev" href="01.html">
<link rel="next" href="03.html">

※但し分割ページの他に1ページにすべてを表示したページも用意している場合、且つすべてを表示したページを検索結果に表示させたい場合、分割ページには、rel属性に後述するcanonicalを指定します。

canonical

canonicalは重複ページであることを示し、検索エンジンはcanonicalが指定されたページはインデックスしません。
重複ページは他に同等の（類似する）ページが存在することを意味し、一般的にPC用ページとスマートフォン用ページなどメディアごとに同等の別URLが存在する場合、1つのコンテンツ（記事）を分割したページ（ページネーション）とすべてを表示したページの両方が存在する場合などが該当します。

重複ページは通常、検索エンジンに無視されますが、場合によってはペナルティを受ける可能性があります。
そのため、重複ページの内、検索エンジンにインデックスさせたくない方のページにcanonicalを指定します。

具体的には、rel属性にcanonicalを指定し、hrefに同等のページのURLを指定します。
※下記の場合、hrefで指定したページがインデックスされます。そのため、hrefで指定したページはcanonicalにしたり、noindexにしてはいけません。

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

分割ページを重複コンテンツとして示す場合は、分割ページ側でhrefにすべてを表示したページのURLを指定します。

<link rel="canonical" href="/articles/01/">

W3Cによるlink要素の説明

link要素により、著者はドキュメントを他のリソースにリンクすることができます。
リンクの宛先はhref属性で指定します。href属性は存在する必要があり、空白で囲まれた有効な空でないURLを含む必要があります。 href属性が存在しない場合、要素はリンクを定義しません。

公開日時：2018年02月04日 11:00:35
最終更新日時：2022年03月12日 07:17:00