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

目次

METAタグの構文

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

<META [attribute=value ...]></META>
<META [attribute=value ...]>

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

<meta [attribute=value ...]></meta>
<meta [attribute=value ...] />
開始タグの省略 不可
終了タグの省略
内容モデル なし

METAタグの属性

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

属性 説明
charset 文字エンコーディング
dir 文書の方向
lang 言語
name メタ情報名
http-equiv HTTP応答ヘッダ名
content 関連情報

charset HTML5

charset属性には、HTMLの文字エンコーディングを指定する。

<meta charset="utf-8"/>

dir

dir属性には文書の方向を指定する。

lang

lang属性には言語を指定する。

name

name属性にはメタ情報名を指定する。

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

author

authorには著者の名前を記述する。

<meta name="author" content="Horiuchi Marina">

description

descriptionにはページの説明文を記述する。

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

format-detection

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

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

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

keywords

keywordsには関連するキーワードを指定する。カンマで区切って複数のキーワードを指定できる。

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

robots

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

robots 説明
index 検索を許可する。
noindex 検索を禁止する。
follow リンク先を辿ることを許可する。
nofollow リンク先を辿ることを禁止する。

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

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

viewport

viewportには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">

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の場合、表示するモードを指定する。

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">

Content-Style-Type

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

<meta http-equiv="Content-Style-Type" content="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の場合、イメージツールバーを表示するか否かを指定する。

imagetoolbar 説明
true イメージツールバーを表示する。(規定値)
yes
false イメージツールバーを表示しない。
no
<meta http-equiv="imagetoolbar" content="no">

Pragma

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

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

refresh

refreshを指定すると、指定時間経過後にページが更新(リフレッシュ)される。

contentには秒数を指定する。更新後に別のページを表示するには、URLも指定する。

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

set-cookie

Cookieに値を設定する。

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

X-UA-Compatible

WebブラウザがInternet Explorerの場合、表示するモードを指定する。

IE 説明
IE5 Internet Explorer 5互換モードでコンテンツを表示する。
IE7 Internet Explorer 7の標準モードでコンテンツを表示する。
IE8 Internet Explorer 8の標準モードでコンテンツを表示する。
edge 可能な限り最新の標準モードでコンテンツを表示する。
<meta http-equiv="X-UA-Compatible" content="IE=IE7">

content

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

DTD

HTML の各要素は DTD によって定義されています。 META 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

サンプル

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、Google+などの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/images/example.jpg">

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">
スポンサーリンク