LINEで現役エンジニアに直接質問してみよう!登録無料

HTML headのlinkタグとは?書き方とhref、rel、media、type属性の解説

この記事では、HTMLのheadで使う<link>タグについて解説します。

linkタグはheadの中で使われ、主にブラウザに関連するファイルのパスを伝えたり、検索エンジンに正規のパスやRSSリンクなどの場所を伝えたりする手段として使われます。その他にも、外国語ページの存在や、スマートフォン専用ページの存在などを伝えるのにも使われますし、ブラウザの高速化のために使われたりもします。

linkタグはHTMLのbodyタグの中に配置されており、検索エンジンやブラウザが使うタグの1つです。まずは、HTMLの構造とlinkタグについて順番に解説していきます。

基礎知識: HTMLのはheadとbodyに分けられる

HTMLは<head><body>で構成されています。

<link>タグはその<head>タグの中にあります。

HTMLのheadにはブラウザや検索エンジンが使う部分

<head>はブラウザや検索エンジンが主に使う部分で、私達が普段見ているページからheadの中身を直接確認することは出来ません(ただし、Webデベロッパーツールを使うと確認できます)。

<head>の中でつかわれている使われているタグの1つが<link>タグです。 <link>タグは、「表示するHTMLとそれに関連する外部ソースコードの関係を指定する」という役割を持っています。

HTMLのlinkタグはhref属性(必須)とrel属性(必須)で構成されています。href属性には、関連ファイルのパス(絶対パス、相対パス、URLどれでも可能)を指定し、ref属性にどういった内容かを指定します。

ref属性の種類をいくつか紹介します。

CSSファイルの読み込み方法: stylesheet

CSSをWebページで読み込むには、<link>タグが使われます。rel属性にstylesheet、src属性にCSSファイルまでのパスを書きます。

ファイルまでのパスには、外部のURLを指定することも出来ます。「google fonts」や「fontawesome」等も、URLを指定すると読み込むことが出来ます。

Webサイトのアイコンの伝える方法: icon,apple-touch-icon-precomposed

検索エンジンに正規のURLを伝える方法: canonical

このタグを付けないと、検索エンジンからURLが異なるごとにページの評価がされます。

「ECサイトなどで類似した商品のページが複数出来る場合」や「内容は同じだけれど、スマートフォン用に別のドメインがある場合」等にcanonicalを使うと、検索エンジンからページの評価をまとめて正しい評価をしてもらうことが出来ます。

詳しくは、下記を参考にしてください

参考 canonicalとは?URLの正規化でSEOのマイナス評価を避けようferret

RSSのフィードページURLを伝える方法: alternate application/rss+xml

alternateをつけると、RSSリーダーがRSSフィードを見つけることが出来るようになります。

wordpressの場合RSSフィードは自動生成されて出力されます。

https://example.com/feedのように、「wordpressのドメイン名 + /feed」でアクセスすると、RSSフィードを確認出来ます。後はこのパスを使ってalternateを設定しましょう。

別URLのモバイルサイトの存在を伝える方法: alternate

別URLでモバイルページを作っている場合、このタグを使うと「スマホ版のページはこのURLです」と検索エンジンに伝えることができます。

また、このタグを使う時、canonicalを使って検索エンジンに正規のURLを伝えるのを忘れないようにしましょう。

別URLの外国語ページの存在を伝える方法: alternate

外国語で作られたページがある場合、このタグを使用します。多言語対応する時以外は、使う必要はありません。

複数のページに分割した時、前後のページURLを伝える方法: prev,next

1つの記事を数ページに渡って分割するときに使います。このlinkを付けなかった場合、検索エンジンからそれぞれのページが個別記事として評価されます。

DNSの読み込みを高速化(最適化)する方法: dns-prefetch

ドメインの名前解決を事前に行うことで、サイト表示までの高速化が出来ます。しかし、ドメインの数が少ない場合、効果はあまりありません。 このタグは無くても、Webページは正常に表示されますし、効果もごくごく微量なので、無理に付ける必要はありません。

著作者情報を伝える方法: author,publisher

著作者情報を検索エンジンに伝えることが出来ます。しかし、この情報は偽造が簡単なため、検索エンジンで使用されることはありません。また、ブラウザでも使用されていません。

なので、このタグを無理に付ける必要はありません。

aタグとの違い

linkタグと聞くと、他のWebページとのリンクを想像し、「クリックして他のページに飛ぶことのできるリンク」のことをイメージするかもしれませんが、そのリンクは<a>という別のタグを使います。

詳しくは、下記ページでまとめているので、参考にしてください。

HTML aタグとは?hrefを使ったリンクの作成する方法

CSSは<link>で読み込みますが、javascriptは<script>タグで読み込むので注意しましょう。 <script>タグは、その内部にjavascriptを入れ込んだり、src属性を使って外部から読み込んだりできます。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。