meta要素とは？文書におけるメタデータを表す【HTML】

meta要素は、メタデータという文書に関する様々な情報を表し、ブラウザや検索エンジンに知らせるためのタグのこと。

メタデータには文書の概要やキーワード、文字コードなどがあります。

meta要素には、name・http-equiv・charset・itempropなどの属性を指定できます。

name属性

name属性は、要素に名前をつけてデータの種類を示します。

どのようなものがあるか、順番に確認していきたいと思います。

ちなみにcontent属性を使って、name属性のメタデータを記述していきます。

ページの概要を指定する description

meta descriptionは文書の概要を指定するために記述します。

検索エンジンのクローラーとよばれるロボットにも読み取られ、検索結果に表示されたり、RSSでコンテンツを配信するときにも配信先サイトで表示されるので指定しておいたほうがいいです。

だいたい50〜100文字程度を目安にすればいいかなと思います。

キーワードを指定する keyword

meta keywordsは文書の内容を表すキーワードを指定するためのものです。

カンマ（,）区切りで複数のキーワードを記述することができますが、キーワードをむやみやたらに詰め込みすぎないようにしましょう。

検索エンジンのクローラーのアクセスを制御する robots

name属性にrobotsを指定することによって、検索エンジンのクローラーによるWebページのインデックスをさせなくしたり、Webページ内のリンク先へのリンクジュース（ページの評価）を無効化したりできます。

必要な設定ではありますが、インデックスさせたいページなのに、間違えてnoindexを指定してしまったりしてしまわないように気をつけなければいけません。

著作者を指定する author

meta authorは文書の著作者を表すために指定します。

個人名や企業、団体名などを記述すればいいと思います。

アプリケーション名を指定する application-name

文書がWebアプリケーションを利用している場合、そのアプリケーション名を指定するために使います。

文書を作成したソフトウェア名を指定する generator

文書がツールやソフトウェアによって記述・作成されている場合、meta generatorでそのツール名もしくはソフトウェア名を指定します。

文書の表示方法を指定する viewport

viewportはスマートフォン向けに文書の表示方法を指定するために使います。

スマートフォンやタブレット端末などのブラウザは、980pxの幅でWebページを表示しようとするのですが、以下のような値を指定することで、ブラウザでのWebページの表示方法を制御することができます。

ちなみにこの属性はもともとiOSのSafariが実装した独自の属性だったんですけど、今では多くのブラウザが対応しています。

viewportで設定できるcontent属性の値

viewportで設定できるcontent属性の値は以下のようなものがあります。

• width
• height
• initial-scale
• user-scale
• minimum-scale
• maximum-scale

width

表示する幅を200px〜1000pxの数値で指定することができ、初期値は980pxとなっています。

端末の画面の幅を指定するときはdevice-widthを設定します。

height

表示する高さを223px〜10000pxの数値で指定することができます。

端末の画面の高さを指定するときは、device-heightを設定します。

initial-scale

Webページが最初に読み込まれたときの拡大・縮小率を指定するもので、初期状態ではWebページを端末画面に合わせるようになっています。

なお指定できる値の範囲はminimum-scaleおよびmaximum-scaleの値の範囲です。

user-scale

閲覧者にWebページの拡大・縮小を許可するかyes,noで指定することができ、初期値はyesとなっています。

minimum-scale

許可する拡大率の下限を0〜10の数値で指定することができ、初期値は0.25です。

maximum-scale

許可する拡大率の上限を0〜10の数値で指定することができ、初期値は1.6です。

http-equiv属性

http-equiv属性は、文書の処理方法や扱いを指定することができます。

よく使われるものを紹介します。

文字コードの指定

文字コードの指定は基本的にこのように記述しますが、その際にcharset属性を使って文字コードを指定します。

また、<title>〜</tile>で日本語を使う場合もあると思うので、<title>タグよりも前に<meta>タグを記述する必要があります。

ページを更新・リダイレクトさせる refresh

regreshを使って、Webページの更新をしたり、リダイレクトさせたりすることができます。

たとえばこのような感じです。

60秒ごとにページを更新する。

30秒でkubo.htmlページへリダイレクト。といった意味になります。

ただし、ページを閲覧している人の意に反するような強制的な再読み込みなどは避けるべきですし、リダイレクトに関しては、リダイレクト先へのリンクもあわせて表示させる（非対応環境のために）など配慮する必要があります。

meta要素まとめ

meta要素は基本的にhead要素内に記述するので、直接Webページにコンテンツとして表示されるものではないですが、文書の情報を検索エンジンに伝えるという意味でも、とても重要なものです。

他にもキャッシュを制御するものや、文書の記述言語の指定、Cookieの設定、優先スタイルシートの設定などたくさんありますが、よく使うものは覚えておくようにしましょう。