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

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

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

概要

<meta> タグは、HTMLドキュメントのメタデータ（情報に関する情報）を指定するための要素です。
このタグは、ページの文字エンコーディング、説明、キーワード、表示設定、SEOやSNS連携情報などをブラウザや検索エンジンに伝える役割があります。

基本的な使い方

See the Pen bodyについて by 西野, WEBデザイン (西野誠) (@-WEB-the-vuer) on CodePen.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="地域密着型の企業紹介ページ">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会社概要</title>
  </head>
  <body>
    <h1>会社概要</h1>
  </body>
</html>

<meta> タグは基本的に <head> 要素内に記述します。
属性により役割が異なり、主に charset、name、http-equiv などが使われます。

出力される内容の例

<meta charset="UTF-8">
<meta name="description" content="地域密着型の企業紹介ページ">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

文字コードの指定: <meta charset="UTF-8"> により、文字化けを防ぎ、日本語も正しく表示できます。

SEO対策: description によって、検索結果に表示される説明文をコントロールできます。

モバイル対応: viewport を設定することで、スマホやタブレットでも適切な表示スケーリングが可能になります。

SNSとの連携: og:title や og:description など、Open Graphタグと組み合わせてSNSシェア時の表示を最適化できます。

検索エンジンへの指示: robots を使って、インデックス可否やリンクのフォロー可否を設定できます。

注意点

<meta> タグは自己終了タグ（終了タグ不要）です。
属性名のスペルミスに注意（例：viewport, descriptionなど）。
不適切な charset や viewport の設定は表示崩れや文字化けの原因になります。
meta タグはページの読み込み前に処理されるため、<head> 内に正しく配置する必要があります。

まとめ

<meta> タグは、HTMLドキュメントの背景的な情報（メタデータ）を定義するための重要な要素です。
ユーザーの目には見えないものの、SEO、表示速度、デバイス対応、SNS対応など、Webページ全体の品質に大きく関わるため、目的に応じた適切な記述が求められます。