メタタグ

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にページのhead部分を生成してもらうと、文字コードやviewportといった基本的なメタタグは含まれることが多いが、descriptionやOGP設定は指示しないと省略されがちである。「SEOとSNSシェアを意識して、description・og:title・og:image・og:urlを含めたheadタグを書いてください」のように、目的を具体的に伝えると過不足のないコードを得やすい。

AIが生成したメタタグを確認するときは、<meta name="keywords"> のような効果のなくなった古いタグが混ざっていないか、descriptionの文字数が極端に長すぎないかもあわせて見ておくとよい。

まとめ

メタタグは、HTMLのhead内に記述する、ページの情報（文字コード・説明文・キーワード・SNS表示設定など）をブラウザや検索エンジンに伝えるためのタグのこと。
ページの見た目には反映されないが、検索結果の表示やSNSでのシェア時のカード表示に関わる。
keywordsはGoogleの検索ランキングに使われなくなっており、SEO効果は期待できない。
descriptionは検索結果への表示が保証されるわけではないが、適切に書くことで採用される確率が上がる。
WordPressではSEOプラグインを使えば、コードを直接書かなくてもdescriptionやOGP設定を管理できる。

情報ソース

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

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