備忘録的プログラミングリファレンス

link タグエレメント

　link タグエレメントは、サイト内を適切に検索、閲覧できるように誘導する機能や外部ファイルを取り込むための設定をする HTML タグエレメントです。
　スタイルシート（ CSS ）ファイルを読み込むにはこの <link> エレメントを使います。

link タグエレメント（ CSS の読み込み ）
<link rel="stylesheet" href="css/example.css" />
詳しくは 動作の確認 を参照してください

　<link> は <head> エレメントに包括されるエレメントです。 <head> エレメントについてはhead タグエレメントを参照してください。

　<link> エレメントには主に以下の rel 属性値があります

alternate
代替ドキュメントへのリンク。多言語対応サイトの構築、RSSに利用
canonical
正規の URL を示す。重複リンクの解消
icon
アイコン
prev、 next
前後関係になるページ
stylesheet
スタイルシートのインポート

　その他の rel 属性値は以下のその他の rel 属性値を参照してください。

- ad -

属性

　link タグエレメントには以下の属性があります。用途によって属性の組み合わせが変わります。

　ここでは属性の一覧のみを示します。使用例は以下のExampleを参照してください。

プロパティ概要
as <link> エレメントがリンクしているコンテンツの種類。DOMString 型
cross-origin外部リソースを呼び出す方法で主にセキュリティーに関する CORS の設定。DOMString 型
disabledリンクが有効であるか否かの取得と設定。Boolean 型
fetch-priorityリソースの読み込みの優先度の設定と取得。 DOMString 型
hrefリソースのURLの取得と設定。USVString 型
hreflangリソースの言語コードの取得と設定。DOMString 型
media主にメディアクエリと呼ばれる、 I/O デバイスの指定。メディアタイプとメディア特性で指定。DOMString 型。
referrer-policyリクエストのヘッダー情報に含むリファラー情報の範囲を指定。 <link> エレメントの referrerpolicy 属性が該当。DOMString 型。
rel 読み込むリソースの種類。 <link> エレメントの rel 属性が該当。DOMString 型
relListrel 属性の値をトークンリストで返す。DOMTokenList オブジェクト
sizesリソースのサイズ情報を DOMTokenList オブジェクトで返す
sheet <link> エレメントに関連する StyleSheet オブジェクトを返す
type読み込むリソースの MIME タイプ。DOMString 型。

- ad -

Example

　link タグエレメントは、用途によって属性の組み合わせが変わります。以下に用途による使用例を紹介します。

スタイルシートファイル（ CSS ）の読み込み

　スタイルシートファイル（ CSS ）の読み込みには以下の属性を指定します。
　スタイルシートを使う場合には事前に <meta> で以下の宣言が必要になります。

<meta http-equiv="Content-Style-Type" content="text/css" />

　この宣言がないと CSS が機能しないかもしれません。

AttributeValueExtra information
relCSS の読み込みには stylesheet とする
hrefCSS ファイルのある場所

サイトアイコン

　サイトアイコンと呼ばれるファビコン（Favicon）の自サイトのオリジナルアイコンの読み込みです。上部のウィンドウタブに表示されます。
　ロゴがある場合は特に使用したほうがよいでしょう。

AttributeValueExtra information
rel CSS の読み込みには stylesheet とする
hrefアイコンファイルのある場所
typeアイコンのイメージ形式
sizesアイコンのサイズ

　アイコンにおける rel 属性の値は以下のようになります。

  • icon... アイコン
  • apple-touch-icon... 主に iphone用 のアイコン
  • manifest... 主に Android用 のアイコン

　type は使用するイメージ形式を指定します。古いブラウザ向けの属性で、多くの場合は無くても自動で認識されます。

　使用できるイメージ形式に、.ico、.png、.svgがあります。

正規ページの指定

　ここでいう正規ページの指定は、検索ロボットが重複リンクというエラーを出す場合に使用します。

　重複リンクエラーはユーザーが混乱するかもしれないというエラーですが、/の有るか無いかで起きることがあります。
　例えば、https://example.com/CSS、https://example.com/CSS/index.htmlとhttps://example.com/CSS/は別の URL と認識され、同じページに違うリンクが用意してあると検索ロボットは解釈します。

　このような場合は、canonical 値によって正規のURLを指定しておきます。

AttributeValueExtra information
rel正規ページを意味する
href正規のURL

ページの前後移動

　サイトのページに前後関係を持たせるために <link> エレメントを使用する例です。

AttributeValueExtra information
rel 前後関係になるページを指す
href前後関係になるページのURL

多言語対応のサイト

　多言語用のサイトを構築する場合に必要になる設定です。検索ロボットを hreflang 属性の言語指定によって最適なサイトへ誘います。以下のような属性を使用します。

AttributeValueExtra information
rel代替えページを意味する
href他の言語用のサイト
hreflang言語

RSS フィードページ

　RSS はWebサイトのニュースやブログなどの、更新情報の日付やタイトル、その内容の要約などを配信するためのものです。 SNSやスマートフォンの普及、検索ロボットの高度化によってあまり使用されなくなりましたが、今も利用はされています。

AttributeValueExtra information
rel代替えページを意味する
hrefRSS ファイルのある場所
typeRSS の形式
titleRSS のタイトル

- ad -

その他の rel 属性値

　以下のものもありますが、あまり利用されていないようです。

author
作者へのリンク
help
ヘルプのリンク
license
著作権、ライセンスに関する外部ドキュメントへのリンク
pingback
pingbackサーバのアドレス
prefetch
先に参照するべきファイルへのリンク
search
ドキュメントの関連ページへのリンク
sidebar
ブラウザのサイドバーに表示する外部リソース
tag
ドキュメントのタグ

JavaScript

　<link> のインターフェイスを定義しているのは HTMLLinkElement です。プロパティ、メソッド、イベントについては HTMLLinkElement を参照してください。

関連（Related）