meta タグ - HTML リファレンス

どんなタグ？
ページの情報を<head>内に記述するときに、
このmetaタグを使う。

コードサンプル

<head>
  <meta charset="UTF-8″>
  <meta http-equiv=" X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0″>
  <meta name=" description" content="asideタグは、補足コンテンツを伝えるためのHTMLの要素です。">
  <meta name="robots" content="noindex,nofollow">
  <title>そのページのタイトル</title>
</head>

<meta> タグは meta information (メタインフォメーション)の略で、 <meta>の属性に書かれた情報を、検索エンジンやブラウザへ伝えるためのタグです。

どのカテゴリに属しているの？: meta要素はメタデータ・コンテンツというコンテンツ・カテゴリに属しているタグです。
梱包できるタグは？: meta要素は、空要素のため梱包できるタグをありません。

ページの情報を、検索エンジンやブラウザへ伝えるためのタグです。

どうやって使うの？
head~headの中に配置します。

meta タグは<head> 〜 </head>の中に、属性を指定して <meta> を配置します。
指定する情報によって属性を使い分ける必要があり、文字エンコーディングの指定には、charset 属性を使い、その他の情報は、name 属性や、charset 属性を使って指定します。

文字エンコーディングを指定する場合の使い方

<meta charset="文字エンコーディング名">

コードサンプル

<head>
  <meta charset="UTF-8″>
</head>

指定する情報がname属性の場合の使い方

<meta name="メタデータ名" content="name属性で指定した情報の設定内容">

コードサンプル

<head>
  <meta name="description" content="meta要素について説明しているページです。">
</head>

指定する情報がhttp-eqive属性の場合の使い方

<meta http-eqive="メタデータ名" content="http-eqive属性で指定した情報の設定内容">

コードサンプル

<head>
  <meta http-eqive="X-UA-Compatible" content="IE=edge">
</head>

どこでも使えるの？: headタグ内でのみ使えます。
気をつけることは？: name属性、http-equiv属性を指定する際には、必ずcontent属性とセットで利用しなければなりません。

ユーザーからは見えない情報ですが、大事な情報なので記述するのを忘れないようにしましょう。

使える属性は？
グローバル属性だけではなく
name属性などが使えます。

<meta>タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。

`charset`(チャーセット) 属性

HTMLファイルがどの文字コードで保存されているかを指定する属性。

属性値

UTF-8: 「UTF-8」で保存されたHTMLファイル
Shift_JIS: 「シフトJIS」で保存されたHTMLファイル
EUC-JP: 「EUC」で保存されたHTMLファイル

`name` (ネーム) 属性

name属性は、このページに関する情報の種類を指定する属性です。name属性の属性値にその情報の種類を指定し、値はcontent属性で定義します。なお、charset属性または、http-equiv属性とは同時に使用できません。

属性値

application-name

アプリケーション名を記述するために指定します。content属性には、アプリケーション名を定義します。

author

このページの作者名を指定できます。content属性には、作者名を定義します。

description

このページの紹介文を指定できます。content属性には、紹介文を定義します。

generator

このページの作成したソフト名を指定できます。content属性には、ソフト名を定義します。

keywords

このページに関連するキーワードを指定できます。content属性には、キーワードを「,（カンマ）」区切りで定義します。

robots

検索エンジンのクローラーに対しての情報を指定できます。content属性には、以下の値を「,（カンマ）」区切りで定義します。

“index”：インデックス作成を許可
“noindex”：インデックス作成を拒否
“follow”：リンクをたどることを許可
“nofollow”：リンクをたどることを拒否

viewport

モバイルデバイスの初期の表示領域を指定できます。content属性には、以下の値を「,（カンマ）」区切りで定義します。

“width=表示領域の横幅”： 200px〜10000pxの範囲または、device-widthで指定。（初期値：980px）
“height=表示領域の高さ”： 233px〜10000pxの範囲または、device-heightで指定。（初期値：自動）
“initial-scale＝初期のズーム倍率”： [minimum-scale, maximum-scale]の範囲で指定。
“minimum-scale=最小の倍率”： 0〜10の範囲で指定。（初期値：0.25）
“maximum-scale=最大の倍率”： 0〜10の範囲で指定。（初期値：1.6）
“user-scalable=ズームの操作”： yesまたは、noで指定（初期値：yes）

`http-equiv`(エイチティーティーピーイクイヴ) 属性

http-equiv属性は、サーバーやユーザーエージェントの動作に関する情報の種類を指定する属性です。http-equiv属性の属性値にその情報の種類を指定し、値はcontent属性で定義します。なお、charset属性または、name属性とは同時に使用できません。

属性値

content-language

ページのデフォルト言語を指定できます。content属性には、言語コードを定義します。主な言語コードは以下の通りです。

“ja”：日本語
“en”：英語
“zh”：中国語
“ko”：韓国語

（”content-language”の代わりに、html要素にlang属性で指定することが推奨されています。）

content-type

