属性
- グローバル属性
下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。- href
リソースのリンク先URLを指定します。
- rel
現在のページに対する、リンク先リソースの位置付けを指定します。
alternate
現在のページの代替となるページを指定
author
著作情報を指定
help
現在のページに対するヘルプページを指定
icon
ページのアイコン（ファビコン）を指定
license
ライセンスページを指定
next
現在のページが連続したページの1部であった場合に、次ページのリンクを指定
prev
現在のページが連続したページの1部であった場合に、前ページのリンクを指定
prefetch
リンク先リソースをあらかじめキャッシュするよう指定
search
関連ページを検索するページURLを指定
stylesheet
スタイルシートを表します。
- media
リンク先リソースの該当するメディアを指定します。
PCなどのディスプレイであれば「screen」、テレビであれば「tv」、モバイルデバイスであれば「handheld」など。- hreflang
リンク先リソースの言語を指定します。
例えばリンク先が英語で記述されたページであれば「en」、日本語だったら「ja」というように指定します。
リンク先リソースが現在のページと同じ言語の場合は省略することができます。- type
リンク先リソースのMIMEタイプを指定します。
- type
リンク先リソースのMIMEタイプを指定します。
スタイルシートであれば「text/css」、PDFファイルは「application/pdf」など。- sizes
アイコン画像を読み込む場合にサイズを指定します。
値は「横幅x高さ」の形式（「x」は半角英字のエックス）で指定します。
サイズを複数指定することもでき、その場合は「sizes="16x16 32x32"」と半角スペースで区切って指定してください。
使用例
スタイルシートを読み込む
こちらは最も一般的な読み込み方法となります。
HTML コード例
<link rel="stylesheet" type="text/css" href="style.css">優先スタイルシートを指定したい場合はtitle属性を指定します。
下記の例では1行目のスタイルシートを読み込んでから、2・3行目のうち、先に記述されている2行目だけが読み込まれます。
HTML コード例
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" title="スタイルシート1" href="style.css">
<link rel="stylesheet" type="text/css" title="スタイルシート2" href="style.css">rel属性に「alternate」を指定してtitle属性も指定すると、閲覧者が代替スタイルシートを選択することができます。
下記の例では1行目のスタイルシートを読み込みつつ、ブラウザーのメニューなどから2・3行目のいずれかのスタイルシートを選択できるようになります。
HTML コード例
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="alternate stylesheet" type="text/css" title="スタイルシート1" href="style.css">
<link rel="alternate stylesheet" type="text/css" title="スタイルシート2" href="style.css">アイコン（ファビコン）を読み込む
ブラウザーのタブやブックマーク一覧に表示される、サイトのアイコンを指定します。
2行目はWindowsのInternetExploere用に用意する場合にのみ記述します。
スマホやタブレットのブックマーク機能として、アプリのようにホーム画面へリンクを表示させることができます。
3行目は、その時に表示されるアイコン画像を指定する場合に記述します。
HTML コード例
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="img/spicon.png">著者情報としてGoogle+アカウントを関連付ける
Google+のプロフィールページへのURLを使うことで、Googleの検索結果で表示される際にGoogle+に登録された著者情報を表示させることができます。
HTML コード例
<link rel="author" href="Google+アカウントのURL">検索エンジンに対し、正式なURLを指定する
WordPressなどのCMSを使用している場合などに、1つのページに対し複数のURLが存在することがあります。
しかし、検索エンジンはURLが異なると別ページとして扱ってしまいます。
そのようなことを防ぐために本来のURLを指定することで、「複数のURLからアクセスできるけど、本当はこのURLからアクセスされることを想定しています」と示すことができます。
HTML コード例
<link rel="canonical" href="https://gray-code.com">