<meta>

対応:		HTML 4（1997）

『<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	ページの作成者を指定します。

サンプルコード

sample_meta.html

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

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

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

  <!-- クローラー制御：検索エンジンにインデックスさせない場合 -->
  <meta name="robots" content="noindex, nofollow">

  <!-- スマートフォンのブラウザUIのテーマカラー -->
  <meta name="theme-color" content="#3498db">

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

  <!-- http-equiv: 3秒後に別ページへリダイレクト -->
  <!-- <meta http-equiv="refresh" content="3; url=https://example.com/"> -->
</head>

実行結果

上記の記述はページ上には表示されませんが、ブラウザやSNS・検索エンジンに対してページの情報を伝えます。スマートフォンでは『viewport』の指定によって適切な幅で表示されます。『robots』の指定により検索エンジンのクローラーはインデックスを作成せず、『theme-color』によりChrome等でブラウザUIがテーマカラーで表示されます。

サンプルページはこちら

概要

『<meta charset="UTF-8">』は必ず『<head>』の最初に記述してください。文字コードの宣言が遅れると、ブラウザが文字コードを誤判定して文字化けが発生する場合があります。

『<meta name="viewport" content="width=device-width, initial-scale=1.0">』はスマートフォン対応（レスポンシブデザイン）に必須の記述です。この指定がないと、スマートフォンでページをPC向けの幅で縮小表示してしまいます。

OGP（『property="og:..."』）はFacebookやX（旧Twitter）などのSNSでURLがシェアされたときに表示されるタイトル・説明・画像を制御するための仕組みです。Webサイトを公開する際は設定しておくとよいでしょう。

実践的なmetaタグ設定集

用途別に分類した、よく使われる『<meta>』タグの設定例です。

robots制御

<!-- 検索エンジンにインデックスさせず、リンクもたどらせない -->
<meta name="robots" content="noindex, nofollow">

<!-- インデックスはさせるが、スニペットを表示させない（SNS等への転載防止） -->
<meta name="robots" content="index, nosnippet">

<!-- Googleのみに対して指定する場合はnameをgooglebotにする -->
<meta name="googlebot" content="noindex">

モバイル・PWA向け

<!-- スマートフォンのブラウザUIカラーを変更 -->
<meta name="theme-color" content="#3498db">

<!-- ライト・ダークモードで色を切り替える -->
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">

<!-- PWA: スタンドアロンモードで起動（ホーム画面から開いたときブラウザUIを非表示） -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

リダイレクト（http-equiv）

<!-- 3秒後に別ページへリダイレクト -->
<meta http-equiv="refresh" content="3; url=https://example.com/new-page/">

<!-- IEで最新のレンダリングエンジンを使用させる -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Content Security Policyをheadで指定（サーバーヘッダーと同等の効果） -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

JavaScriptでmetaタグを動的に操作する

// descriptionを取得する
var desc = document.querySelector('meta[name="description"]');
console.log(desc.getAttribute("content"));

// OGPのog:imageを動的に変更する（SPA等でページ遷移するとき）
var ogImage = document.querySelector('meta[property="og:image"]');
if (ogImage) {
  ogImage.setAttribute("content", "https://example.com/img/new-page.png");
}

// robots metaを追加してページをnoindexにする
var robots = document.createElement("meta");
robots.name = "robots";
robots.content = "noindex";
document.head.appendChild(robots);