HTMLの<META>タグはメタデータを記述する要素である。

METAタグの構文

HTMLの場合、タグ名や属性名は大文字でも小文字でもよい。

<META></META>

閉じタグは省略できる。

<META>

XHTMLの場合、タグ名や属性名は小文字で記述する。

<meta></meta>

閉じタグは省略できる。閉じタグを省略する方法は、XMLに従う。

<meta />

内容

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

属性

charset
charset属性には、HTMLの文字エンコーディングを指定する。
<meta charset="utf-8"/>
content
関連情報を指定する。http-equiv属性やname属性の値により指定する内容は異なる。

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

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

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

http-equiv
http-equiv属性にはHTTP応答ヘッダ名を指定する。
説明
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属性に指定する内容が異なる。

http-equiv="Content-Type"

meta要素のhttp-equiv属性に"Content-Type"を指定した場合、content属性にはMIMEタイプと文字セットを指定する。MIMEタイプと文字セットは "text/html; charset=utf-8" のようにセミコロン記号で区切って指定する。

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

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

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

http-equiv="Content-Script-Type"

meta要素のhttp-equiv属性に"Content-Script-Type"を指定した場合、content属性には基準となるスクリプトのMIMEタイプを指定する。スクリプトにJavaScriptを使用する場合、text/javascriptと指定する。

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

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

http-equiv="Content-Style-Type"

meta要素のhttp-equiv属性に"Content-Style-Type"を指定した場合、content属性には基準となるスタイルシートのMIMEタイプを指定する。スクリプトにCSSを使用する場合、text/cssと指定する。

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

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

http-equiv="Cache-Control"

meta要素のhttp-equiv属性に"Cache-Control"を指定した場合、content属性にはWebブラウザのページキャッシュ制御を指定する。

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

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

http-equiv="Expires"

meta要素のhttp-equiv属性に"Expires"を指定した場合、content属性には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">

http-equiv="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">

http-equiv="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/">

http-equiv="set-cookie"

Cookieに値を設定する。

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

http-equiv="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">

name="author"

meta要素のname属性に"author"を指定した場合、content属性には著者の名前を記述する。

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

name="description"

meta要素のname属性に"description"を指定した場合、content属性にはページの説明文を記述する。

<meta name="description" content="HTMLのMETAタグについて説明しています。">

name="format-detection"

meta要素のname属性に"format-detection"を指定した場合、content属性には連絡先をリンクに変換するかどうかを指定する。AndroidやiPhoneなどのスマホの場合、電話番号がリンクに変換されて、タップするだけで電話をかけられるようになる。

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

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

name="keywords"

meta要素のname属性に"keywords"を指定した場合、content属性には関連するキーワードを指定する。カンマで区切って複数のキーワードを指定できる。

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

name="robots"

meta要素のname属性に"robots"を指定した場合、content属性には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 検索におけるコンテンツのプレビューをもっと制御できるようになります

name="viewport"

meta要素のname属性に"viewport"を指定した場合、content属性にはApple iPhone用Safariの表示属性と値を指定する。

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

viewport 説明
width=n 表示領域の横幅。デフォルト値は980px。device-widthを指定すると、デバイスの横幅に合わせる。
height=n 表示領域の縦幅。デフォルト値はwidthと縦横比から計算される。
initial-scale=n ページが最初に読み込まれた時の拡大率。デフォルト値は1。
user-scalable={yes|no} ユーザに拡大縮小を許可するか否かをyes(規定値)又はnoで指定する。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

サンプル

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ではページをシェアしたときの表示画面を確認するツールを提供している。

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="http://itref.fc2web.com/html/meta.html">

og:image

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

画像のURLは絶対パスで指定する。指定する画像はサイト内の画像である必要はない。

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

<meta property="og:image" content="http://itref.fc2web.com/img/ogp.png">

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

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よりも画像が大きく表示される
player 動画サイト用
app アプリ用
<meta name="twitter:card" content="summary_large_image">

HTMLタグ