metaについてhtmlプロパティ解説

概要

<meta> タグは HTML 文書のメタ情報を記述するためのタグです。 文字コード、説明、キーワード、ビューポート設定などを指定する際に使用されます。 通常は <head> 内に記述します。

基本的な使い方

See the Pen <table> / <tr> / <td>タグについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen. 

<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

このように複数の用途で <meta> を使い分けます。 特に文字コードやモバイル対応の設定は重要です。

出力される内容の例


<meta charset="UTF-8">
<meta name="description" content="このサイトは○○についての情報を発信しています">

役割とメリット（定義リスト形式）

SEO対策
検索エンジン向けに説明やキーワードを指定することで、SEO 効果が期待できます。
モバイル対応
ビューポート設定でスマホやタブレット表示を最適化できます。
文字コードの指定
正しい文字コードを設定することで文字化けを防止します。

注意点

  • <meta charset="..."> は <head> の最初の方に記述しましょう。
  • description の内容は 120 文字程度にまとめるのが推奨されます。
  • ビューポート設定を忘れるとモバイル表示が崩れる場合があります。

まとめ

<meta> タグはページの情報をブラウザや検索エンジン、外部サービスに伝えるために不可欠なタグです。 正しい属性を設定し、SEO や表示最適化に役立てましょう。