link要素|HTML5|on Note

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

on Note

「prev」「next」をrel属性に使用したナビゲーション

複数のページに跨がるような続きもののコンテンツが存在する時、link要素でのrel属性を、rel="prev"と記述するとhref属性の値で指定したURLが現在文書の前ページであること、rel="next"と記述するとhref属性の値で指定したURLが現在文書の次ページであることを示す。

「prev」「next」を使用することで、続きものになったコンテンツの、個々のURL間の関係性を検索エンジンクローラに示すことができ、検索エンジンのインデックスがより正確になることが期待できる。また、閲覧者が使用する一部のブラウザでは、ナビゲーション用のメニューを提供する。

rel="prev"
複数ページに跨がるコンテンツにおいて、href属性で指定したURLが、現在文書の前の文書であることを示す。
rel="next"
複数ページに跨がるコンテンツにおいて、href属性で指定したURLが、現在文書の次の文書であることを示す。
href="URL"
前の文書及び次の文書のURLを示す。尚、絶対URLと相対URLのどちらの記述でも構わない。

「prev」「next」の使用例

例えば3ページに跨がる続きもののコンテンツがあった時の、各ページの順序を表してみる。

1ページ目「page_1.html」での記述において、「page_2.html」が次のページであることをrel="next"を使用して示す。

<link rel="next" href="page_2.html" title="次ページ">

前のページ「page_1.html」と次のページ「page_3.html」が存在する「page_2.html」では、rel="prev"を使用したlink要素とrel="next"を使用したlink要素の両方を記述する。

<link rel="prev" href="page_1.html" title="前ページ">
<link rel="next" href="page_3.html" title="次ページ">

3ページ目「page_3.html」での記述において、「page_2.html」が前のページであることをrel="prev"を使用して示す。

<link rel="prev" href="page_2.html" title="前ページ">

最初のページではrel="prev"を使用したlink要素は存在せず、最後のページではrel="next"を使用したlink要素は存在しない。

「rel="canonical"」を使用して優先ページを示す

canonicalを値としたrel="canonical"は、href属性に指定されたURLを優先するよう検索エンジンに指示を出す。「canonical」は参考情報であるものの、重要な参考情報となり得る。

<link rel="canonical" href="priority.html" title="優先ページ">

ある文書で上記を記述した場合、その文書を捜索する検索エンジンに「優先ページ」を優先するよう指示を出す。類似する内容が含まれる文書が複数存在する時、どれか1つの文書を優先することでユーザの利便性を高める。

内容が重複するページが大量にあることはユーザの利便性を低下させる。検索エンジンも、内容が重複するページを良しとせずペナルティを受けかねない。

ウェブ制作の中で、ページの内容が重複するケースは多々ある。よって、canonicalのような仕組みは必要となる。

rel="prev"rel="next"を指定することと、rel="canonical"を指定することは別々の概念。よって、同一のページに両方のlink要素が存在しても構わない。

ページの正規URLを「rel="canonical"」で指定する

1つのウェブページであっても、このページ本来のURLにパラメータが付与されるなどによって、複数のURLが生じるケースがある。この時、検索エンジンクローラは、それぞれのURLを別のページの情報として取り扱う。rel="canonical"を使用し、href属性で本来のURLを指定しておけば、派生したURLは本来のURLに関連付けられ、クローラも本来のURLに情報を一元化して取り扱えるようになる。

メニュー