メタタグ
Meta Tag
概要（サマリー）
メタタグとは、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="このページの概要を120〜160字程度で記述する">
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内で行う
ファビコンも <head> 内の <link> タグで指定するため、メタタグと一緒に管理されることが多い。
よくある勘違い
メタタグのkeywordsはSEOに効く？
現在のGoogleはほぼ無視している。<meta name="keywords"> はかつてSEOに重要とされていたが、スパム目的の乱用が増えたため、Googleは2009年に評価対象から外したと明言している。記述すること自体に害はないが、SEO効果は期待できない。
descriptionに書いたことが必ず検索結果に表示される？
保証されない。Googleは検索クエリとの関連性によって、ページ本文からより適切な文章を抜き出して表示することがある。ただし、適切なdescriptionを書いておくことで採用される確率は上がる。
OGP設定はSNSにしか関係ない？
主にSNSで使われるが、一部の検索エンジンやアプリ（Slackなどのプレビュー表示）でも参照されることがある。また、Googleもog:imageをGoogle検索の画像として使用する場合があるため、設定しておく価値は十分にある。
より詳しくAIに聞いてみよう
- メタタグとは何か、初心者でもわかるように説明してください。
- SEOに効果的なdescriptionの書き方を教えてください。
- OGP（og:title・og:image など）の正しい設定方法を教えてください。
- WordPressでメタタグを管理するためのプラグインの比較を教えてください。
- AIコーディングでHTMLのheadタグを生成してもらうときに、メタタグを適切に含めるための指示を教えてください。