記事内に商品プロモーションが含まれる場合があります
今回は、HTMLのlinkタグについて解説します。意味と書き方、知っておきたいlinkタグの属性をまとめて紹介します。
ちなみにページ内にリンクを挿入する「aタグ」とは別のものです。aタグについて知りたい方はこちらの記事をどうぞ。
1. linkタグとは？
linkタグとは「そのページ」と「別のファイルやページ」を関連づけるためのタグです。
少しだけ前提の話を。みなさんが普段見ているウェブページはHTMLにより書かれています。今まさに見ているこのページもそうですね。
HTMLはhead部分とbody部分に大きく分けられる
訪問者に見える文章や画像、タイトルなどなどはbody部分（<body>〜</body>）に書かれます。一方で、head部分（<head>〜</head>）には、訪問者の目に触れない設定や情報を書きます。
headタグには検索エンジンやブラウザのための情報を書く
じゃあheadタグには何を書くかというと、Googleなどの検索エンジンや、ブラウザのための情報を書きます。「この文字コードで表示して！」「検索結果にはこのタイトルを表示して欲しい！」「このCSSファイルを読み込んで！」という具合ですね。
linkタグはhead内に書く
linkタグは基本的にhead内に書きます。つまり、訪問してくれた人の目には通常は触れず、ブラウザや検索エンジンに向けた情報や指示を書くためのタグなのです。
aタグとの違い
「リンク」と言えば、aタグ（<a href="~">）ですね。とはいえ、aタグとlinkタグは全くの別物です。
aタグ
aタグは主に訪問者に「ここをクリックすると別のページに飛ぶよ」というリンクを貼るもの。bodyタグ内に書かれます。
linkタグ
linkタグは、検索エンジンやブラウザに「このページは、別のこのページやファイルとこんな関係があるよ」と伝えるものです。前述の通り、headタグ内に書かれます。
一旦ここまでの内容をまとめますね。
- 「そのページ」と「外部のファイルやページ」を関連づける
- 基本的にheadタグ内に書く
- 基本的に訪問者の目には入らない
- ブラウザや検索エンジンに向けた情報や指示を書くためのタグ
- aタグとは役割が大きく違う。aタグはbodyタグ内でリンクを貼るために使われる
2. linkタグの書き方：relとhrefの意味は？
実際にどんなものなのか見てみるのが分かりやすいですね。
例1：CSSファイルを読み込む
<link rel="stylesheet" href="style.css">
例えば、上のlinkタグは「スタイルシート（外部CSSファイル）を読み込む」ためのものです。
このタグを解読すると、以下のような意味になります。relでファイルとの関係性を、hrefで そのファイルがある場所（URL）を指定します。
↑ relは「relation（関係）」の略です。つまり「linkタグが書かれているページとhrefで指定しているページとの間で、どのような関係があるのか」をここで示すわけですね。
すると、ブラウザが読みとって「ふむ、これはCSSファイルなんだな。見せてもらおうではないか」と指定された場所にあるCSSファイルを読み込んでくれます。
例2：検索エンジンにページの関係性を伝える
<link rel="canonical" href="https://saruwakakun.com">
こちらはSEO的にも重要なlinkタグです。「canonical（カノニカル）」には、英語で「正規の」という意味があります。このタグは、検索エンジンに対して「このページの正規の（本当の）ページはこれだよ」と伝えるものなのです。
ブログなどを運営していると、いつの間にか「内容は同じなのにURLが違うページ」が生まれてしまったりします。分かりやすい例だと「http://example.com」と「http://example.com/」ですね（スラッシュの有無の違い）。
これを検索エンジンに別のページとみなされると、ページの評価が分散されてしまいます。つまり重複コンテンツになってしまいます。そこで、canonicalのlinkタグの出番です。これにより「正規のページURLはここだよ！」と伝えることができるのです。
ページのhead内に<link rel="canonical" href="http://example.com">（スラッシュ無し）と出力されるようにしておくことで、検索エンジンがスラッシュ有りのページを読みに行っても「ホンモノはコレじゃないんやな」と理解できるのです（301リダイレクトするようにしても良いんですけどね）。
ちょっと話が脱線してしまいましたね…。canonicalタグについては、この記事の後半でも取り上げます。
relとhref以外の属性が書かれることも
linkタグの基本文法はrelとhrefを指定することです。しかし、タグの種類によっては、それ以外の属性を指定することもあります。とはいえ、このあたりは覚える必要はありません。というより種類が多いので覚えようとしても、きっと覚えられません。使うときに、どんな書き方をするべきか調べれば良いのです。
- linkタグのhrefで「ページ/ファイルの場所」を指定
- relで「そのページ/ファイルとの関係性」を指定する
- mediaやtypeなどそれ以外の属性が入るタグもある
あなたのサイトにはどんなlinkタグが書かれている？
実際に現在みなさんが運営しているブログやWebサイトには、どのようなlinkタグが書かれているのかチェックしてみましょう。
ページ内のどこでも良いので右クリックします。表示されるメニューの中から「ページのソースを表示」を選びます。
そのページを構成するHTMLがずらっと表示されます。この中の<head>タグ内にlinkタグが入っています。
ショートカットで検索
ここでショートカットを使うのがおすすめです。
Ctrl + F（Macの場合には⌘+F）のショートカットを使えば、好きな文字列をサクッと検索できます。「 link」と検索すれば、linkタグがたくさんヒットするはずです。
3. 知っておきたいlinkタグ一覧
ここからはよく使われるlinkタグの一覧と書き方を紹介していきます。
スタイルシートの読み込み 重要
<link rel="stylesheet" href="スタイルシートのURL">
さきほども紹介した「外部のCSSファイル」を読み込むためのものです。ほとんどのWebサイトで使われているかと思います。Google FontsやFont Awesomeを使うときにも、このlinkタグでWebフォントを読み込みます。
<!--FontAwesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
<!--GoogleFonts-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" >
CSSを書く場所については、外部ファイル以外にも2パターンあります。詳しくは下の記事をどうぞ。
Webサイトのアイコンを指定 重要
<link rel="icon" href="画像のURL" sizes="32x32" />
<link rel="icon" href="画像のURL" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="画像のURL" />
上２つはブックマークされたとき等に表示されるアイコン画像のことですね。
sizes="32x32"とsizes="192x192"のそれぞれを入れたタグをhead内に書いておきましょう。
「apple-touch-icon-precomposed」で指定した画像は、スマホやタブレットでホーム画面にページを追加したときに使われます。150×150くらいのサイズのPNG画像を指定するようにしましょう。
ちなみにWordPressの場合には「外観 カスタマイズ サイト基本情報 サイトアイコン」で画像を登録しておけば、これらのタグは自動出力されます。
フィードページのURLを示す
<link rel="alternate" type="application/rss+xml" title="フィード" href="フィードページのURL" />
このタグを書いておくと、 RSSリーダーがそのサイトのRSSフィードを見つけることができます。rel = "alternate"はフィード以外のlinkタグでもよく使われるもので「そのページの代替ページ」であることを意味します。つまり上の場合「ページのRSSフィード版はここだよ！」と伝えているのです。
こちらもWordPressでは自動出力されます。
別URLのモバイルサイトの存在を知らせる
<link rel="alternate" media="only screen and (max-width: 640px)" href="モバイルページのURL" />
モバイルページ（スマホやタブレットで見た時のページ）のURLが、PCページのURLと別の場合に指定するものです。ここでもrel="alternate"を使って「スマホ版のページはここだよ！」と検索エンジンなどに伝えているわけです。なお、このタグを使うときには合わせて後述のlink rel="canonical"も指定しておくようにしましょう。
ほとんどのサイトでは、モバイル/PCでURLが変わらないレスポンシブデザインかと思うので不要ですね。
別URLの外国語ページの存在を知らせる
<link rel="alternate" hreflang="外国語ページのURL" />
多言語サイトで使うものです。日本語ページに対して、外国語版のページがあるときにこちらを指定します。
著者情報としてGoogleアカウントを指定する
<link rel="author" href="Google+のアカウントページのURL">
<link rel="publisher" href="Google+のアカウントページのURL">
著者情報として上のようにGoogle+アカウントのURLを明記しておくと、Googleの検索結果に「著者の名前と画像」が出ることがあります（ありました）。最近で全くと言っていいほど見かけなくなったので、廃止されたのかもしれません。SEO効果はあまり期待しない方が良いかと思います。
前後のページのURL
<link rel="prev" href="前のページのURL">
<link rel="next" href="次のページのURL">
主に「1つの記事を複数ページに分割するとき」に使います。1ページ目にはnextのlinkタグだけを、最後のページにはprevのタグだけを書きます。それ以外のページでは、prev/nextの両方を書きます。
DNSプリフェッチ
<link rel="dns-prefetch" href="プリフェッチさせたいドメイン名" />
こちらは上級者向けのタグです。外部ドメインへの参照リンクがたくさんある場合には、このDNSプリフェッチにより表示の高速化が期待できます（大半のサイトでは効果はごくごく僅かだと思いますが…）。
DNSプリフェッチで読み込み速度が上がるか試してみた-rcmdnk’s blog
正規URL（rel canonical) 重要
<link rel="canonical" href="正規ページのURL">
さきほども触れたlinkタグですね。こちらはSEO対策としても重要です。内容が重複するページが複数生まれてしまった場合にも「これが正規のURLだよ」と検索エンジンに示すことで、ページの評価を集中させることができます。
管理しやすくするために、canonicalタグは正規のページ自身にも書いておくと良いかと思います。こちらもWordPressであれば、記事ページで自動で出力してくれます。
WordPressで無くとも、人気のブログサービスであれば必要なlinkタグは自動で出力してくれる設定になっているはずです。とはいえ、本格的にブログやWebサイトを制作・運営していくのであれば、このページで紹介した知識は頭に入れておいて損はないはずです。
linkタグと同様にhead内に書かれるものに「メタタグ」があります。こちらについては、別の記事で詳しく解説しています。
