htmlをかいていて
linkタグってスタイルシートだけなの？
と思ったことは無いでしょうか。
今回はlinkタグに関して
・基本的な使い方
・linkタグの種類
についてサンプルを含め解説していきます。
是非参考にしてみてください。
目次
linkタグとは
linkタグの読み方
linkタグは「リンク」と読みます。何か複数のものを関連したものとして紐づける意味でのリンクから来ています。
linkタグはWebページと別のファイルやページなどを関連付けるタグ
linkタグはhtmlファイルとcssファイルを関連付ける為に使われるように、Webページと別のファイルやWebページを関連付ける為のタグです。
cssファイルだけでなく、アイコンの画像や複数のURLを一つのWebページに関連付けるなど、意外に多くの種類があります。
linkタグで利用できる属性
linkでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| href | 関連付ける外部リソースのURL（必須） |
| rel | hrefで示したファイルとの関連性を示すキーワード（必須） |
| rev | 関連付けられる外部リソース側から見たこのファイルとの関連性を示すキーワードを指定する html5では一旦廃止されたがhtml5.1で復活した属性です |
| media | 関連付ける外部リソースの対象メディアを記述 screen:画面に出力する print:印刷プレビュー、印刷物に出力する all:すべての出力先に出力する |
| hrefflag | 関連付ける外部リソースの言語 |
| type | 関連付ける外部リソースのMIME |
| sizes | rel=”icon”を指定した際の、アイコンのサイズを指定 |
| as | rel=”preload”を指定した際の、コンテンツタイプを指定 |
| color | rel=”mask-icon”を指定した際の、アイコン色を指定 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
linkタグによる様々なパターンのリンク
CSSファイルとのリンク
linkタグにより外部に記述したCSSと関連付けることで、CSSを外部ファイルに書くことが出来ます。
これにより、複数のWebページに同じCSSを適用させることが出来たり、インターネット上に公開されているCSSファイルをこのタグだけで適用させることが出来ます。
下記のように、relとhref属性が必要です。
|
1 |
<link rel="stylesheet" href="style.css> |
このように書くことで、このWebページにstyle.cssというスタイルシートを関連付けることができます。
印刷用CSSとのリンク
linkタグでは、印刷時だけ適用されるCSSを外部ファイルに指定することができます。
rel=”stylesheet”の場合には下記のようにmediaという属性で、CSSの出力先を指定することができます。
|
1 2 3 4 5 6 7 8 |
<!-- mediaを指定しない場合下記のようにmedia="all"と同じ動作をします--> <link rel="stylesheet" media="all" href="style.css"> <!-- 下記のprint.cssに書かれているCSSは印刷時のみ適用されます --> <link rel="stylesheet" media="print" href="print.css"> <!-- 下記のscreen.cssの内容は標準出力時にのみ適用されます --> <link rel="stylesheet" media="screen" href="screen.css"> |
このように、media属性を設定すると出力するデバイスによりCSSファイルとの関連付けを切り分けることが出来ます。
重複するページや類似するページのURLを正規化する
linkタグによって、URLが異なる同一のWebページや類似するページに正式な一つのURLを指定することができます。
これはSEOに関連するのですが、重複するページや類似するページは一つの正規URLを指定することが望ましいとしています。
お持ちのサイトにおいて、複数の URL で同じページにアクセスできる場合や、別個のページのコンテンツが類似している場合（たとえば、ページにモバイル版と PC 版の両方がある場合）、こうしたページは Google で同じページの重複と見なされます。これらの URL の 1 つが「正規」版として選択されてクロールされ、その他の URL はすべて「重複」URL と見なされてクロールの頻度が減ります。
参考文献：Google、ヘルプセンター
下記のように記述すると、同じ記述があるWebページは、すべて同じページとして判断されます。
|
1 |
<link rel="canonical" href="正規としたいURL"> |
例えば、色と型番だけが異なり、ほとんどの内容が同じページが5つあるとした場合、正規化して一つのページとしない場合、あまり品質の良くないページがあると判断されてしまいます。
上記のタグを、その5つのページ全てに設定することで、Googleのクローラーは同一ページであるとみなします。
前後のページを指定
一つのコンテンツを複数のページで書かれている場合には、今のWebページの前のページと後のページを指定することが出来ます。
記述方法は下記のように書きます。
|
1 2 3 |
<link rel="prev" href="前のページを示すURL"> <link rel="next href="次のページを示すURL"> |
このタグを設定したことで、表示上などの違いはありません。しかし、検索エンジンはこの一連のページを一つのコンテンツとみなします。SEO的にはこのタグがないと、検索順位に影響があるかもしれません。
もし、このページが関連付けられていないと、検索エンジンはそれぞれのページを、個々の別のページとして認識します。その場合、ページによっては品質が低いページとみなされてしまう場合があります。
アイコンの指定
linkタグはサイトのアイコンを指定することもできます。
通常のタグでは下記のように記述します。
|
1 |
<link rel="icon" href="アイコンのURL"> |
pngファイルの場合には、一つのファイルで複数のサイズを指定できます。その場合にはそれぞれのサイズを関連付けておくと、適切なサイズのアイコンが使用されます。
|
1 2 3 |
<link rel="icon" href="アイコンのURL" sizes="16x16"> <link rel="icon" href="アイコンのURL" sizes="32x32"> |
また、スマートフォンでWebページのリンクをホーム画面へ設定する場合に表示されるアイコンも下記のようにすることで設定できます。
|
1 |
<link rel="apple-touch-icon-precomposed" href="アイコンのURL"> |
RSSフィードの場合のURLを示す
WebページにRSSフィードページが存在する場合に、タグで指定することでRSSリーダーがWebページを見つけられるようにします。
|
1 |
<link rel="alternate" type="application/rss+xml" title="RSSのタイトル" href="RSSへのURL"> |
スマホの場合に別のURLのページを表示
rel=”alternate”には、代替のページがあることを示すことが出来ます。
そして、下記のように記述すると、画面が640px以下の場合には、代替であるページを表示させることが出来ます。
|
1 |
<link rel="alternate" media="only screen and (max-width: 640px)" href="スマホ用のページのURL"> |
複数言語でのWebページが用意されている場合に指定
linkタグで、複数の言語で書かれたページをそれぞれ指定することができます。
検索エンジンは、このタグがあることで複数の言語でのWebページがあることを認識し、検索したブラウザの言語に合わせて検索結果を振り分けることが出来ます。
|
1 2 3 |
<link rel="alternate" hreflang="ja" href="https://hoge.com/ja/sample.html"> <link rel="alternate" hreflang="en" href="https://hoge.com/en/sample.html"> |
上記のように記述することで、日本語版「ja」と英語版「en」が存在することを示すことが出来ます。
linkタグとアンカータグはよく混同される
linkタグは、アンカータグ（aタグ）と良く混同されてしまいます。linkタグとアンカータグの違いは下記のような違いがあります。
- linkタグはhead内に記述、aタグはbodyに記述
- linkタグはブラウザや検索エンジンに向けた情報、aタグは訪問者に向けた情報
アンカータグを記述すると、いわゆるリンクとしてブラウザで表示されます。そのため、linkタグと同じようなものと混同されてしまいます。
アンカータグは出発点という意味があるように、リンクの出発点を意味します。このリンクを選択すると到達点であるWebページや画像などにジャンプします。
まとめ
いかがでしたでしょうか、スタイルシート以外の外部ファイルとの関連付け方法をみてきました。
SEO的にも重要なlinkタグも記載してありますので、参考になれば幸いです。
参考文献：Google、ヘルプセンター
