HTML Living Standard/meta
meta 要素
[編集]<meta> 要素は、文書のメタデータ（データに関するデータ）を定義するために使用されます。これには、文書の作成者、説明、キーワード、文字エンコーディング、ビューポート設定など、さまざまな情報が含まれます。<meta> 要素は、<head> 要素内に配置されます。
概要
[編集]- カテゴリ: メタデータコンテンツ
- 使用できる文脈:
<head>要素内 - 内容モデル: なし（自己終了タグ）
- タグの省略: 開始タグと終了タグのどちらも省略可能
- 属性:
name– メタデータの名前content– メタデータの内容http-equiv– HTTPレスポンスヘッダの値を設定charset– 文字エンコーディングitemprop– Schema.orgのプロパティ名scheme– 属性nameの値に対するスキーム
使用例
[編集]文字エンコーディングの指定
[編集]文字エンコーディングを指定するために charset 属性を使用します。通常、<meta> 要素は文書の最初の方に配置され、文字エンコーディングを宣言します。
<meta charset="UTF-8">
この例では、文書がUTF-8エンコーディングであることを示しています。
ビューポート設定
[編集]モバイルデバイスにおける表示方法を指定するために、<meta> 要素を使用してビューポート設定を行うことができます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
この設定では、ページの幅をデバイスの幅に合わせ、初期スケールを1に設定しています。これにより、モバイルデバイスで適切な表示が行われます。
メタデータの追加
[編集]<meta> 要素を使用して、文書の説明やキーワードなどのメタデータを指定できます。
<meta name="description" content="このページはHTMLのチュートリアルです。"> <meta name="keywords" content="HTML, チュートリアル, ウェブ開発">
これにより、検索エンジンに対してページの内容を説明する情報が提供されます。
HTTPヘッダの設定
[編集]<meta> 要素の http-equiv 属性を使用して、HTTPレスポンスヘッダの値を設定することができます。
<meta http-equiv="refresh" content="30">
この例では、ページが30秒ごとにリフレッシュされる設定です。
アクセシビリティの考慮事項
[編集]- メタデータは、検索エンジンやソーシャルメディアサービスがページの内容を理解し、表示するために重要です。そのため、適切なメタデータの提供はSEO（検索エンジン最適化）において重要です。
name属性の値として、descriptionやkeywordsなどの意味が明確な属性を使用することが推奨されます。
ベストプラクティス
[編集]- 文字エンコーディングの指定: 文書の先頭で、適切な文字エンコーディングを指定することが重要です。特にUTF-8を使用することが推奨されます。
- ビューポート設定: モバイル対応のため、
<meta>要素でビューポート設定を行い、レスポンシブデザインをサポートしましょう。 - ページの説明:
descriptionメタタグを使用して、ページの内容を簡潔に説明することがSEOに役立ちます。 - キーワードの指定: 主要なキーワードを
keywordsメタタグで指定し、検索エンジン向けにページのテーマを明示しましょう。
注意事項
[編集]<meta>要素には複数の属性を同時に使用でき、1つの文書に複数の<meta>要素を記述することが可能ですが、SEO向けにはdescriptionやkeywordsを適切に設定することが重要です。http-equiv属性は特定のHTTPヘッダを設定するために使用されるものであり、すべてのケースで必要というわけではありません。