HTML辞書ホームへ
HTML要素 辞書 by Sentaro

<meta>

メタデータ要素。文書の文字エンコーディング、ビューポート設定、SEO情報など、ドキュメントに関するメタデータを定義します。

info

概要

<meta> 要素は、文書に関するメタデータ（データに関するデータ）を定義するために使用されます。常に <head> 要素内に配置されます。
この要素は、文字コード、ビューポート設定、検索エンジン最適化（SEO）のための説明文やキーワード、ソーシャルメディアで共有された際の表示情報（OGP）など、ブラウザや検索エンジンにドキュメントの情報を伝えるために不可欠です。

lightbulb
メタデータとは？
Webページの内容そのものではなく、「誰が作ったか」「文字コードは何か」「どのように表示すべきか」といった、そのページを適切に処理するために必要な情報を指します。
play_circle

デモ (静的表示 - head内のみで使用)

HTML (Source) - head内
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="HTML <meta>要素のリファレンス"> <meta property="og:title" content="<meta>要素解説"> </head>
Preview (Result) - ページに直接的な表示はありません

この要素は文書のメタデータを定義するため、ページ本体には何も表示されません。ブラウザや検索エンジンがこの情報を利用します。

list

属性 (Attributes)

属性名 説明
charset 文書の文字エンコーディングを指定します。通常、UTF-8 を指定します。これが指定されている場合、他の属性は不要です。
name メタデータの種類を指定します。
例: description (文書の説明), viewport (ビューポート制御), keywords (キーワード)
content name 属性または property 属性で指定されたメタデータの内容（値）を指定します。
http-equiv HTTPヘッダーに相当する情報を指定します。ブラウザの互換性維持やリフレッシュ/リダイレクトなどに使用されます。
property OGP（Open Graph Protocol）などの、拡張されたメタデータの種類を指定します。これは name の代わりに使われます。
code

実用例

1. 文字コード指定（必須）とビューポート設定（モバイル対応）

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. SEOのための説明文 (Description)

<meta name="description" content="このページは<meta>要素の使い方を詳細に解説しています。">

3. OGP設定（ソーシャルメディアでの表示）

<meta property="og:title" content="<meta>要素の決定版リファレンス"> <meta property="og:type" content="website"> <meta property="og:image" content="https://example.com/image.png">

4. リダイレクト（非推奨）

<!-- 5秒後に指定のURLへ遷移 --> <meta http-equiv="refresh" content="5;url=https://new-page.com/">
lightbulb

知っておくべき重要事項

code
文字コードの指定は可能な限り早く
<meta charset="UTF-8"> は、ブラウザがドキュメントを正しく解釈するために、HTMLファイルの**先頭付近**、具体的には <head> の中の最初の数タグ内（理想的には1024バイト以内）に記述する必要があります。
security
ビューポート設定 (Viewport)
モバイルフレンドリーなサイトを作るためには、<meta name="viewport" content="width=device-width, initial-scale=1.0"> の指定が必須です。これにより、デバイスの幅に合わせてコンテンツが適切にスケールされます。
私について 利用規約 プライバシーポリシー