メタタグ

Meta Tag

web development beginner

HTMLのhead内に記述する、ページの情報（文字コード・説明文・キーワード・SNS表示設定など）をブラウザや検索エンジンに伝えるためのタグのこと。

概要（サマリー）

メタタグとは、HTMLの <head> 内に記述する、ページに関する情報をブラウザや検索エンジンに伝えるためのタグのことである。ページ本文には表示されないが、「このページの文字コードは何か」「検索結果にどんな説明文を表示するか」「SNSでシェアされたときにどんな画像を使うか」といった重要な情報を届けるために使われる。SEOやSNSでの表示に関わるものも多く、Webサイト運用において欠かせない要素だ。

詳細解説

代表的なメタタグ

文字コードの指定

<meta charset="UTF-8">

文字化けを防ぐために必須。<head> の最初に書くのが慣例だ。

ビューポート（スマホ対応）

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

スマートフォンでの表示を適切にするために必要。レスポンシブデザインの基本設定だ。

ページの説明文（description）

<meta name="description" content="このページの内容を具体的に要約する">

検索結果でタイトルの下に表示される説明文の候補になる。Googleは検索クエリやページ内容に応じて別の文章を表示することもあるため、必ずそのまま表示されるわけではない。SEOへの直接的な影響は限定的だが、検索結果でのクリック率（CTR）に影響することがある。

OGP（Open Graph Protocol）

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

SNSでシェアされたときのカード表示を制御する。og:imageで指定した画像がサムネイルとして使われる。

インデックス制御

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

検索エンジンのクローラーに対して、インデックスするかどうかを指示する。noindex・nofollowの詳細はそちらを参照。

WordPressとメタタグ

WordPressではSEOプラグイン（Yoast SEO・All in One SEOなど）を使えば、投稿ごとにdescriptionやOGP設定をGUIで管理できる。コードを直接書かなくても設定できるため、初心者でも扱いやすい。

ファビコンの指定もhead内で行う

ファビコンは <meta> タグではなく、<head> 内の <link rel="icon"> で指定する。ただし、同じhead内で管理される関連タグとして、メタタグと一緒に確認されることが多い。

よくある勘違い

メタタグのkeywordsはSEOに効く？

Googleは、<meta name="keywords"> をウェブ検索のランキングに使用しないと明言している。かつてはSEOに重要とされていたが、スパム目的の乱用が増えたため、現在のGoogle検索ではSEO効果は期待できない。

descriptionに書いたことが必ず検索結果に表示される？

保証されない。Googleは検索クエリとの関連性によって、ページ本文からより適切な文章を抜き出して表示することがある。ただし、適切なdescriptionを書いておくことで採用される確率は上がる。

OGP設定はSNSにしか関係ない？

主にSNSで使われるが、Slackなどのアプリのプレビュー表示でも参照されることがある。SNSやチャットツールでページが共有される可能性があるなら、設定しておく価値は十分にある。

情報ソース

AIコーディングとの関係

AIにコード生成や修正を依頼するとき、メタタグの意味を理解していると、出力されたコードやエラー内容を判断しやすくなる。
HTMLのhead内に記述する、ページの情報（文字コード・説明文・キーワード・SNS表示設定など）をブラウザや検索エンジンに伝えるためのタグのこと。

AIへ相談するときは、「何をしたいのか」「どの環境で起きているのか」「どのファイルやエラーを見ているのか」を一緒に伝えるとよい。
用語だけを投げるより、具体的な状況と期待する結果を添えることで、より実用的な回答を得やすくなる。

まとめ

メタタグは、HTMLのhead内に記述する、ページの情報（文字コード・説明文・キーワード・SNS表示設定など）をブラウザや検索エンジンに伝えるためのタグのこと。
関連する用語や実際の作業場面と一緒に理解すると、使いどころを判断しやすい。
AIコーディングでは、用語の意味を理解しているほど、AIの説明や生成コードを確認しやすくなる。
迷ったときは、エラー内容、目的、前提条件を整理してAIに聞くとよい。

より詳しくAIに聞いてみよう

メタタグとは何か、初心者でもわかるように説明してください。
SEOに効果的なdescriptionの書き方を教えてください。
OGP（og:title・og:image など）の正しい設定方法を教えてください。
WordPressでメタタグを管理するためのプラグインの比較を教えてください。
AIコーディングでHTMLのheadタグを生成してもらうときに、メタタグを適切に含めるための指示を教えてください。