HTMLのlinkタグとは？基本的な書き方とrel属性まとめ

今回は、HTMLのlinkタグについて解説します。意味と書き方、知っておきたいlinkタグの属性をまとめて紹介します。
ちなみにページ内にリンクを挿入する「aタグ」とは別のものです。aタグについて知りたい方はこちらの記事をどうぞ。

1. linkタグとは？

linkタグとは「そのページ」と「別のファイルやページ」を関連づけるためのタグです。

HTMLはhead部分とbody部分に大きく分けられる

訪問者に見える文章や画像、ページ内の見出しなどはbody部分（<body>〜</body>）に書かれます。一方で、head部分（<head>〜</head>）には本文面へ直接描画されない設定や情報を書きます。head内のtitleは、ブラウザのタブなどに使われるページのタイトルです。

headタグには検索エンジンやブラウザのための情報を書く

headタグには、Googleなどの検索エンジンやブラウザのための情報を書きます。「この文字コードで表示して！」「このタイトルをページの情報として使って！」「このCSSファイルを読み込んで！」という具合です。検索結果のタイトルはGoogleが複数の情報から決めるため、指定したtitleがそのまま使われるとは限りません。

linkタグは基本的にhead内に書く

linkタグは基本的にhead内に書きます。訪問者の目には通常は触れず、ブラウザや検索エンジンに向けた情報や指示を書くためのタグです。rel="stylesheet"など、種類によってはbody内でも使えます。

aタグとの違い

「リンク」と言えば、aタグ（<a href="/about/">）ですね。aタグは訪問者が操作するリンクを貼り、linkタグはページ全体と他のリソースの関係を示します。

aタグ

aタグは主に訪問者に「ここをクリックすると別のページに飛ぶよ」というリンクを貼るもの。bodyタグ内に書かれます。

linkタグ

linkタグは、検索エンジンやブラウザに「このページは、別のこのページやファイルとこんな関係があるよ」と伝えるものです。基本的にはheadタグ内に書きます。
一旦ここまでの内容をまとめますね。

2. linkタグの書き方：relとhrefの意味は？

実際にどんなものなのか見てみるのが分かりやすいですね。

例1：CSSファイルを読み込む

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

例えば、上のlinkタグは「スタイルシート（外部CSSファイル）を読み込む」ためのものです。style.cssをこのHTMLファイルと同じ場所に置く例です。

このタグを解読すると、以下のような意味になります。relでファイルとの関係性を、hrefで そのファイルがある場所（URL）を指定します。

↑ relは「relation（関係）」の略です。つまり「linkタグが書かれているページとhrefで指定しているページとの間で、どのような関係があるのか」をここで示すわけですね。
すると、ブラウザが読みとって「ふむ、これはCSSファイルなんだな。見せてもらおうではないか」と指定された場所にあるCSSファイルを読み込んでくれます。

例2：検索エンジンにページの関係性を伝える

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

こちらはSEOにも関わるlinkタグです。「canonical（カノニカル）」には、英語で「正規の」という意味があります。このタグは、重複またはよく似たページがあるときに、検索エンジンへ優先して扱ってほしい正規URLを伝えるものです。採用されるかは検索エンジンが判断します。

ちょっと話が脱線してしまいましたね…。canonicalタグについては、この記事の後半でも取り上げます。

relとhref以外の属性が書かれることも

この記事の基本例ではrelで関係を、hrefで参照先を指定します。ただし種類によって属性の要件が異なり、ほかの属性を指定することもあります。linkは終了タグのいらない要素です。種類が多いので丸暗記せず、使うときに必要な書き方を調べましょう。

あなたのサイトにはどんなlinkタグが書かれている？

実際に現在みなさんが運営しているブログやWebサイトには、どのようなlinkタグが書かれているのかチェックしてみましょう。

ページ内を右クリックし、表示されるメニューの「ページのソースを表示」を選びます。メニュー名や操作はブラウザによって異なります。

受信したHTMLのソースが表示されます。基本例では、この中の<head>タグ内にlinkタグを探します。JavaScriptが実行後に追加した内容などは、このソースに含まれない場合があります。

ショートカットで検索

ここでショートカットを使うのがおすすめです。
Ctrl + F（Macの場合には⌘+F）のショートカットを使えば、好きな文字列をサクッと検索できます。「 link」と検索すれば、linkタグがたくさんヒットするはずです。

3. 知っておきたいlinkタグ一覧

ここからはよく使われるlinkタグの一覧と書き方を紹介していきます。

スタイルシートの読み込み 重要

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

