HTML ファイルの先頭、<head> の中に書かれている <meta> という短いタグ。普段あまり意識しないかもしれませんが、文字化けを防いだり、スマホで正しく表示させたり、検索結果に表示される説明文を指定したりと、ページの土台を支える重要な役割を持っています。この記事では <meta> 要素の基本、必ず入れておきたい charset・viewport・description の3つ、そして書く場所や効かないときの確認ポイントを解説します。
目次
meta 要素とは
<meta> 要素は、ページそのものについての「情報（メタデータ）」を表すタグです。画面に直接表示される文字や画像とは違い、ブラウザや検索エンジンに対して「このページの文字コードはこれ」「表示幅はこう扱って」といった指示を伝えます。<head> の中に書き、終了タグは持たない空要素です。
<meta> 要素は、どんな情報を伝えるかによって使う属性が変わります。よく使うのは、文字コードを指定する charset、表示の設定や説明文などを伝える name と content の組み合わせです。まずは必ず入れておきたい3つから見ていきましょう。
charset で文字コードを指定する
charset は、ページの文字コードを指定する属性です。現在は UTF-8 を指定するのが標準で、これを書いておかないと日本語が文字化けすることがあります。<head> の中で、できるだけ先頭に近い位置に書きます。
<head>
<meta charset="UTF-8">
...
</head>ブラウザは文字コードの指定を見つけてから本文の解釈を始めるため、charset は <head> の早い段階に置くのが望ましいとされています。HTML ファイルそのものを UTF-8 で保存し、<meta charset="UTF-8"> も書いておく、という両方をそろえておくと文字化けを防げます。
viewport でスマホ表示を整える
viewport の指定は、スマートフォンなどでの表示幅を調整するための設定です。これがないと、スマホがページを「パソコン用の広い画面」とみなして全体を縮小表示してしまい、文字が極端に小さくなります。レスポンシブ対応のページでは、次の1行がほぼ定番として使われます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">content に書いた値は、カンマ区切りで複数の設定を並べたものです。それぞれの意味は次のとおりです。
| 設定 | 意味 |
|---|---|
width=device-width | 表示幅を端末の画面幅に合わせる |
initial-scale=1.0 | 最初の表示倍率を等倍（拡大・縮小なし）にする |
メディアクエリでスマホ用のスタイルを書いても表示が変わらない、という場合、この viewport の指定が抜けていることが多いです。レスポンシブ対応の前提となる設定なので、忘れずに入れておきましょう。
description で検索結果の説明文を指定する
description は、ページの内容を短くまとめた説明文です。検索エンジンの結果一覧で、タイトルの下に表示される説明文（スニペット）として使われることがあります。name="description" と content の組み合わせで書きます。
<meta name="description" content="HTML の meta 要素の使い方を初心者向けに解説。文字コード・viewport・説明文の設定方法を紹介します。">長すぎると検索結果では途中で省略されるため、120文字前後を目安に、そのページが何について書かれているかが伝わる文章にします。なお、description を書いたからといって必ずそのまま表示されるわけではなく、検索エンジンがページ内容に応じて別の文章を表示することもあります。あくまで「説明文の希望を伝えるもの」と考えておくとよいでしょう。
name と content の組み合わせ
description のように、<meta> 要素の多くは name で「情報の種類」を、content で「その値」を指定します。代表的な組み合わせをまとめます。
| name の値 | content に書く内容 |
|---|---|
description | ページの説明文（検索結果のスニペット候補） |
viewport | 表示幅や倍率の設定 |
author | ページの作成者名 |
robots | 検索エンジンの動作指定（noindex でインデックス拒否など） |
たとえば、まだ公開したくないページを検索結果に出したくないときは、<meta name="robots" content="noindex"> と書きます。name の値を変えることで、さまざまな情報を伝えられるのが <meta> 要素の特徴です。
keywords は今も必要か
少し古い解説では <meta name="keywords"> でキーワードを並べる方法が紹介されていることがあります。しかし、主要な検索エンジンは現在この keywords をランキングの判断にほぼ使っていません。SEO 目的でわざわざ書く必要はなく、無理に入れても効果は期待できません。検索を意識するなら、keywords よりも、ページの内容そのものと description の文章を整えることのほうが大切です。
meta の指定が効かないとき
head の外に書いていないか
<meta> 要素は <head> の中に書くのが原則です。<body> の中に置くと正しく機能しません。とくに charset や viewport が効かないときは、まず <head> 〜 </head> の内側に書かれているかを確認してください。
WordPress では head が自動生成される
WordPress でサイトを運用している場合、<head> の中身はテーマや SEO 系プラグインが自動で出力していることがほとんどです。description を変えたいのに反映されないときは、HTML を直接編集するのではなく、利用中のプラグインや投稿ごとの設定欄から指定するのが正しい方法です。手書きの <meta> とプラグインの出力が二重になると、意図しない表示になることもあるので注意しましょう。
まとめ
<meta> 要素は、ページについての情報をブラウザや検索エンジンに伝えるタグです。要点を振り返ります。
<meta>は<head>の中に書く空要素<meta charset="UTF-8">で文字コードを指定し、文字化けを防ぐ<meta name="viewport" content="width=device-width, initial-scale=1.0">でスマホ表示を整える<meta name="description">で検索結果に出る説明文を指定するkeywordsは現在ほぼ効果がなく、内容とdescriptionを整えるほうが重要
まずは charset と viewport の2行を必ず入れる、という習慣をつけておけば、文字化けやスマホでの表示崩れといった基本的なトラブルを防げます。