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 を推奨している。具体的には次のサイズである。

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 がサポートしているすべてのメタタグ