meta要素とは？ページの情報を伝えるタグ

meta要素は、ページそのものには表示しない情報を、ブラウザーなどに伝えるためのタグです。文字コードや、ページの短い説明などを指定できます。

まずはこの3つ

よく使う書き方

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="ページの短い説明">
</head>

この例には、それぞれ違う役目のmeta要素が3つあります。

文字コードを伝える

<meta charset="utf-8">

文字コードは、ファイルに書かれた数字を、文字として読み取る方法です。UTF-8を指定すると、日本語などの文字を正しく読み取るための手がかりになります。ふつうはこの行をheadの早い位置に置きます。

スマートフォンの画面幅に合わせる

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

この指定は、ブラウザーにページの表示幅を端末の画面幅に合わせるよう伝えます。これだけで文字やボタンが読みやすく並ぶわけではありません。画面に合わせたレイアウトにはCSSも使います。

ページの説明を書く

<meta name="description" content="ページの短い説明">

nameに情報の種類、contentにその内容を書きます。ページの説明は検索結果などで使われることがありますが、いつも表示されるとは限りません。

タイトルや言語を指定する場所は別

ページの名前にはtitle要素を使います。ページの言語にはhtml要素のlang属性を使います。meta要素でこれらを置き換えることはできません。

<html lang="ja">
<head>
  <title>ページの名前</title>
  <meta name="description" content="ページの説明">
</head>

よくある間違い

• meta要素を書けば、その説明文がページ本文に出ると思う。本文に見せる文章はbodyに書きます。
• 文字コードの指定をページの下の方に置く。ブラウザーが文字を読み始める前に見つけられるよう、早い位置に置きます。
• nameとcontentを入れ替える。nameが情報の種類、contentが値です。

もう少し詳しく

http-equivという属性を使うmeta要素もあります。これは一部の指示をブラウザーへ渡します。サーバーから送るHTTPヘッダーと同じ働きとは限らないので、必要な場合は使える指示を確認します。

Atlasで仕様を確認する

属性ごとの条件、文字コードを決める順番、ブラウザーや支援技術での確認結果は、Yugien Atlasのmeta要素で確認できます。