HTMLの<meta>要素は文書のメタデータを定義するために使用されます。
メタデータとは、文書の情報や設定を説明するデータです。<meta>要素は、ブラウザ、検索エンジン、その他のウェブサービスが文書を解釈し、表示する際に重要な役割を果たします。
meta要素の属性とその解説
charset 属性
- 説明: 文書の文字エンコーディングを指定します。
基本的にはUTF-8が使用されますが、他のエンコーディングも指定可能です。
UTF-８のみ使用するといった考え方で問題ないと思います。(小文字での指定も可能です。) - 詳細:
charset属性を指定することで、ブラウザは文書を正しく表示するために適切な文字セットを使用します。
複数の<meta charset>要素が存在する場合、後から出現した指定が有効となりますが、間違った記述になりますので挙動は保証されません。必ず一つ記述するようにしましょう。
<meta charset="UTF-8">name 属性
- 説明: 文書に関する一般的なメタデータを定義します。主にSEOやページの説明、キーワードなどに使用されます。
- 詳細:
name属性は、content属性と組み合わせて使用され、ページの内容や性質についての情報を提供します。これにより、検索エンジンがページの内容を理解しやすくなります。
<meta name="description" content="このページは...">http-equiv 属性
- 説明: HTTPヘッダーと同様のメタデータを提供します。主にブラウザの動作を制御するために使用されます。
- 詳細:
http-equiv属性は、HTTPヘッダーを模倣し、ページのリフレッシュやキャッシュ制御、セキュリティポリシーの設定などに使用されます。例えば、ページを自動的にリフレッシュするための設定が可能です。
<meta http-equiv="refresh" content="30">itemprop 属性
- 説明: マイクロデータのプロパティを定義します。主に構造化データを提供するために使用されます。
- 詳細:
itemprop属性は、Googleなどの検索エンジンがデータを理解しやすくするために使用されます。これにより、検索結果にリッチスニペットが表示されることがあります。
<meta itemprop="name" content="商品名">meta要素の流行と歴史
- 初期のWeb（1990年代）:
- 初期のWebサイトでは、検索エンジンが文書をインデックスする際にメタタグが重視されていました。
<meta name="keywords">や<meta name="description">が多く使用されました。
- 初期のWebサイトでは、検索エンジンが文書をインデックスする際にメタタグが重視されていました。
- SEOの進化（2000年代）:
- 検索エンジンが進化するにつれて、キーワードの乱用が問題となり、Googleなどの検索エンジンはメタキーワードタグを重視しなくなりました。現在でも
<meta name="description">は重要な役割を果たしています。
- 検索エンジンが進化するにつれて、キーワードの乱用が問題となり、Googleなどの検索エンジンはメタキーワードタグを重視しなくなりました。現在でも
- モバイルの普及（2010年代）:
- モバイルフレンドリーなサイトが求められるようになり、
<meta name="viewport">タグが広く使用されるようになりました。
- モバイルフレンドリーなサイトが求められるようになり、
<meta name="viewport" content="width=device-width, initial-scale=1">- セキュリティとプライバシー（2020年代）:
- コンテンツセキュリティポリシー（CSP）を定義するために、
<meta http-equiv="Content-Security-Policy">が使用されることが増えました。
- コンテンツセキュリティポリシー（CSP）を定義するために、
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">まとめ
<meta>要素は、HTML文書のメタデータを定義するための重要な要素です。
各属性の使い方を理解し適切に設定することで文書のアクセシビリティやSEOを向上させることができます。
特にcharset属性の正しい設定は文字化け防止になりますので、決まったものをなんとなく使用するのではなく環境に適した内容を指定できるようにするのがベストです。
※といっても基本UTF-8だと思いますが。。。
meta周りについては大事な部分なだけあってウェブデザイン技能検定でも出題される傾向にありますので、是非しっかりとした知識を付けていただければと思います。
参考リンク:
