文書のメタデータを表す

meta

< meta 【メタ】 属性="属性値" >

meta要素は文書におけるさまざまなメタデータを表します。メタデータとは、文書の文字コードや文書の概要、キーワードなどの文書に関する情報のことを表します。1つのmeta要素には、name、http-equiv、charset属性、およびマイクロデータのitemprop属性を1つのみ指定できます。Facebookなど向けにOGP（OpenGraphProtocol）情報を付与する仕組みにも使用されます。

カテゴリー メタデータコンテンツ
コンテンツモデル 空
使用できる文脈 ・charset属性が指定されている場合、またはhttp-equiv属性が文字コードの指定のために付与されている場合はhead要素内
・http-equiv属性が文字エンコードの指定以外のために付与されている場合はhead要素内、またはhead要素の子要素であるnoscript要素の子要素として
・name属性が指定されている場合はメタデータコンテンツが期待される場所
・itemprop属性が付与された場合はフローコンテンツ、またはフレージングコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

charset 【キャラクター・セット】

head要素内に記述することで、文書の文字コードを指定します。2つ以上の文字コードの指定を文書内に入れることはできません。

content 【コンテント】

name、http-equiv属性に必ず併記する属性となり、それらの属性のメタデータを指定します。

http-equiv 【エイチティーティーピー・イクイヴァレント】

以下の属性値を指定すると、文書の処理の方法や扱いを指定できます。

content-language文書の記述言語を指定するために使用しますが、この指定は非推奨です。代わりにlang属性を使用しましょう。
content-type文字コードを指定するために使用します。
default-style優先スタイルシートを指定するために使用します。
refresh自動更新やリダイレクトを指定するために使用します。
set-cookieCookieを設定するために使用しますが、この指定は非推奨です。代わりにHTTPヘッダーを利用すべきです。

name 【ネーム】

要素に名前を付与することでメタデータの種類を示し、内容をcontent属性で表します。

グローバル属性 【】

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

使用例日本語のHTML文書の基本構文を記述する

<meta name="author">
<meta name="description">
<meta name="keywords">

HMTL5では、meta要素におけるname属性について以下の5つのキーワードが標準的な属性値として定義されています。指定した属性値の内容は、併記するcontent属性で記述します。

name属性値役割
application-name文書がWebアプリケーションを利用している場合に、アプリケーション名を記述するために指定します。１つの文書には1つだけ記述できます。
author文書の著作者の名前を記述するために指定します。
description文書の概要を記述するために指定します。検索エンジンのクローラーに読み取られ、検索結果などにも表示される情報です。１つの文書に1つだけ記述できます。
generator文書がソフトウェアによって記述・作成されている場合に、ソフトウェア名を記述するために指定します。人の手によって作成された場合は必要ありません。
keywords文書の内容を表すキーワードを記述するために指定します。content属性の値には、カンマ（,）区切りで複数のキーワードを入力できます。

以下の例では、author、description、keywordsにおける各content属性の内容を記述しています。 

<meta name="author" content="できるネット編集部">
<meta name="description" content="「できるネット」は、最新のデジタルデバイスやソフトウェア、Webサービスなどの使い方やノウハウを解説する情報サイトです。">
<meta name="keywords" content="パソコン,スマートフォン,ソフトウェア,Webサービス,使い方,解説">

使用例文書に対するクローラーのアクセスを制御する

<meta name="robots">

name属性にrobotsを指定することで、検索エンジンのクローラーによるWebページのインデックスを拒否したり、Webページ内のリンク先を探索されないようにしたりできます。例えば、以下のようにcontent属性の値に、カンマ（,）で区切ってnoindex、nofollowを指定すると、この文書のWebページは、name="robots"の指定に対応した検索エンジンのクローラーからは内容を確認できなくなります。 

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

使用例スマートフォン向けに文書の表示方法を指定する

<meta name="viewport">

iPhoneなどのスマートフォンやタブレット端末のブラウザーは、多くの場合、幅980pxでWebページを表示しようとします。name="viewport"を指定して、以下の表中のcontent属性の値と、役割となる数値またはキーワードをイコール（=）でつなげて指定することで、これらのブラウザーでのWebページの表示方法を制御できます。name="viewport"はiOSのSafariが実装した独自属性でしたが、現在では多くのブラウザーが対応しています。なお、Webページの表示に関わる内容であることから、今後はCSSの標準仕様となる予定で策定が進められています。

content属性値役割
initial-scaleWebページが最初に読み込まれたときの拡大・縮小率を指定します。初期状態ではWebページを端末画面に合わせます。指定できる値の範囲はminimum-scale、およびmaximum-scaleの値の範囲となります。
width表示する幅を200px～10000pxの数値で指定します。初期値は980pxです。「device-width」を指定することで、端末の画面の幅を指定できます。
height表示する高さを223px～10000pxの数値で指定します。「device-height」を指定することで、端末の画面の高さを指定できます。
user-scalable閲覧者にWebページの拡大・縮小を許可するかをyes、noで指定します。初期値はyesとなっており、拡大・縮小が可能です。
minimum-scale許可する拡大率の下限を0～10の数値で指定します。初期値は0.25です。
maximum-scale許可する拡大率の上限を0～10の数値で指定します。初期値は1.6です。

以下の例では、width=device-widthを指定することで、端末の画面の幅に合わせて表示されます。同時に、Webページが表示される倍率は1を指定しています。 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用例ページを更新、またはリダイレクトさせる

<meta http-equiv="refresh">

http-equiv属性にrefreshを指定すると、content属性の値で指定した形式で、Webページが更新、リダイレクトされます。ただし、閲覧者の意に反した強制的な再読み込みは避けましょう。また、リダイレクトについては、対応しない環境のために、リダイレクト先へのリンクも併せて表示するなどの配慮が必要です。 

<!--ページ更新の例　300秒ごとに更新 -->
<meta http-equiv="refresh" content="300">
<!--ページリダイレクトの例　30秒でnew.htmlにリダイレクト -->
<meta http-equiv="refresh" content="30; URL=new.html">

関連記事