<meta>
文字コードなどのメタデータ
ページそのものに関する情報（メタデータ）をブラウザや検索エンジンに伝えます。head の中に書き、画面には表示されません。
サンプルコード
実行結果
解説
meta は終了タグを持たない空要素で、head の中に書きます。どんな情報を伝えるかは、charset、name、content などの属性で指定します。
<meta charset="UTF-8"> は文字コードの指定です。日本語の文字化けを防ぐため、head のできるだけ先頭に書きます。
<meta name="viewport"> は、スマートフォンでページを端末の画面幅に合わせて表示するための指定です。レスポンシブデザインには欠かせません。
<meta name="description"> は、ページの内容を短くまとめた説明文です。content 属性に書いた文章は、Googleなどの検索結果でタイトルの下に表示されることがあり、利用者がページを開くかどうかを判断する材料になります。
応用例・注意点
よく使う書き方
| コード | 説明 |
|---|---|
charset="UTF-8" | 文字コードをUTF-8に指定する |
name="viewport" | スマートフォンでの表示幅を端末に合わせる |
name="description" | ページの説明文。検索結果に表示されることがある |
name="robots" | 検索エンジンに登録させるかどうかを指定（noindex など） |
property="og:title" など | SNSでシェアされたときのタイトル・画像（OGP） |
description を書く
ページごとに内容に合った説明文を、全角80〜120文字程度で書くのが目安です。
注意点
- 01description はページごとに異なる文章にします。全ページ同じ説明文では効果がありません。
- 02description に書いても、検索結果に必ずそのまま表示されるとは限りません。検索エンジンが本文から自動で抜き出すこともあります。
- 03キーワードを詰め込んだ不自然な文章は避け、内容が伝わる自然な文章にします。
ビューポートの meta タグ
<meta name="viewport"> は、レスポンシブコーディングを行ううえで必要不可欠 な HTML タグです。ビューポートとは、ブラウザウィンドウの表示領域のことです。
content に「width=device-width」を記述することで、表示領域の幅を PC やスマホなどの端末画面の幅に合わせています。これがないと、スマホは PC 向けの広い幅（980px など）でページを作ってから縮小して表示するため、文字がとても小さくなります。
必ず書く1行
<meta name="viewport" content="width=device-width, initial-scale=1.0">- この行がないとメディアクエリが動作しない ので注意します。スマホでも画面幅が PC と同じ広さとして扱われ、
@media (max-width: …)の条件に当てはまらなくなります。
| content に書ける値 | 意味 |
|---|---|
width=device-width | 表示しているデバイスの幅に合わせる |
initial-scale | ページが表示されたときの倍率（1.0 で等倍） |
minimum-scale | 最小縮小倍率の指定 |
maximum-scale | 最大拡大倍率の指定 |
user-scalable | ピンチイン・ピンチアウト（拡大・縮小）を許可するかどうか |
ピンチイン は2本の指で画面を同時に触れて距離を縮める操作（縮小）、ピンチアウト は2本の指で画面を同時に触れて距離を広げる操作（拡大）です。
拡大は禁止しない
user-scalable=noやmaximum-scale=1で拡大を禁止すると、文字を大きくして読みたい人がページを読めなくなります。アクセシビリティの観点から、ふつうはwidth=device-width, initial-scale=1.0だけを書きます。