[42-3] link要素の「rel属性」の値（リンクタイプ）
最終更新日：2019年07月05日 （初回投稿日：2012年06月29日）
<link>要素の「rel属性」と「hreflang属性」で指定した「他言語版ページ」がある場合、検索エンジンはユーザの言語環境にあわせて自動的に検索結果を切り替えることができます。
そのほかにも「rel属性」を使って、検索エンジンに情報を提供することができます。
今回は、<link>要素の「rel属性」の値（リンクタイプ）と、その使い方を見てみましょう。
<link>要素は内容が多いため 記事を分けています。
- [42-1] link要素で 外部CSSファイルの読み込み・グループ化をしよう
- <link>要素全体の話と、外部CSSファイルの読み込み方法
- [42-2] link要素の media属性で 外部CSSをメディア別に切り替えよう
- media属性で外部CSSファイルを切り替えます。
- （ちょっとメモ）CSSの @import と @media（メディアクエリ）
- CSSファイル上で CSSを切り替える方法です。
- [42-3] link要素の「rel属性」の値（リンクタイプ） ←今日はココ
- たくさんの言語に対応したサイトの場合、<link>要素で言語の切り替えができます。
- [42-4] link要素で ショートカットアイコン（favicon）を表示させよう
- ショートカットアイコンを設定します。
<link>要素の rel属性の値（リンクタイプ）
「rel属性」の値は リンクタイプ（Link types）を使います。
<link>要素の「rel属性」で使う「リンクタイプ」の一覧をまとめておきます。
| alternate | 現在のドキュメントの代替表現を提供。 ・type属性が「application/rss+xml」なら RSSフィード。 ・type属性が「application/pdf」なら PDFファイル。 ・media属性を設定した場合、別のデバイス向けの代替えページ。 ・hreflang属性を設定した場合、別の言語の代替えページ。 |
| author | 著者へのリンクを提供。 |
| help | ヘルプへのリンクを提供。 |
| icon | ショートカットアイコンをインポート。 |
| license | 現在のドキュメントのメインコンテンツは、参照ドキュメントに記述されたコピーライトライセンスが及ぶことを示す。 |
| next | 続きモノのコンテンツで「次」のドキュメントは参照ドキュメントであることを示す。 |
| prev | 続きモノのコンテンツで「前」のドキュメントは参照ドキュメントであることを示す。 |
| search | 現在のドキュメントとその関連ページを通して検索するために使うことができるリソースへのリンクを提供。 |
| stylesheet | スタイルシートをインポート。 |
参考：
4.8.6. Link types - HTML 5.1 2nd Edition | W3C Recommendation
Link types - HTML | MDN
＊リンクタイプは <a>要素、<area>要素の「rel属性」でも使います。それらには上記以外に「bookmark、nofollow、noreferrer、tag」という値もあります。詳細は上記参考サイトをご覧ください。
「icon」と「stylesheet」は外部ファイルをその HTMLドキュメントに読み込みます。
それ以外の値は、<link>要素で使う場合は、検索エンジンのために 他のページへの ハイパーリンクを提供します。
例えば、あるページの <head>要素に下記の記述があったら、
<head>
<link rel=”prev” href=”http://example.com/chapter1.html”>
<link rel=”next” href=”http://example.com/chapter3.html”>
</head>
検索エンジンは、このページとその前後のページをシリーズとして認識し、検索結果画面で前後関係も正しく表示してくれます。
また、次の場合なら、
<head>
<link rel="author license" href="http://example.com/about">
<link rel=”help” href=”http://example.com/help”>
</head>
検索エンジンは、著者・ライセンスにに関する情報のページと、ヘルプページを把握し、検索結果画面に表示することができます。
rel="alternate" hreflang=" " で他言語版ページへ
alternateは、代替物という意味。
hreflangは、href と langの合成。
hrefは「Hyper Text Reference」の略。リンク先のURLを示します。
langは「language」の略。言語という意味です。
サイトに英語や中国語など「他言語バージョン」がある場合、
<link rel="alternate" hreflang="言語コード">
と指定すれば、ユーザーが サーチエンジンやソーシャルブックマークなどで見つけたとき、その人の言語環境に合ったURLへ導いてくれます。
サイト全部がそっくり他国語に翻訳されてなくても、一部だけに（ショップページとか値段のページとか）他言語ページがある場合、そのページにこれを書いておくと良いのだそうです。
Google の「rel="alternate" hreflang="x" について 」で詳細がありますので、そちらも参考にしてください。
サンプルソースコードです。
<head>
<link rel="alternate" hreflang="en" href="http://en.example.com/" >
<link rel="alternate" hreflang="zh" href="http://zh.example.com/" >
</head>
「en」は英語、「zh」は中国語の「言語コード」です。
その他の言語コードは「ISO 6391-1 形式」の一覧表で確認してください。
rel="alternate" で RSSフィードへ
「link rel="alternate"」に type属性で RSSを指定してやると、「フィードリーダー」で見つけてもらえるようになります。
RSSとはサイトの更新情報を公開するのに使われてる、Webページの内容を要約する、XMLファイルです。サイトの各ページのタイトル、アドレス、見出し、要約、更新時刻などが書かれます。
RSS用のソースの例です。
<head>
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed">
</head>
type属性で指定するMIMEタイプは「application/rss+xml」です。
「MIMEタイプ」については「ちょっとメモ：MIMEタイプ」をご覧ください。
余談ですが、<a>要素で直接的に RSSフィードを表示することもできます。
←（この「ほんっとに...」のRSSです）
この場合も <link>要素と同じように「link rel="alternate"」と type属性を使います。
<a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a>
rel="alternate" で PDFファイルへ
プリント用に PDFファイルを作っておいて、「link rel="alternate"」に type属性で PDFを指定すれば、PDFファイルに切り替えられます。
<head>
<link rel="alternate" media="print" href="print.pdf" type="application/pdf">
</head>
「print.pdf」を HTMLファイルの代替え書類として、「media属性」で「print」にして印刷用に指定しています。
type属性で指定するMIMEタイプは「application/pdf」です。
「MIMEタイプ」については「ちょっとメモ：MIMEタイプ」をご覧ください。
「rel="canonical" 」で優先URLを指定しよう
canonical は、標準的なという意味です。
複数のURLから同じページにアクセスできるけど、Googleの検索エンジンに使用する URLを1つに絞りたいと知らせるのに rel="canonical" で指定できます。
URLの標準バージョンを検索エンジンに知らせるんです。
参考：正規 URL を使用する - Search Console ヘルプ
「www.」の有無によって、同じサイトなのにサーチエンジンに別物のサイトとして見られる場合（「www.example.com」と「example.com」とか）には、サイト内の全ページにそれぞれの正規のURLを書きます。
サーバ側で「.htaccess」を使ってURLの正規化をするのが一般的だそうですが、サーバの環境でこれができない場合に、この「rel="canonical"」を使うと良いのだそうです。
下記のように、href属性に優先にしたいURLを書きます。
<head>
<link rel="canonical" href="https://example.com/dresses/green-dresses/">
</head>
また、色違いの商品ページなどがたくさんあるサイト（color-red.html、color-pink.html、color-blue.html...が単なる商品の画像違いとか）は、検索エンジンに重複ページ（レベルが低いサイト）と判断されるかもしれません。
これを避けるために、優先ページを決め、それ以外のページに rel="canonical" でこの優先ページを指定します。
<head>
<link rel="canonical" href="https://blog.example.com/dresses/color-red.html">
</head>
URLは、相対パスよりも 絶対パスで書いたほうがエラーになりにくいそうです。
この <link rel="canonical"> は <head>要素の最上部に書いた方が確実なんだって。
次回予告
次回は、ウェブページにショートカットアイコンを表示させましょう。
アイコンになる画像を用意して「rel="icon"」で指定。「sizes属性」は、このアイコンのサイズを指定します。
- 関連記事
-
- （ちょっとメモ）文字コード、文字集合、エンコードについて（2）
- （ちょっとメモ）文字コード、文字集合、エンコードについて（1）
- [45-2] meta要素の charset属性で文字コードを指定しよう
- [45-1] meta要素で基本情報（メタデータ）を指定しよう
- [44] script要素で HTMLにスクリプトを読み込む or 直接書く
- [43] style要素で CSS を HTML文書内に書こう
- [42-4] link要素で ショートカットアイコン（favicon）を表示させよう
- [42-3] link要素の「rel属性」の値（リンクタイプ）
- （ちょっとメモ）CSSの @import と @media（メディアクエリ）
- [42-2] link要素の media属性で 外部CSSをメディア別に切り替えよう
- [42-1] link で外部CSSファイルの読み込み・グループ化をしよう
- （ちょっとメモ）MIMEタイプ
- [41] base でベースの URL を示そう
- [40] メタデータ・コンテンツって何？
- （ちょっとメモ）HTML5の文法チェックサイト
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
