Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<meta>

『<meta>』タグは文書に関するメタ情報（文字コード・説明・ビューポートなど）を指定するタグです。『<head>』内に記述し、ページの表示には直接関係しませんが、検索エンジンやブラウザの動作に影響します。

構文

<!-- 文字コードの指定 -->
<meta charset="UTF-8">

<!-- name属性 + content属性の組み合わせ -->
<meta name="description" content="ページの説明文です。">

<!-- ビューポートの指定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- http-equiv属性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

属性一覧

属性	概要
charset	文書の文字コードを指定します。現代のWebでは『UTF-8』を指定します。
name	メタデータの種類を指定します。『description』『keywords』『viewport』などを指定します。
content	『name』または『http-equiv』に対応する値を指定します。
http-equiv	HTTPヘッダーに相当する情報を指定します。『X-UA-Compatible』などを指定します。
property	OGP（Open Graph Protocol）などの拡張メタデータで使用します。

nameの主な値一覧

name値	概要
description	ページの説明文です。検索エンジンの検索結果に表示される場合があります。
keywords	ページのキーワードです。現代の主要な検索エンジンではほぼ無視されます。
viewport	スマートフォンなどのモバイル端末での表示設定を行います。
robots	検索エンジンのクローラーへの指示を指定します。『noindex』『nofollow』などを指定します。
author	ページの作成者を指定します。

サンプルコード

<head>
  <!-- 文字コード：必ずhead内の最初に記述します -->
  <meta charset="UTF-8">

  <!-- ビューポート：スマートフォン対応に必須です -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページの説明文（検索結果に表示されます） -->
  <meta name="description" content="HTMLの使い方を初心者向けにわかりやすく解説しています。">

  <!-- OGP（SNSでシェアされたときの表示設定） -->
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページの説明文です。">
  <meta property="og:image" content="https://example.com/ogp.png">
</head>