HTMLの <meta> タグ

<META>とは、この文書がどんな文字コードで書かれているかなど、HTML文書のメタ情報を記述するためのHTMLタグである。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。

<meta></meta>

<META></META>

meta要素の終了タグは省略できる。

<meta>

<META>

XML形式で閉じタグを省略することもできる。

<meta />

内容

meta要素の内容は空要素である。

属性

charset

HTMLの文字エンコーディングを指定する。

<meta charset="utf-8">

content

関連情報を指定する。http-equiv属性やname属性の値により指定する内容は異なる。

content属性は必須で省略できません。ただし、content属性に記述する内容は、http-equiv属性またはname属性の値によって決まるので、http-equiv属性とname属性のどちらか一方も指定することになります。

dir

文書の方向を指定する。

lang

言語を指定する。

name

メタ情報名を指定する。

name属性
値	説明
author	著者の名前
description	文書の概要
format-detection	スマホの場合に電話番号、メールアドレスおよび住所をリンクに変換するかどうか
keywords	文書に関連するキーワード
rating	レーティング
robots	検索エンジンのロボットに対する指示
viewport	Apple iPhone用Safariの表示属性とその値

name属性に指定した値によって、content属性に指定する内容が異なる。

author

このHTML文書の著者名を記述する。

<meta name="author" content="Tsukamoto Hiroyuki">

description

このHTML文書の概要説明を記述する。

<meta name="description" content="このページではHTMLのMETAタグについて説明しています。">

format-detection

連絡先をリンクに変換するかどうかを指定する。AndroidやiPhoneなどのスマホの場合、電話番号がリンクに変換されて、タップするだけで電話をかけられるようになる。

スマホの場合に電話番号、メールアドレスおよび住所をリンクに変換させない例を示す。

<meta name="format-detection" content="telephone=no, email=no, address=no">

keywords

このHTML文書に関連するキーワードを記述する。カンマで区切って、複数のキーワードを指定できる。

<meta name="keywords" content="HTML,META,タグ,OGP">

rating

アダルトコンテンツを含むことを示し、セーフサーチの検索結果から除外されるよう指示する。

<meta name="rating" content="adult">

robots

Googleなどの検索エンジンのロボットに対する指示を指定する。

robots	説明
index	検索を許可する。
noindex	検索を禁止する。
follow	リンク先を辿ることを許可する。
nofollow	リンク先を辿ることを禁止する。
nosnippet	ページに対して文字形式のスニペットを表示しない。
max-snippet:[`number`]	ページに対して表示するスニペットの最大文字数を設定する。
max-video-preview:[`number`]	動画再生プレビューの最長再生時間（秒）を設定する。
max-image-preview:[`setting`]	ページ内の画像がプレビューで表示されるときの最大サイズを指定する。 "none"、"standard"、"large"のいずれか。

検索ロボットに対する指示は紳士協定である。つまり、検索ロボットが指示通りに振舞うかどうかの保証は無い。

<meta name="robots" content="noindex,nofollow">

Google検索におけるコンテンツのプレビューについて詳しくは次で確認できる。

Google 検索におけるコンテンツのプレビューをもっと制御できるようになります

viewport

Apple iPhone用Safariの表示属性と値を指定する。表示オプションはカンマで区切って複数の値を指定することもできる。他のスマートフォン用ブラウザでもサポートされている場合がある。

viewport
viewport	初期値	説明
width	960px	表示領域の横幅
height	widthとのアスペスト比から計算	表示領域の縦幅
initial-scale	1	ページが最初に読み込まれた時の拡大率
minimum-scale	0.25	最小縮小倍率 (0 < minimum-scale ≤ 10)
user-scalable	yes	ユーザに拡大縮小を許可するか否か

ビューポートの横幅をデバイスの横幅に合わせる。

<meta name="viewport" content="width=device-width">

ビューポートの最小倍率を1にする。

<meta name="viewport" content="minimum-scale=1">

ユーザにズーム操作を許可しない。

<meta name="viewport" content="user-scalable=no">

http-equiv

HTTP応答ヘッダ名を指定する。

http-equiv属性
値	説明
Content-Type	コンテンツタイプ
Content-Script-Type	基準となるスクリプトのMIMEタイプ
Content-Style-Type	基準となるスタイルシートのMIMEタイプ
Cache-Control	Webブラウザのページキャッシュを制御する。
Expires	Webブラウザのページキャッシュの有効期限を指定する。
imagetoolbar	WebブラウザがInternet Explorerの場合、イメージツールバーを表示するか否か
Pragma	Webブラウザのページキャッシュを制御する。
refresh	指定時間経過後にページを自動更新する
set-cookie	Cookieに値を設定する。
X-UA-Compatible	WebブラウザがInternet Explorerの場合、表示するモードを指定する。

