linkタグのrel属性とは?rel属性の使い方を解説!

普段のコーディングやHTMLのソースコードで、これまであまり気にすることのなかったlinkタグで利用するrel属性について今回はご紹介します。どんなHTMLタグで利用するのか、そもそもrelとはどういう意味なのかここで改めて確認してみましょう!

コンテンツ [表示]

  1. 1linkタグのrel属性とは?
  2. 1.1rel属性の意味や必要な理由とは?
  3. 2linkタグのrel属性の使い方や読み方
  4. 2.1linkタグでスタイルシートを読み込む
  5. 2.2linkタグでiconを読み込む
  6. 2.3linkタグでcanonicalを読み込む
  7. 2.4まとめ

linkタグのrel属性とは?

普段のコーディングやHTMLのソースコードで、こんな1行を見たことないでしょうか?

HTML linkタグのrel属性とは?rel属性の使い方を解説!

<link rel="stylesheet" href="style.css">

おそらく、皆さん1度は見たことがあると思います。

これまであまり気にすることのなかったlinkタグで利用するrel属性について今回はご紹介します。
どんなHTMLタグで利用するのか、relとはどういう意味なのか、どんな意味があるのかをここで改めて確認してみましょう!

Photo byFree-Photos

rel属性の意味や必要な理由とは?

rel属性とは、リンク先オブジェクトとリンク元オブジェクトとの関係を指定するHTML属性値です。

rel属性のrelとは、英語の「relation(関係)」を意味します。

つまり、「利用するリンク先オブジェクト(HTML要素)との関係はこういうものですよ」と、GoogleやYahoo!などの検索エンジンやブラウザに説明するためにあるんですね。

linkタグのrel属性の使い方や読み方

主にheadタグ内で読み込むことが多いlinkタグですが、実際にrel属性の使い方をサンプルコードと一緒に見てみましょう!

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

HTML linkタグでスタイルシートを読み込む

<link href="cssファイルのURL" rel="stylesheet">

サンプルコードでは、linkタグを利用して、href属性(hypertext reference)という参照を意味する属性値を利用してstyle.cssというcssファイルを読み込んでいます。

この時、rel属性にはcssファイルという意味で、属性値の値をstylesheetと記述しています。

linkタグでiconを読み込む

HTML linkタグでiconを読み込む

<link rel="icon" href="画像のURL" sizes="32x32">
<link rel="icon" href="画像のURL" sizes="192x192">

サンプルコードでは、linkタグを利用して、href属性(hypertext reference)という参照を意味する属性値を利用して画像のURLを指定しています。

この時、rel属性にはiconと指定してブックマークされたとき等に表示されるアイコン画像(ファビコン)を指定しています。

ブックマーク(ファビコン)参考画像

linkタグでcanonicalを読み込む

HTML linkタグでcanonicalを読み込む

<link rel="canonical" href="正規ページのURL">

サンプルコードでは、linkタグを利用して、href属性(hypertext reference)という参照を意味する属性値を利用してWEBサイトのURLを指定しています。

この時、rel属性にはcanonicalと指定してサイト内で内容が重複するページが複数生まれてしまった場合にも指定したページが正規のURLだということを表しています。目的としては、GoogleやYahoo!等の検索エンジンへのSEO対策としておこなわれます。

まとめ

いかがでしたでしょうか?

今回は、おそらく、皆さん1度は見たことがあるlinkタグのrel属性についてのご紹介でした。

cssファイルの読み込みであれば、どのWEBサイトでも利用していると思いますが、ブックマークアイコン(ファビコン)の設定やSEO対策にも利用されておりその使い方は様々です。
ぜひ今回の内容を参考にlinkタグのrel属性について理解を深めましょう。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

Qumeru事務局
ライター

Qumeru事務局