<meta>: META 要素
最終更新：2026-10-13
<meta>META 要素
文書のメタデータ（charset・description・author・viewport など）を記述します。ページには表示されませんが、SEO と描画に重要です。
| カテゴリ | メタデータ |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 自己完結 — 閉じタグ不要 |
| ステータス | 標準 |
📝 構文
<meta name="" content="">⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
charset | Document character encoding, e.g. UTF-8 (best placed first in head). | |
name | Metadata name, e.g. description, keywords, author, viewport. | |
content | The value paired with name or http-equiv. | |
http-equiv | Emulates an HTTP response header, e.g. content-type, refresh. | |
property | Social card property, e.g. og:title (Open Graph). |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <meta> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： meta は空要素です。文字化けを防ぐため charset は早い位置に置きましょう。
❓ よくある質問
Qmeta のよく使う設定にはどんな種類がありますか？
A文字コードの
<meta charset='UTF-8'>、ビューポートの <meta name='viewport' content='width=device-width, initial-scale=1'>、SEO 用の説明 name='description'、Open Graph のシェアカード（og:title、og:image）、robots のインデックス制御（noindex/nofollow）です。それぞれ対応するエコシステムがあります。Qmeta charset を先頭1024バイト以内に書くのはなぜですか？
Aブラウザはストリーミングで解析するため、charset の宣言を読むまではデフォルトの符号化で先頭の数百バイトを解釈します。その間に日本語や中国語などのマルチバイト文字があり、符号化の判定が間違うと、文字化けが起きて自動では回復できません。だから charset は head の最初の要素でなければならないのです。
Qviewport の content にはどんなパラメータを書けますか？
Aよく使うのは
width=device-width（幅を端末に合わせる）、initial-scale=1（初期倍率）、maximum-scale/user-scalable（拡大の制限。無効化するとアクセシビリティを損なうので非推奨）、viewport-fit=cover（ノッチ対応）です。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
