linkタグとは?|linkタグの必要性と様々な書き方まとめ

linkタグとは?|HTML文書同士の関係性を表そう
博士
リンゴくん、<link>タグを使ってHTML文書を別のファイルと関連付ける方法は知っておるかの?
リンゴ
一応知ってはいるんですが、記述してもページに表示されるわけじゃないし、イマイチ必要性がわからないです。
博士
確かにそうじゃな。
<link>タグは、設定してもユーザーの見える部分には一切表示されないが、クローラーにWebページを正確に認識してもらうためにも重要なタグなんじゃ。
リンゴ
なるほど!
SEOに関わってくるんですね!
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<link>タグとは

 

<link>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類メタデータ・コンテンツ
利用場所メタデータ・コンテンツが期待される場所 / head要素の子要素であるnoscript要素
内容


 
 
<link>タグは、HTML文書を別のファイルと関連付け、それがどのような関係なのかを表す際に使用するタグです。

博士
「そのページ」と「別のファイルやページ」を関連付けるためのタグじゃ。
 
 
例えば、現在のページに関連する「前のページ・次のページ」や「目次ページ」、「ヘルプページ」や「翻訳版ページ」を示したり、外部スタイルシートを読み込むことができるようになります。

リンクと言えば<a>タグですが、ページ内にリンクを挿入する<a>タグと<link>タグは全くの別物です。
 
 

<link>タグはhead要素内に記述する

<link>タグは基本的にhead要素内に記述します。
つまり、訪問してくれたユーザーの見える部分には表示されず、検索エンジンやブラウザに向けた情報や指示を書くためのタグです。

リンゴ
検索エンジンやブラウザに「このページは、別のこのページやファイルとこんな関係があるよ」と伝えるためのタグなんですね。
 
 

<link>タグを記述する理由

<link>タグの内容はソースコードを見ないと確認できないため、正直言ってユーザーには全く関係ありません。

では、なぜ<link>タグの記述が必要なのか?
それには、「クローラー」の存在が大きく関係しています。

Googleはクローラーという検索エンジンロボットを使って、世界中にあるWebサイトの情報を休みなく集めています。

検索エンジンの仕組み | 作成したサイトが検索結果に表示されるまでを分かりやすく解説

2017.04.15
 
 
このクローラーですが、Webページを認識するのに<link>タグの内容も参考にしています。

例えば、前後のページを指定する

という記述があれば、クローラーは「このページの前のページはprev.htmlで、次のページはnext.htmlだな」と認識します。

このように、検索エンジンにWebページを正確に認識してもらうことが、<link>タグを記述する理由です。
 
 
また、「prev」「next」の記述は、SEO対策としても効果があります。
例えば、以下のように一連のコンテンツでページが分割されている場合、

 
 
「prev」「next」を各ページに(最初のページには「next」、最後のページには「prev」のみ)記述することによって、「被リンク」のような検索エンジンからの評価に関連する要素が、全体で1つのものとして扱われるようになります。

例えば、「page=1」に集まっている被リンクと「page=2」に集まっている被リンクは、通常「それぞれのページのもの」として扱われますが、「prev」「next」を記述することで、全ページに集まっている被リンクを総合し、1つに集中させることができます。

博士
「同じコンテンツなのに検索エンジンからの評価がバラバラ」ということを避けることができるぞ。
 
 

href属性とrel属性の意味

<link>タグを指定する場合には、href属性とrel属性が必須です。
リンクする外部ファイルのURLをhref属性で指定し、その関係性を表すキーワードをrel属性で指定します。

href属性でリンクする外部ファイルのURLを指定し、その関係性を表すキーワードをrel属性で指定する

href属性でリンクする外部ファイルのURLを指定し、その関係性を表すキーワードをrel属性で指定する

 
 
href属性とrel属性が指定されていない場合は、<link>タグの指定は無効となります。
 
 

rel属性

関連付けるファイルが、現在のページから見てどのような関係であるのかを、既定のキーワード「リンクタイプ」で指定します。

博士
relは「relation(関係)」の略じゃ。
 
 
rel属性は、link要素、a要素area要素に指定できますが、要素によっては指定できるリンクタイプが異なります。

また、リンクタイプごとに、href属性で参照できるファイルの性質が決められています。

キーワードは以下の表を参考にしてみてください。

リンクタイプlinka / area説明
alternate現在の文書の代替文書
author著者
bookmark×パーマリンク
helpヘルプ
icon×文書のアイコン
license現在の文書の著作権を示した文書
next一連の文書中の次の文書
nofollow×リンク先を保証しない
noreferrer×リファラー禁止
prefetchプリ・フェッチ
prev一連の文書中の前の文書
search現在の文書やそれに関連する文書を検索するためのページ
stylesheet×スタイルシートの読み込み
tag現在の文書に適用されるタグ

○…ハイパーリンク(移動して閲覧するような別の文書へのリンク)
☆…外部リソース(現在の文書を補強するような文書へのリンク)
×…利用不可
 
 
また、<link>タグは一つの文書内に複数記述することができます。
例えば、rel=”stylesheet”を指定した複数の<link>タグで、複数の外部CSSファイルを指定することもできます。
この場合、リンクしている複数の外部CSSファイル全てのスタイル指定が有効となります。