http-equiv属性に指定した値によって、content属性に指定する内容が異なる。

Content-Type

MIMEタイプと文字セットを指定する。MIMEタイプと文字セットは "text/html; charset=utf-8" のようにセミコロン記号で区切って指定する。

META要素のcontent属性で文字セットを指定しなくても、ブラウザが文字セットを自動判定する。しかし、間違った判定を行うこともあるので、なるべく指定した方がよい。

<title>タグで文書のタイトルに日本語を使う場合、<title>タグが出現するより前の位置で <meta> タグにより文字セットを指定しておく必要がある。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Content-Script-Type

基準となるスクリプトのMIMEタイプを指定する。スクリプトにJavaScriptを使用する場合、text/javascriptと指定する。

<meta http-equiv="Content-Script-Type" content="text/javascript">

HTML5ではスクリプトのMIMEタイプが「text/javascript」なので、上記の記述は不要である。

Content-Style-Type

基準となるスタイルシートのMIMEタイプを指定する。スクリプトにCSSを使用する場合、text/cssと指定する。

<meta http-equiv="Content-Style-Type" content="text/css">

HTML5ではスタイルシートのMIMEタイプが「text/css」なので、上記の記述は不要である。

Content-Style-Type

基準となるスタイルシートのMIMEタイプを指定する。スクリプトにCSSを使用する場合、text/cssと指定する。

<meta http-equiv="Content-Style-Type" content="text/css">

HTML5ではスタイルシートのMIMEタイプが「text/css」なので、上記の記述は不要である。

Cache-Control

Webブラウザのページキャッシュ制御を指定する。

ページをWebブラウザにキャッシュさせない例を次に示す。

<meta http-equiv="Cache-Control" content="no-cache">

Expires

Webブラウザのページキャッシュ有効期限を指定する。

キャッシュの有効期限を指定する例を次に示す。

<meta http-equiv="Expires" content="Sat, 26 Oct 2013 11:39:00">

キャッシュの有効期限を秒数で指定する例を次に示す。

<meta http-equiv="Expires" content="3600">

ページをWebブラウザにキャッシュさせないようにするには、キャッシュの有効期限を0に指定することでも実現できる。

<meta http-equiv="Expires" content="0">

imagetoolbar

WebブラウザがInternet Explorerの場合、イメージツールバーを表示する（デフォルトの動作）。

<meta http-equiv="imagetoolbar" content="true">

<meta http-equiv="imagetoolbar" content="yes">

WebブラウザがInternet Explorerの場合、イメージツールバーを表示しない。

<meta http-equiv="imagetoolbar" content="false">

<meta http-equiv="imagetoolbar" content="no">

Pragma

ページをWebブラウザにキャッシュさせない。

<meta http-equiv="Pragma" content="no-cache">

http-equiv="refresh"

3秒後にページをリフレッシュ（更新）する。

<meta http-equiv="refresh" content="3">

3秒後に別のページを表示する。

<meta http-equiv="refresh" content="3; URL=https://segakuin.com/html/">

set-cookie

Cookieに値を設定する。

<meta http-equiv="set-cookie" content="foo=bar; domain=segakuin.com; path=/; secure">

X-UA-Compatible

WebブラウザがInternet Explorerの場合、Internet Explorer 5互換モードでコンテンツを表示する。。

<meta http-equiv="X-UA-Compatible" content="IE=IE5">

WebブラウザがInternet Explorerの場合、Internet Explorer 7の標準モードでコンテンツを表示する。

<meta http-equiv="X-UA-Compatible" content="IE=IE7">

WebブラウザがInternet Explorerの場合、Internet Explorer 8の標準モードでコンテンツを表示する。

<meta http-equiv="X-UA-Compatible" content="IE=IE8">

WebブラウザがInternet Explorerの場合、可能な限り最新の標準モードでコンテンツを表示する。

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

サンプル

META 要素の使用例を次に示します。

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="imagetoolbar" content="false">
  <meta name="author" content="YAJIMA Maimi">
  <meta name="description" content="このページでは、HTMLのMETAタグについて説明しています。">
  <meta name="keywords" content="HTML,META">
  <meta name="robots" content="noindex,nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