ドキュメントの種類を指定できます。content属性には、MIMEタイプと文字コードを定義します。なお、HTML5より前のHTMLでは、この属性で文字コードの指定を行います。

“text/html; charset=UTF-8″： UTF-8
“text/html; charset=Shift_JIS”：シフトJIS
“text/html; charset=EUC-JP”： EUC

default-style

デフォルトスタイルシートのグループ名を指定できます。content属性には、要素に指定したグループ名を定義します。

refresh

ページのリロードやリダイレクトに関する情報を指定します。content属性には、リロードまたはリダイレクトするまでの秒数と、リダイレクトの場合はリダイレクト先を定義します。

“秒数”：リロード
“秒数; url=リダイレクト先のURL”：リダイレクト

set-cookie

ページのcookieを指定することができます。

X-UA-Compatible

Internet Explorerで互換表示させないように指定することができる。content属性には、IEのどのバージョンの標準モードで表示するかを、”IE=バージョン番号” のように定義します。

“IE=edge”：最新バージョン
“IE=◯ （バージョン番号）”：そのバージョンの標準モード
“IE=EmulateIE◯ （バージョン番号）”：そのバージョンのの記述に合わせた表示モード

（「;（セミコロン）」で区切ることで複数指定可能。複数指定した際は、最新のモードを優先する）

`content`(コンテント) 属性

この属性はhttp-equiv属性または、name属性で指定した情報の種類に対する内容を指定する属性です。

属性値: http-equiv属性または、name属性で指定した情報の種類に対する内容

属性によって様々な指定ができます。

サンプルが見たい
<meta>タグを使ったサンプルを
いくつか紹介。

<meta> タグを使ったサンプルを紹介します。

charset属性を使ったサンプル

コードサンプル

<meta charset="UTF-8″>

name属性とcontent属性を使ったサンプル

コードサンプル

<meta name="description" content="メタタグを説明するページです。">

http-equiv属性とcontent属性を使ったサンプル

コードサンプル

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

SNS用にOGPというデータを付与したサンプル

コードサンプル

<meta property="og:site_name" content="codehero">
<meta property="og:title" content="metaタグ">
<meta property="og:type" content="article">
<meta property="og:url" content="https://codehero.shibajuku.net/html/meta/">
<meta property="og:image" content="https://codehero.shibajuku.net/html/meta/thumbnail.jpg">
<meta property="og:description" content="metaタグはページの情報を検索エンジンやブラウザに伝えるためのHTMLの要素です。">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitterのユーザー名”>
<meta property="fb:app_id" content="facebookのappID">

指定したい内容によって属性を使い分けよう。

対応ブラウザは？
基本的にどのブラウザでも大丈夫。

Internet Explorar: Internet Explorar あり ~
Edge: Edge 12 ~
Google Chrome: Google Chrome あり ~
Firefox: Firefox 1 ~
Safari: Safari あり ~
Opera: Opera あり ~

どのブラウザでも大丈夫です。

CodeHero

Search

<meta>

どんなタグ？
ページの情報を<head>内に記述するときに、
このmetaタグを使う。

どうやって使うの？
head~headの中に配置します。

使える属性は？
グローバル属性だけではなく
name属性などが使えます。

`charset`(チャーセット) 属性

`name` (ネーム) 属性

`http-equiv`(エイチティーティーピーイクイヴ) 属性

`content`(コンテント) 属性

サンプルが見たい
<meta>タグを使ったサンプルを
いくつか紹介。

charset属性を使ったサンプル

name属性とcontent属性を使ったサンプル

http-equiv属性とcontent属性を使ったサンプル

SNS用にOGPというデータを付与したサンプル

対応ブラウザは？
基本的にどのブラウザでも大丈夫。

About サロンメンバーで作った
リファレンスサイト

どんなタグ？ ページの情報を<head>内に記述するときに、このmetaタグを使う。

どうやって使うの？ head~headの中に配置します。

使える属性は？ グローバル属性だけではなくname属性などが使えます。

charset(チャーセット) 属性

name (ネーム) 属性

http-equiv(エイチティーティーピー イクイヴ) 属性

content(コンテント) 属性

サンプルが見たい <meta>タグを使ったサンプルをいくつか紹介。

charset属性を使ったサンプル

name属性とcontent属性を使ったサンプル

http-equiv属性とcontent属性を使ったサンプル

SNS用にOGPというデータを付与したサンプル

対応ブラウザは？ 基本的にどのブラウザでも大丈夫。

About サロンメンバーで作った リファレンスサイト

どんなタグ？
ページの情報を<head>内に記述するときに、
このmetaタグを使う。

どうやって使うの？
head~headの中に配置します。

使える属性は？
グローバル属性だけではなく
name属性などが使えます。

`charset`(チャーセット) 属性

`name` (ネーム) 属性

`http-equiv`(エイチティーティーピーイクイヴ) 属性

`content`(コンテント) 属性

サンプルが見たい
<meta>タグを使ったサンプルを
いくつか紹介。

対応ブラウザは？
基本的にどのブラウザでも大丈夫。

About サロンメンバーで作った
リファレンスサイト