さきほども紹介した「外部のCSSファイル」を読み込むためのものです。Google FontsやFont Awesomeでは、linkで読み込んだCSSがWebフォントを参照します。下のFont Awesomeの例は、無料版7.3.1のcssとwebfontsを相対配置のまま/fontawesome/へ置き、solidアイコン用のCSSを使う場合です。Google FontsはCSS2 APIの例です。配置後はCSSのfont-familyや対応するアイコンclassも指定します。パスは実際のファイルへ合わせてください。

<!-- Font Awesome 7.3.1を /fontawesome/ に配置した例 -->
<link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="/fontawesome/css/solid.min.css">

<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap">

CSSを書く場所については、外部ファイル以外にも2パターンあります。詳しくは下の記事をどうぞ。

Webサイトのアイコンを指定 重要

<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

上２つはブックマークされたとき等に表示されるアイコン画像のことですね。

上の例では32×32と192×192のPNG画像を指定しています。sizesには画像の実際の寸法を書き、hrefには用意したファイルのURLを指定します。必要なサイズは利用先に合わせて選びましょう。

apple-touch-iconで指定したPNG画像は、iPhoneやiPadでホーム画面にページを追加したときに使われます。上のコードは180×180pxの画像を指定する例です。旧apple-touch-icon-precomposedの効果加工を前提とせず、実際の画像サイズをsizesに指定します。

WordPress 6.5以降では「管理画面 設定 一般 サイトアイコン」で、512×512px以上の正方形画像を登録できます。以前のバージョンでは「外観 カスタマイズ サイト基本情報」から設定します。

フィードページのURLを示す

<link rel="alternate" type="application/rss+xml" title="サイトのフィード" href="/feed.xml">

このタグを書いておくと、 RSSリーダーがそのサイトのRSSフィードを見つけることができます。rel="alternate"は「そのページの代替版」を示し、type="application/rss+xml"によりRSSフィードであることを伝えます。
WordPressではテーマや設定により出力が変わるため、実際のソースで確認しましょう。

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

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/articles/example/">

モバイル版とPC版で別々のURLを使う場合の指定です。PC版のheadにはrel="alternate"でモバイル版のURLを、モバイル版のheadには後述のrel="canonical"で対応するPC版のURLを指定します。上のコードはPC版へ書く例です。

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

<link rel="alternate" hreflang="ja" href="https://example.com/ja/articles/example/">
<link rel="alternate" hreflang="en" href="https://example.com/en/articles/example/">

多言語サイトで使うものです。hreflangにはjaやenなどの言語コードを、hrefにはその言語版ページのURLを指定します。対応する各ページのheadに、自分自身を含む同じ一式を書き、言語版どうしが相互に参照できるようにします。

著者情報のページを指定する

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

rel="author"は、そのページの著者について紹介するページを示す標準の指定です。公開当時はGoogle+のアカウントをauthorやpublisherで指定する方法がありましたが、一般向けGoogle+は2019年に終了しました。このタグだけで検索結果に著者の名前や画像が出ることや、SEO効果が得られることを保証するものではありません。

前後のページのURL

<link rel="prev" href="/articles/example/?page=1">
<link rel="next" href="/articles/example/?page=3">

主に「1つの記事を複数ページに分割するとき」など、順序のある前後のページを示す指定です。上のコードは2ページ目のheadへ書く例で、1ページ目にはnextだけ、最後にはprevだけ、それ以外では両方を書きます。HTMLの関係性としては有効ですが、Googleは現在これらをページ分割のインデックス処理に利用していません。訪問者や検索エンジンがたどれる通常のaタグのリンクも用意します。

DNSプリフェッチ

<link rel="dns-prefetch" href="https://static.example.com">

こちらは上級者向けのタグです。このページからCSSや画像などを取得する外部オリジンについて、DNS名前解決を先に行うためのヒントです。ブラウザが実行するかや速度への効果は、利用するリソースと通信環境によって変わります。単に外部ページへのリンクが多いというだけで、一律に速くなるものではありません。

正規URL（rel="canonical"） 重要

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

さきほども触れたlinkタグですね。内容が重複する、またはよく似たページが複数ある場合に「これを正規のURLとして扱ってほしい」と検索エンジンへ伝えます。正規URLが採用されれば、リンクなどの評価をまとめる手がかりになりますが、指定が必ず採用されるわけではありません。

canonicalタグは正規ページ自身にも書いておくと管理しやすくなります。WordPressには投稿や固定ページなどの個別ページへ出力する標準機能がありますが、テーマやプラグインで変わるため、最終的なソースを確認しましょう。

必要なlinkタグが自動出力されるかは、ブログサービスや設定によって異なります。本格的にブログやWebサイトを制作・運営していくのであれば、このページで紹介した知識を使い、実際のソースを確認してみてください。