博士
スタイル指定が競合した場合は、より後から読み込まれたCSSファイルのスタイル指定が優先されるぞ。
 
 

スポンサーリンク

type属性

type属性は、関連付けるファイルのMIMEタイプを指定します。

 
 
HTML文書以外の外部ファイルを指定する場合、 適切なMIMEタイプを指定しておくことで、外部ファイルの種類が正しく認識され、誤作動が起きにくくなります。
 
 

sizes属性

<link>タグによって関連付けられた画像ファイルなどのサイズを指定します。
「rel=”icon”」が指定された場合にのみ使用でき、値は「幅x高さ」の形式で指定します。

 
 

スポンサーリンク

title属性

リンク先のタイトルを指定することができます。

 
 

media属性

href属性で指定されたファイルを、どのメディアに適用するのかを指定します。

 
 

スポンサーリンク

<link>タグの書き方

ここからは、よく使われる<link>タグの書き方を紹介します。
 
 

CSSファイルを読み込む

 
 
外部のCSSファイルを読み込むためのものです。

Google FontsやFont AwesomeなどのWebフォントもこの<link>タグで読み込みます。

 
 

正規URLを指定する

 
 
検索エンジンに対して、Webページの正規URLを伝える際に使用します。
Webサイトを運営していると、いつの間にか「内容は同じなのにURLが違うページ」が生まれてしまうことがあります。
例えば、「http://example.com」と「http://www.example.com」のような、wwwの有無の違いなどですね。

wwwが付くか付かないかだけの違いなんですが、これらを検索エンジンに別のページとみなされると、ページの評価が分散されてしまいます。

博士
ひどい場合、重複コンテンツとしてみなされてしまうぞ。
リンゴ
ペナルティを受ける可能性もあるんですね…。
 
 
そこで、この「canonical(カノニカル)」の<link>タグを使います。
このタグを指定することで、検索エンジンに対して「このページの正規URLはこれだよ」と伝えることができ、ページの評価を1つに集中させることができます。
SEO的にも非常に重要なタグです。

博士
canonicalは「正規の」という意味なんじゃ。
 
 

Webサイトのアイコン(favicon)を指定する

 
 
ブラウザのウィンドウやタブ、ブックマークの一覧などに表示されるWebサイトのアイコン(favicon)を指定することができます。

上2つはブックマークされたときなどに表示されるアイコンです。
「sizes=”32×32″」と「sizes=”192×192″」のそれぞれを指定したタグをhead要素内に記述しましょう。

「apple-touch-icon-precomposed」で指定した画像は、スマホやタブレットでホーム画面にページを追加したときに表示されます。
こちらは、150×150くらいのPNG画像を指定しましょう。
 
 

フィードページのURLを指定する

 
 
このタグを書いておくことで、 RSSリーダーがそのサイトのRSSフィードを見つけることができるようになります。
 
 

別URLのモバイルサイトの存在を知らせる

 
 
スマホやタブレットで見たときのページのURLが、PCページのURLと異なる場合に指定します。

このタグを使うときは、「rel=”canonical”」も合わせて指定しましょう。

博士
現在ほとんどのサイトは、PC・モバイルでURLが変わらないレスポンシブデザインであるため、使う頻度は少ないタグじゃ。
 
 

前後のページを指定する

 
 
主に「1つの記事を複数ページに分割するとき」に使います。
最初のページには「next」の<link>タグだけを、最後のページには「prev」の<link>タグだけを記述します。
それ以外のページでは、「prev」「next」両方の<link>タグを書きます。
 
 

スタートページを指定する

 
 
一連のコンテンツでページが分割されている場合、最初のページを指定するときに使用します。
 
 

トップページを指定する

 
 
サイトのトップページを指定するときに使用します。
 
 

目次ページを指定する

 
 
一連のコンテンツでページが複数に分割されている場合、それらのページの「目次ページ」を指定するときに使用します。
 
 

検索ページを指定する

 
 
文書を検索するための「検索ページ」を指定するときに使用します。
 
 

ヘルプページを指定する

 
 
現在の文書に関連する「ヘルプページ」を指定するときに使用します。
 
 

別URLの外国語ページの存在を知らせる

 
 
日本語ページに対して、外国語版のページがあるときに指定します。
 
 

著者情報にGoogleアカウントを指定する

 
 
上記のように記述することで、著者情報とGoogle+のアカウントを関連付けることができます。
こうすることで、Googleの検索結果に著者の名前と画像が出ることがありましたが、最近は全く見かけなくなったので、廃止されたのかもしれません。
SEO効果もあまり無いようです。
 
 

著作権情報を指定する

 
 
現在のページに関連する「著作権情報ページ」を指定するときに使用します。
 
 

DNSプリフェッチ

 
 
外部ドメインへの参照リンクが多い場合、このDNSプリフェッチを利用することで表示の高速化が期待できます。
 
 

使用例

 
 

noscript要素内で使用した例

noscript要素内で使用すると、スクリプトを利用できないブラウザにのみ、そのスタイルを適用させることができます。

 
 

スポンサーリンク

まとめ

HTML文書を別のファイルと関連付け、それがどのような関係なのかを表す際には、<link>タグを使用します。

博士
<link>タグを指定する場合は、href属性とrel属性が必須じゃ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








linkタグとは?|HTML文書同士の関係性を表そう