HTMLを学び始めると、head の中に出てくる meta タグが何をしているのか分かりにくいことがあります。metaタグとは、ページの本文ではなく、ブラウザや検索エンジンにページ情報を伝えるためのタグです。
目立たない存在ですが、文字化け防止、スマホ表示、検索結果の説明文など、実はかなり重要な役割を持っています。この記事では、metaタグの役割、どこに書くのか、よく使う種類、SEOとの関係、初心者がやりがちなミスを、前提から順番にわかりやすく整理します。
metaタグは地味ですが、ページの土台を支える設定です。最初に押さえる価値があります。
結論：metaタグはページの設定情報を伝えるために使う
- 文字コードを指定する
- スマホ表示の設定に使う
- ページ説明を検索結果や共有時に活かす
- 検索エンジン向けの補足指示を書くことがある
つまりmetaタグは、本文を表示するためのものではなく、ページに関する補足情報を機械向けに伝えるためのタグです。
metaタグとは何か
metaタグは通常、head タグの中に書きます。ユーザーが本文として読む文章ではありませんが、ブラウザや検索エンジンに対して「このページはこういう設定です」と伝える役割があります。
たとえば、文字コードを指定しないと日本語が文字化けすることがありますし、スマホ向け表示の設定がなければ画面幅にうまく合わないことがあります。こうした土台の設定を支えるのがmetaタグです。
metaタグがないと何が起こるのか
metaタグが不足していると、ページが必ず壊れるわけではありません。ただし、日本語が文字化けしたり、スマホで見たときに幅が合わなかったり、検索結果で説明文が意図どおり伝わりにくくなったりすることがあります。
つまりmetaタグは、表には見えにくいけれど、ページを「ちゃんと見える状態」に整える裏方の役割を担っていると考えると分かりやすいです。
metaタグはどこに書くのか
metaタグは基本的に head タグの中へ書きます。body に書く本文とは役割が違うため、位置を間違えないことが大切です。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="このページの説明文"> <title>ページタイトル</title> </head>
head そのものの役割がまだ曖昧な方は、先に headタグの記事 を読むと位置づけが理解しやすくなります。
よく使うmetaタグ一覧
| metaタグ | 役割 | よくある用途 |
|---|---|---|
<meta charset="UTF-8"> | 文字コードを指定する | 日本語の文字化け防止 |
<meta name="viewport" ...> | 表示領域を指定する | スマホ表示の最適化 |
<meta name="description" ...> | ページ説明を書く | 検索結果の説明文候補 |
<meta name="robots" ...> | 検索エンジン向けの補足指示 | index / noindex の調整 |
<meta http-equiv="refresh" ...> | 一定時間後の再読み込みや遷移 | 特殊な用途で使う |
初心者がまず押さえたい3つのmetaタグ
1. charset
charset は文字コードを指定します。日本語ページなら UTF-8 を設定しておくのが基本です。これがないと文字化けの原因になることがあります。
2. viewport
viewport はスマホやタブレットでの表示幅に関わります。レスポンシブ対応の土台として、今のWebページではかなり重要です。詳しくは viewportの記事 でも確認できます。
3. description
description はページの説明文です。検索順位を直接決めるものではありませんが、検索結果の説明文候補として使われることがあり、クリック率に影響しやすい重要な要素です。
metaタグとSEOの関係
metaタグはSEOでよく話題になりますが、すべてのmetaタグが直接順位を上げるわけではありません。大切なのは、ブラウザや検索エンジンがページを正しく理解しやすい状態を作ることです。
description: 検索結果で内容を伝えやすくするviewport: モバイル表示の土台になるcharset: 文字化け防止で閲覧体験を守るrobots: index / noindex などを調整する
なお、昔よく見かけた meta keywords のような設定は、現在は優先度が高くありません。初心者の方は、まず charset、viewport、description の3つを丁寧に押さえるだけでも十分です。
SNSで使われる meta 情報との関係
WebページをSNSで共有したときに、タイトルや画像、説明文がきれいに表示される仕組みも、広い意味ではmeta情報の考え方とつながっています。初心者の段階では詳細な設定をすべて覚える必要はありませんが、metaタグは検索エンジンだけでなく共有時の見え方にも関わることがある、と知っておくと全体像がつかみやすいです。
つまりmetaタグは、SEO専用の話ではなく、ブラウザ表示、モバイル表示、共有時の伝わり方など、ページの基本品質全体に関わる設定と考えるのが自然です。
headタグ・metaタグ・linkタグの違い
ここも初心者が混乱しやすいポイントです。
| 要素 | 役割 | 例 |
|---|---|---|
head | 設定情報全体を入れる箱 | title, meta, link などを入れる |
meta | ページ設定や説明を伝える | charset, viewport, description |
link | 外部リソースや関連URLを指定する | CSSファイル、アイコン、canonical など |
meta と link は似て見えますが、役割は違います。linkタグの記事 と見比べると整理しやすいです。
よくあるミス
- metaタグを
bodyに書いてしまう charsetを入れ忘れて文字化けするdescriptionを空欄のままにする- 同じ種類のmetaタグを重複させる
viewportがなくスマホ表示が崩れる
HTML全体の書き方に不安がある方は、HTMLの書き方の基本 を先に押さえておくと、metaタグの位置づけも理解しやすくなります。
よくある疑問
metaタグは画面に表示されますか？
通常の本文のようには表示されません。ブラウザや検索エンジンなどに情報を伝えるために使われます。
description を入れると順位が上がりますか？
それだけで順位が上がるとは言い切れません。ただし、検索結果で内容が伝わりやすくなり、クリック率の改善にはつながりやすいです。
metaタグはすべてのページに必要ですか？
最低限、charset や viewport は多くのページで重要です。description も、検索流入を意識するページではしっかり書いておく価値があります。
関連して読みたい記事
まとめ
metaタグは目立たない存在ですが、ページの表示や検索結果の見え方を支える大切な設定です。まずは基本3種類を確実に使えるようにして、HTML全体の理解とあわせて少しずつ役割を広げていきましょう。