link要素|HTML5|on Note

link要素で文書間の関係を示す

on Note

link要素のrel属性で指定できるリンクタイプ

rel属性の値にリンクタイプのキーワードを指定することで、現在の文書と外部の文書との論理的関係を表すことができるUAがナビゲーションを構成したり、検索エンジンロボットがリンク情報収集の補助に利用したりなど、UAが、リンク先をどのように扱うかを判断する為の情報となり得る。

リンクタイプは半角英字で記述。大文字・小文字は区別されない。

alternate
現在文書の代替表現を示す。
hreflang属性と併用し翻訳版を指定したり、media属性と併用し別メディア版を指定するなど。
author
現在文書の著者情報の文書を示す。
help
ヘルプの文書を示す。
<link rel="help" href="help.html" title="ヘルプ">
icon
現在文書を表すアイコンをインポートする。
<link rel="icon" href="img.png">
license
現在文書の著作権情報を示す。
<link rel="license" href="license.html" title="著作権">
next
一連の文書の中で、現在文書の次の文書を示す。
<link rel="next" href="next.html" title="次ページ">
prefetch
先読みすべき外部リソースを示す。
prev
一連の文書の中で、現在文書の前の文書を示す。
<link rel="prev" href="prev.html" title="前ページ">
search
現在の文書と、その関連ページを検索する為に使用可能なリソースへのリンクであることを示す。
<link rel="search" href="search.html" title="検索">
stylesheet
外部スタイルシートを示す。
alternateと併用することで、代替スタイルシートを示す。

iconstylesheetでは、現在文書が外部リソースを読み込む。それ以外のキーワードは、link要素での使用においては、検索エンジンの為に他の文書へのハイパーリンクを提供する。

1つのlink要素が読み込むことができる外部ファイルは1つ。よって関連付ける外部ファイルが複数ある場合はlink要素も複数記述する。ただ、1つの外部ファイルが現在の文書にとって考えられる関係性(rel属性で与えられたキーワード)が複数ある場合もある。その時はrel属性の値で、半角スペースで区切って複数のキーワードを与える。

rel="alternate"

現在の文書の、代替えの文書を示す。例えばRSS配信を行っている場合、閲覧者のブラウザが自動的にRSS配信の通知を受けることができる。

ウェブサイトで配信するフィードを文書と関連付ける場合。

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

type属性と併せて使用し、PDF版の指定をした場合。

<link rel="alternate" href="sample.pdf" type="application/pdf" title="PDF版">

hreflang属性と併用することで翻訳版を示す。

<link rel="alternate" href="english.html" hreflang="en" title="英語版">

media属性と併用することで別メディア版を示す。印刷用の場合。

<link rel="alternate" href="print.pdf" media="print" title="プリント">

別メディア版のモバイル用の場合。

<link rel="alternate" href="mobile.html" media="handheld" title="モバイル">

リンク先が代替文書であることを示すと同時に、hreflang属性が指定されている場合はその代替文書が現在の文書の翻訳版であることを表す。また同時に、media属性が指定されている場合はその代替文書が別のメディア向けの文書であることを表す。

rel="icon"

ブラウザのウィンドウのタブ、ブックマークの一覧などに表示されるウェブサイトのアイコン(favicon)は、rel="icon"rel="shortcut icon"を指定して関連付けることができる。

rel="apple-touch-icon"では、スマートフォンのホーム画面などに表示するアイコンを指定できる。

rel="author"

リンク先が、現在の文書に関する「著者情報」であることを示す。

<link rel="author" href="profile.html" title="プロフィール">

リンク先が、現在の文書に関する「著者の連絡先」であることを示す。

<link rel="author" href="mailto:info@example.com" title="メール">

href属性の値にGoogle+のプロフィールページのURLを記述することで、著者情報とGoogle+アカウントとを関連付けることができる。こうすることで、Googleと検索結果の閲覧者に対し、一貫した著者情報を提供できる。

<link rel="author" href="https://plus.google.com/○○○">
メニュー