linkタグ

linkタグはWebページに関連するページや参照する外部ファイルなどを設定するタグです。

属性

href

href属性はWebページの関連するページや参照するファイルのURLやパスを記述します。

rel

rel属性はWebページから見た関係を記述する属性です。
rel属性で指定可能な属性値として以下のようなものがあります。

icon

iconはファビコンを設定します。
ファビコンはタブやブックマークに表示されるアイコンです。

rel属性に「icon」と記述し、href属性にアイコン画像へのパスを記述します。
ルート相対パスで記述するのが一般的ですが、絶対パスでも問題ありません。
アイコン画像は32 x 32 ピクセル以上の正方形でPNG形式またはICO形式のファイルを設定します。またChrome・Edge・FirefoxではSVG形式も使用可能です。

sizes属性にはアイコン画像の解像度を記述します。解像度は横と縦のピクセルを「x」で区切って入力します。

<link rel="icon" href="/favicon.png" sizes="32x32" />

canonical

canonicalはWebページの正規化したURLを指定します。
例えば「https://example.com」と「https://example.com/」と「https://example.com/index.html」はURLは異なりますが、表示されるページは同じです。しかし検索エンジンは別々のページとして認識するため、例えばそれぞれのURLに対するリンクは別々の被リンクと解釈し、評価が分散します。
canonicalで正規化したURLを指定すると、検索エンジンに認識させるURLが統一されるので、このような評価の分散を防ぐ効果があります。

rel属性に「canonical」と記述し、href属性に正規化したURLを記述します。

<link rel="canonical" href="https://example.com" />

next prev

next prevは複数ページにまたがるコンテンツを集約します。
例えばブログの詳細ページを複数ページに分割した場合に、どのページが最初のページかや、何ページで構成されているかなどを検索エンジンに伝えることができます。検索エンジンはこれらの情報をもとに検索結果に最初のページを優先的に表示したり、分割したページそれぞれの被リンクを集約します。

rel属性に「next」または「prev」と記述します。
「next」のhref属性には次のページへのパスを記述し、「prev」のhref属性には前のページのパスを記述します。href属性には絶対パス（URL）または相対パスを記述します。

なお設置の仕方には注意が必要です。
分割したコンテンツの最初のページには「next」だけを設置し、間のページには「next」と「prev」の両方を設置、最後のページは「prev」だけ設置するというように、コンテンツの前後関係を正確に表す必要があります。

<link rel="next" href="https://example.com/page/1" />
<link rel="prev" href="https://example.com/page/2" />