2026年4月16日
HTML meta タグとは？
HTMLの <head> の中に書く metaタグ は、ページの「設定情報」をブラウザや検索エンジンに伝えるタグです。画面には表示されませんが、SEOやスマホ対応に欠かせません。
SEO（エスイーオー）とは、Googleなどの検索エンジンでページが上位に表示されやすくなる工夫のことです。metaタグを正しく設定することで、検索結果に正しく表示されやすくなります。
必須のmetaタグ
charset：文字コードの指定
<meta charset="UTF-8">文字化けを防ぐために必ず書きます。UTF-8 は日本語を含む多くの文字に対応した文字コードです。
viewport：スマホ対応
<meta name="viewport" content="width=device-width, initial-scale=1.0">スマホで正しく表示するために必要です。これがないとスマホでパソコン用の幅で表示されてしまいます。
description：ページの説明文
<meta name="description" content="HTMLとCSSの基礎をゼロから学べる中高生向けプログラミング入門サイトです。">Googleの検索結果に表示される説明文です。120字以内で、ページの内容を具体的に書きましょう。
🔥 HTMLアクセシビリティで実践してみましょう。
OGP：SNSでシェアされたときの表示
OGP（オープングラフプロトコル）は、SNSでページがシェアされたときに表示されるタイトル・説明・画像を指定するmetaタグです。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:url" content="https://example.com/page/">💡 HTMLフォームの作り方で基礎を確認できます。
基本的なHTMLの骨組み（metaタグ込み）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明文（120字以内）">
<title>ページのタイトル | サイト名</title>
</head>
<body>
<!-- ページの内容 -->
</body>
</html>🔗 あわせてブロック要素とインライン要素もチェックしてみましょう。
metaタグの種類と役割
metaタグにはさまざまな種類があります。よく使うものを詳しく説明します。
charset（文字エンコーディング）
meta charset="UTF-8"は、ページで使う文字コードを指定します。UTF-8は世界中の文字（日本語、英語、中国語など）を扱える文字コードです。これがないと日本語が文字化け（意味不明な記号の羅列）になることがあります。headタグの最初に書くのがルールです。
viewport（ビューポート）
meta name="viewport"は、スマホでの表示を制御します。content="width=device-width, initial-scale=1.0"と書くと、画面幅に合わせてページが表示されます。これがないと、スマホでページを開いたときにデスクトップ版が縮小表示されて、文字が小さくなります。
description（ページの説明）
meta name="description"は、ページの内容を短く説明するテキストです。検索結果でタイトルの下に表示されます。120字以内で、ページの内容と対象読者を具体的に書きましょう。
OGPタグ（SNS共有用）
SNSでページのURLを共有したとき、タイトルや画像が表示されるのを見たことがありますよね。あれはOGP（Open Graph Protocol）というmetaタグで設定されています。
よく使うOGPタグは次の通りです。
- og:title：SNSに表示されるタイトル
- og:description：SNSに表示される説明文
- og:image：SNSに表示されるサムネイル画像
- og:url：ページのURL
OGPタグを設定しておくと、SNSで共有されたときに見栄えが良くなります。クリック率も上がるので、設定しておくのがおすすめです。
metaタグとSEOの関係
metaタグはSEO（検索エンジン最適化）にも関係します。
descriptionタグは検索結果に直接表示されます。魅力的な説明文を書くと、クリックしてもらいやすくなります。「〜を解説」「〜の方法を紹介」のように、読者が得られる情報を具体的に書きましょう。
一方、meta name="keywords"は現在のGoogleでは無視されています。昔はキーワードを列挙するmetaタグが重要でしたが、今は書いても効果がありません。書かなくて大丈夫です。
metaタグでよくあるミス
ミス1：charsetを書き忘れる
charsetがないと、ブラウザが文字コードを推測します。推測が間違うと文字化けします。必ず書きましょう。
ミス2：viewportを書き忘れる
viewportがないと、スマホで見たときにページが小さく表示されます。レスポンシブデザインを作っても、viewportがなければ意味がありません。
ミス3：descriptionが長すぎる
descriptionが長すぎると、検索結果で途中で切れてしまいます。120字以内に収めましょう。
ミス4：全ページで同じdescriptionを使う
各ページに固有のdescriptionを書きましょう。全ページ同じだと、検索エンジンがページの違いを理解できません。
ミス5：metaタグをbodyに書く
metaタグはheadタグの中に書きます。bodyタグの中に書いても認識されないことがあります。
metaタグは画面に表示されないので忘れがちですが、検索エンジンやSNSにとっては重要な情報です。ページを作ったら、必ずmetaタグも設定する習慣をつけましょう。
まとめ
- ✅ charset="UTF-8"：文字化けを防ぐ（必須）
- ✅ viewport：スマホ対応に必要（必須）
- ✅ description：検索結果に表示される説明文（120字以内）
- ✅ OGP：SNSシェア時の表示を制御する
- ✅ metaタグは
<head>の中に書く。画面には表示されない
HTMLの基礎はHTML入門で復習できます。レスポンシブデザインとviewportの関係はレスポンシブデザインの作り方を参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLで初めてのWebページを作る — 最初のHTMLページ作成
- レスポンシブデザインの作り方 — viewportとレスポンシブ
- HTMLのheadタグに書くべき内容 — head要素の全体像
- Webサイトの表示速度改善 — パフォーマンスとmeta
- HTMLで画像を表示する方法 — OGP画像の設定