💡 この記事でわかること
- meta要素とは何か
- meta要素の基本的な書き方
- よく使うmeta要素(charset・viewport・description・robots)
- SNSシェアをきれいに見せるOGPの基礎
- 初心者がつまずきやすいポイント
1. meta要素とは？
meta要素とは、
👉 ページの内容や表示方法について、ブラウザや検索エンジンに伝えるための「メタ情報(付加情報)」を書くタグです。
画面上には表示されませんが、「このページの文字コードは何か」「スマホでどう表示すべきか」「検索結果にどんな説明文を出すか」といった、ページの裏側の設定を担っています。
💡 「サイトの名刺代わりの設定情報」をイメージすると、meta要素の役割がつかみやすいはずです。
2. meta要素の基本的な書き方
meta要素はhead要素の中に書き、閉じタグは不要です。属性で内容を指定する、自己完結型のタグです。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明文をここに書きます">
</head>基本的にはname属性(またはcharset・http-equiv属性)で「何の設定か」を指定し、content属性で「その中身」を指定する形になります。
💡 meta要素はbody要素の中には書きません。必ずhead要素の中に書くタグだと覚えておきましょう。
3. よく使うmeta要素
charset:文字コードの指定
ページの文字コードを指定します。これが正しく指定されていないと、日本語が文字化けして表示されてしまうことがあります。
<meta charset="UTF-8">👉 現在はほぼ全てのサイトでUTF-8が使われています。特別な理由がなければ、このまま書いておけば問題ありません。
viewport:スマホ表示の基準を決める
スマートフォンなどの画面でページをどう表示するかを指定します。レスポンシブデザイン(画面サイズに応じてレイアウトを変える手法)を実装する上で、ほぼ必須の設定です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-widthは「端末の画面幅に合わせる」、initial-scale=1.0は「表示倍率を100%にする」という意味です。
💡 このviewport設定を忘れると、スマホでPC向けのレイアウトがそのまま縮小表示され、文字が小さくて読めないページになってしまいます。
description:検索結果に表示される説明文
Googleなどの検索結果画面で、タイトルの下に表示される説明文(スニペット)を指定します。クリックするかどうかの判断材料になるため、SEO(検索エンジン最適化)の観点でも重要です。
<meta name="description" content="このページでは〇〇について解説しています。">👉 ページごとに内容の異なる説明文を書くのが基本です。全ページ共通の文章にしてしまうと、検索エンジンからの評価が下がる原因になります。
robots:検索エンジンへのインデックス指定
検索結果に表示させたくないページ(制作中のページなど)がある場合に使います。
<meta name="robots" content="noindex">noindexを指定すると、検索エンジンがそのページを検索結果に載せなくなります。何も指定しない場合は「インデックスしてよい」がデフォルトの扱いです。
4. SNSシェアをきれいに見せるOGP
X(旧Twitter)やFacebookでページのURLをシェアした際に、タイトルや画像がカード状に表示されるのを見たことがあるかもしれません。これはOGP(Open Graph Protocol)というmeta要素の仕組みによるものです。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/image.png">👉 OGPのmeta要素はname属性ではなくproperty属性を使う点が、他のmeta要素と異なる注意点です。
5. 初心者がつまずきやすいポイント
- viewportの書き忘れ:スマホでレイアウトが崩れる、文字が小さすぎる原因の多くはこれです
- meta要素をbody要素の中に書いてしまう:必ずhead要素の中に書きます
- 全ページ同じdescriptionにしてしまう:ページごとの内容に合わせて書き分けましょう
- OGPだけproperty属性、他はname属性という違いを混同する:属性名を間違えると値が読み取られません
まとめ
meta要素は画面には表示されませんが、文字コードの指定・スマホ対応・検索結果での見え方・SNSシェア時の見た目まで、ページの土台を支える重要な役割を持っています。
まずはcharset・viewport・descriptionの3つから、HTMLファイルのhead要素に書く習慣をつけてみましょう。