link要素

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「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=”16×16 32×32″」と半角スペースで区切って指定してください。

使用例

スタイルシートを読み込む

こちらは最も一般的な読み込み方法となります。

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

優先スタイルシートを指定したい場合はtitle属性を指定します。下記の例では1行目のスタイルシートを読み込んでから、2・3行目のうち、先に記述されている2行目だけが読み込まれます。

<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行目のいずれかのスタイルシートを選択できるようになります。

<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行目は、その時に表示されるアイコン画像を指定する場合に記述します。

<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+に登録された著者情報を表示させることができます。

<link rel="author" href="Google+アカウントのURL">

検索エンジンに対し、正式なURLを指定する

WordPressなどのCMSを使用している場合などに、1つのページに対し複数のURLが存在することがあります。しかし、検索エンジンはURLが異なると別ページとして扱ってしまいます。そのようなことを防ぐために本来のURLを指定することで、「複数のURLからアクセスできるけど、本当はこのURLからアクセスされることを想定しています」と示すことができます。

<link rel="canonical" href="https://gray-code.com">

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。