OGP (Open Graph Protocol)

OGPとはOpen Graph Protocolの略称で、SNSにWebページの内容を伝えるためのプロトコルである。

OGPを設定しておくと、WebページがTwitterやFacebookなどのSNSでシェアされたときにタイトルや説明文、アイキャッチ画像が意図したとおりに表示されるようになる。

OGPの使い方

HTML5の場合、OGPを使うにはHTMLタグのprefix属性を次のように指定する。

<html prefix="og: http://ogp.me/ns#">

OGPメタタグ一覧

種類	説明
og:locale	ページのロケール
og:locale:alternate	ページのロケール（複数ある場合）
og:title	ページのタイトル
og:type	ページの種類
og:url	ページのURL
og:image	ページのサムネイル画像
og:image:alt	サムネイル画像の説明文
og:site_name	サイト名
og:description	ページの説明文
og:email	連絡先の電子メールアドレス
og:phone_number	連絡先の電話番号
og:fax_number	連絡先のFAX番号
og:postal-code	郵便番号
og:country-name	国名
og:region	都道府県
og:locality	市区町村
og:street-address	番地
og:latitude	緯度
og:longitude	経度
twitter:card	Twitterのカード形式
twitter:site	TwitterのアカウントID

Twitterではページをシェアしたときの表示画面を確認するツールを提供している。

Card validator

開発者向けFacebookでは、OGPの設定が正しいか確認するデバッガーを提供している。

デバッガー - 開発者向けFacebook

og:locale

og:localeにはページのロケールを指定する。

ロケールとは言語と地域を組み合わせた文字列である。

<meta property="og:locale" content="ja_JP">

og:locale:alternate

ページが複数のロケールをサポートしている場合、複数のog:locale:alternateでロケールを指定する。

<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale:alternate" content="en_GB">
<meta property="og:locale:alternate" content="en_CA">

og:title

og:titleにはWebページがSNSでシェアされたときのタイトルを指定する。

og:titleを指定しなかった場合は<title>に指定したタイトルが表示される。

<meta property="og:title" content="ページのタイトル">

og:type

og:typeにはページの種類を指定する。

og:typeに指定できるページの種類を次に示す。

ページの種類	説明
article	ブログの記事
blog	ブログのトップページ
website	Webサイト

<meta property="og:type" content="article">

og:url

og:urlにはページのURLを指定する。

URLは絶対パスで指定し、パラメータは付けない。

<meta property="og:url" content="https://segakuin.com/html/meta.html">

og:image

og:imageにはページのアイキャッチ画像を指定する。

OGP は外部のサイトから参照される情報であるため、画像の URL は相対パスではなく、絶対パスで指定する必要がある。ただし、指定する画像はサイト内の画像である必要はない。

og:imageで画像を指定しなかった場合は、ページ内で使用されている画像から無作為に選ばれて表示される。

<meta property="og:image" content="https://segakuin.com/img/ogp.png">

OGPの画像について、FacebookやTwitterでは画像の縦横比率として 1:1.91 を推奨している。具体的には次のサイズである。

335px × 640px
376px × 720px
502px × 960px
630px × 1200px
670px × 1280px
1005px × 1920px

og:image:alt

og:image:altにはアイキャッチ画像の説明文を指定する。

<img>のalt属性に相当する。

<meta property="og:image:alt" content="画像の説明文">

og:site_name

og:site_nameにはサイト名を指定する。

<meta property="og:site_name" content="SE学院">

og:description

og:descriptionにはページの説明文を指定する。

<meta property="og:description" content="ページの説明文">

og:email

og:emailには連絡先の電子メールアドレスを指定する。

<meta property="og:email" content="mail@example.com">

og:phone_number

og:phone_numberには連絡先の電話番号を指定する。

twitter:card

TwitterはURLを含んだツイートに、そのページのタイトルや概要、画像がカード形式で表示される。

このカードには4種類の形式があり、twitter:cardで指定できる。

カード	説明
summary	一般的な表示形式
summary_large_image	summaryよりも画像を大きく表示する
photo	画像を大きく表示する
gallery	複数枚の画像を表示する
player	動画サイト用
app	アプリ用

<meta name="twitter:card" content="summary_large_image">

twitter:site

TwitterのアカウントIDを指定する。

<meta name="twitter:site" content="@ghg02770">

参考文献

WHATWG (2021) "The meta element" HTML Living Standard

Google (2021) Google がサポートしているすべてのメタタグ