linkタグはリンク、つまりHTML文書を他の外部リソースと関係づけるために使うものです。
リンクを貼るためのタグで、アンカータグともいわれているaタグと使える属性が似ているのですが、書き方や使用例など確認したいと思います。
関連記事
『リンクを貼るためのaタグ（アンカータグ）について【HTML】』
linkタグで使用できる属性
linkタグには終了タグは必要ありません。
また、linkタグでは以下のような属性を使用することができます。
- href
- rel
- sizes
- media
- hreflang
- type
href（ハイパーリファレンス）
aタグと同じく、href（ハイパーリファレンス）にはリンク先のURLを指定します。
rel（リレーション）
rel属性はリンク先リソースがどういうものか、位置づけを表すために指定し、半角スペースで区切ることで、以下のような値を複数設定することもできます。
| alternate | 別の言語や別フォーマット版などの代替文書 |
|---|---|
| author | 著作情報 |
| help | ヘルプへのリンク |
| icon | アイコンをインポート |
| licence | ライセンス文書 |
| next | 連続している文書の次の文書 |
| prev | 連続している文書の前の文書 |
| prefetch | リンク先リソースをあらかじめキャッシュするように指定 |
| search | 検索機能 |
| stylesheet | スタイルシート |
| canonical | URLの正規化 |
使用例
ここからは使用例をいくつか紹介したいと思います。
外部スタイルシートの読み込み
CSSを記述しているスタイルシートを読み込むために、このような記述をよくします。
ファビコンの設定
サイトにはファビコンといって、ブラウザウィンドウのタブやブックマークの一覧に表示されるアイコンがあります。
いわばサイトのシンボルマークみたいなもののこと。
ファビコンはrelに属性値iconを使って指定します。
type属性については後述しますが、ここでは画像ファイルの形式を示しています。
また、「rel=”apple-touch-icon”」というのは、スマーフォンのホーム画面などに表示するアイコンを指定するときに使います。
Webサイトで配信するフィードを指定
Webサイトで配信するRSSフィードなどの情報をHTML文書とひもづけるために、このように指定することができます。
著作情報としてGoogle+のアカウントを指定
Webサイトの著作情報としてGoogle+のプロフィールページを指定することができます。
Google+のプロフィールページのURLを記述すればOKです。
Webページの正規URLを指定する
ひとつのWebサイトやWebページのURLが複数あるとき、検索エンジンのクローラーはそれぞれを別のサイト、別のページの情報として取り扱ってしまう可能性があります。
そうなると検索結果の順位に影響がでてくるので、検索エンジン向けにURLの正規化をする必要があります。
その時に指定するのが「rel=”canonical”」。
href属性を使って本来のURLを指定することで、他URLと関連づけられ、クローラーも認識できるようになります。
sizes（サイズス）
この属性は「rel=”icon”」を指定するときに使う属性で、linkタグによって関連づけられた画像のサイズを表します。
属性の値は、「幅×高さ」を指定します。
media（メディア）
media属性は、外部リソースがどのメディアに適用するのかを指定するために使う属性。
メディア・クエリという、デバイス別にCSSファイルを分けたりするときに使う技術があるのですが、media属性の値はそのメディア・クエリである必要があります。
メディアクエリにあるのは以下の値。
| 属性値 | 意味 |
|---|---|
| all | すべてのデバイス |
| aural | 音声合成装置 |
| braille | 点字用ディスプレイ |
| embossed | 点字用プリンタ |
| プリンタ | |
| handheld | モバイルデバイス |
| projection | プロジェクター |
| screen | ディスプレイ |
| tty | 文字幅が固定のデバイス |
| tv | テレビ |
hreflang（ハイパーリファレンスランゲージ）
hreflang属性を使って、リンク先ページの記述言語を表します。
以下のような値で記述言語を指定します。
| 値 | 言語 |
|---|---|
| ja | 日本語 |
| en | 英語 |
| eu-au | オーストラリアにおける英語 |
| de | ドイツ語 |
type（タイプ）
最後にtype属性ですが、この属性はMIMEタイプというテキスト・画像・動画・音声などのデータファイル形式を示す識別子を指定するものです。
MIMEタイプには以下のようなものがあります。
| MIMEタイプ | ファイル形式 |
|---|---|
| text/plain | プレーンテキスト |
| text/html | HTMLファイル |
| text/css | CSSファイル |
| text/javascript | JavaScriptファイル |
| img/jpeg | Jpegファイル |
| img/png | PNGファイル |
| img/gif | GIFファイル |
| video/mp4 | MP4ファイル |
| video/ogg | Oggファイル |
| audio/mp3 | MP3ファイル |
| audio/mp4 | MP4ファイル |
| audio/wav | WAVEファイル |
| audio/aac | AACファイル |
| application/shockwave-flash | Flashファイル |
| application/pdf | PDFファイル |
linkタグまとめ
最初にもいいましたが、linkタグはaタグと属性が似ているため、aタグを理解していればrel属性やtype属性、media属性などのこともある程度わかるのではないかなと思います。
もちろん、iconなどaタグでは使わないものもあったりはしますが。
CSSやJavaScriptなどの外部ファイルを読み込むときなどもlinkタグを使うので、使い方は知っておきましょう。
[…] 関連記事 『linkタグの使い方！文書と外部リソースを関連づける【HTML】』 […]