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ではページをシェアしたときの表示画面を確認するツールを提供している。
開発者向けFacebookでは、OGPの設定が正しいか確認するデバッガーを提供している。
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 がサポートしているすべてのメタタグ