「じゅんび」で、<head> は裏方の情報を書く場所——画面には出ない——と習いました。今回はその中身を整えます。目には見えないけれど、文字化けを防いだり、スマホできれいに見せたり、検索結果やタブを整えたりする、とても大事なコーナーです。
文字化けを防ぐ charset
まず最初に置きたいのがこれ。日本語が □□□ や 譁�怜喧 に化けるのを防ぐ、いちばん大事な1行です。
<meta charset="UTF-8">「この文書はUTF-8という文字の種類で書いてあるよ」とブラウザに伝えます。これが無い（またはまちがっている）と、ブラウザが文字の種類を読みちがえて、日本語が記号の羅列に化けてしまうことがあります。おまじないとして、<head> のいちばん上に置きましょう——ブラウザは上から読むので、文字の種類は最初に伝えるのが安全です。
スマホ対応の viewport
これが無いと、スマホで開いたときに文字が極小になってしまいます。スマホは、viewportの指定が無いページを「パソコン向けに作られた昔のページ」とみなして、広い画面をぎゅっと縮小して表示しようとするからです。スマホの画面幅に合わせて表示させる1行がこれ。
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width が「ページの幅は端末の画面幅に合わせてね」、initial-scale=1 が「拡大も縮小もしないでそのまま出してね」という意味。中身は少し長いですが、まるごとコピペでOK。意味を暗記する必要はありません。
タブと検索結果に出る title・description
<title> はタブや検索結果に出る見出し、meta description はその下に出る説明文です。
<title>しまちゃんのホームページ</title>
<meta name="description" content="しまちゃんの、はじめてのじこしょうかいホームページ。">description は検索順位を直接上げるものではありませんが、検索結果で「このページには何が書いてあるか」を伝えるお店の看板のような文。ページの中身がひとことで伝わる文にしておくと、見つけてもらいやすくなります。
タブの小さなアイコン favicon
ブラウザのタブに出る、あの小さなアイコン。あれを favicon（ファビコン）と呼びます。用意した画像を public フォルダに置いて、headからこう指定します。
<link rel="icon" href="/favicon.png"><link> は「外にあるファイルをheadにつなぐ」タグ。rel="icon"（アイコンとして使うよ）と href（画像の場所）を渡すだけ。これだけで、タブにお気に入りの絵が並びます。
headに入れるもの早見表
ここまでをまとめると、headの中はこんなラインナップになります。
| 書くもの | 役割 |
|---|---|
<meta charset> | 文字化けを防ぐ |
<meta viewport> | スマホ表示を整える |
<title> | タブ・検索結果の見出し |
<meta description> | 検索結果の説明文 |
<link rel="icon"> | タブのアイコン（favicon） |
<link rel="stylesheet"> | 見た目のCSSをつなぐ（CSSコースで） |
実際に並べると、こうです。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>しまちゃんのホームページ</title>
<meta name="description" content="しまちゃんの、はじめてのじこしょうかいホームページ。">
<link rel="icon" href="/favicon.png">
</head>このレッスンのまとめ
<head>は画面に出ない“ページの設定コーナー”charset・viewport・title・description・faviconを入れておく- 呪文めいた値はコピペでOK——早見表の全体像だけつかめれば十分