Webページを公開しても「Google検索に表示されない」「SNSでシェアしたときに画像が出ない」という経験はありませんか？その原因のほとんどは、HTMLの <head> 内に書くメタタグの設定漏れや誤りにあります。

メタタグはブラウザ画面には表示されませんが、検索エンジンとSNSがページを解釈する際に真っ先に読み込む重要な情報です。titleタグの文字数がわずか数文字多いだけでGoogleが書き換えてしまうことがありますし、OGP画像サイズを間違えると Twitterカードが崩れます。

本記事では、SEOとSNSシェアの両方に直結する主要メタタグ（title・meta description・OGP・robots・canonical・hreflang）の書き方と最適化のコツを、コピーして使えるテンプレートつきで解説します。設定済みかどうかは無料のメタタグ生成ツールやSERPプレビューでいつでも確認できます。

メタタグとは？

メタタグとは、HTMLドキュメントの <head> セクション内に記述する <meta> 要素および <title> 要素の総称です。ページ本文（body）には出力されないため、訪問者には見えませんが、検索エンジンのクローラーやSNSのボットが最初に参照するデータです。

メタタグが影響する主な場面

  • Google検索結果：タイトルとスニペット（説明文）はtitleタグとmeta descriptionから生成されます
  • SNSシェア：Twitter・Facebook・LINEなどでシェアされたときのカード表示はOGPタグが制御します
  • クロール制御：robots metaタグでインデックス可否やリンクのフォローを指定します
  • 重複コンテンツ対策：canonicalタグで正規URLを明示し、評価が分散するのを防ぎます
  • 多言語対応：hreflangタグで言語・地域バリアントを検索エンジンに伝えます

メタタグはコンテンツ品質そのものではありませんが、書き方ひとつで検索順位・クリック率・シェア時の見栄えが大きく変わります。特に新規サイトや多言語展開を行うサイトでは、最初から正しく設定しておくことが重要です。

titleタグの書き方

<title> タグはHTMLのメタタグの中で最も重要なSEO要素です。Googleは通常このタグの内容を検索結果のタイトルとして表示しますが、適切でないと判断した場合は書き換えることがあります。

文字数の目安

  • 推奨：30〜60文字（ピクセル幅換算で約480〜580px）
  • 日本語は全角1文字が英字約2文字相当のため、日本語なら15〜30文字が目安
  • 長すぎると検索結果で「…」と省略され、キーワードが見切れる
  • 短すぎると情報が不足し、クリック率が下がる傾向がある

ブランド名の付け方

サイト名・ブランド名はタイトルの末尾に「｜（縦棒）」や「-（ハイフン）」で区切って付けるのが一般的です。検索ユーザーはタイトルの冒頭部分を重視するため、ページの主キーワードを先頭に持ってきます。

NG例とOK例

種別例問題点
NG トップページ | 株式会社〇〇 「トップページ」はキーワードを含まず、ユーザーにとって意味がない
NG メタタグの書き方・設定方法・SEO対策・OGP設定・canonicalタグ・hreflangタグについて詳しく解説するページ 長すぎてGoogleに書き換えられる可能性が高い
OK メタタグ完全ガイド｜title・description・OGPの書き方 主キーワードが先頭、サブキーワードで補足、30文字前後で収まっている
OK 東京の賃貸マンション探し | 〇〇不動産 地域＋サービス内容でユーザーの意図と一致し、ブランド名が末尾 
<!-- titleタグの基本形 -->
<title>メタタグ完全ガイド｜title・description・OGPの書き方</title>

実際に検索結果でどう表示されるかは、SERPプレビューツールで事前に確認することをお勧めします。

meta descriptionの書き方

meta description は検索結果のタイトル下に表示されるスニペット（説明文）の元になるタグです。直接的な順位要因ではありませんが、ユーザーがクリックするかどうかを決めるCTR（クリック率）に大きく影響します。

文字数の目安

  • 推奨：120〜155文字（英語の場合は150〜160文字）
  • モバイル検索では約120文字で切れることが多い
  • Googleが適切な内容を見つけられない場合、ページ本文から自動抽出することがある

CTR向上のコツ

  • 検索キーワードを自然な形で含める（Googleが太字強調してくれる）
  • 「〜できます」「〜がわかります」などユーザーのメリットを明示する
  • 数字・具体例を入れると読まれやすい（例：「5つのポイント」「3分で設定完了」）
  • すべてのページで一意の説明文を用意する（重複はGoogleが無視する可能性がある）
<!-- meta descriptionの基本形 -->
<meta name="description" content="SEOに効くメタタグの書き方を徹底解説。titleタグ・meta description・OGP・robots・canonical・hreflangまで、コピーして使えるテンプレートつきで解説します。">

descriptionの長さをリアルタイムでチェックしたい場合は、SERPプレビューツールをご利用ください。

OGP（Open Graph）タグ

OGP（Open Graph Protocol）は、FacebookがWebページをSNSでシェアしたときに表示するカード情報を制御するための仕様です。現在はTwitter（X）・LINE・Slackなど多くのプラットフォームがOGPを読み取ります。

必須の4タグ

  • og:title — シェアカードに表示するタイトル（titleタグと同じでも可）
  • og:description — カードの説明文（meta descriptionと同じでも可）
  • og:image — カードに表示する画像のURL（絶対URL必須）
  • og:url — そのページの正規URL

推奨画像サイズ

  • 1200×630px（アスペクト比 1.91:1）が最も広くサポートされる
  • 最小サイズは600×315px（これ未満だと小さいカードで表示される）
  • ファイルサイズは8MB以下を目安に（軽いほど読み込みが速い）
  • 画像はCDNやHTTPSで提供する（HTTP画像はFacebookで表示されないことがある）
<!-- OGP基本セット -->
<meta property="og:type"        content="article">
<meta property="og:title"       content="メタタグ完全ガイド｜title・description・OGPの書き方">
<meta property="og:description" content="SEOに効くメタタグの書き方を徹底解説。">
<meta property="og:image"       content="https://example.com/images/meta-tag-guide-ogp.jpg">
<meta property="og:url"         content="https://example.com/ja/blog/meta-tag-guide">
<meta property="og:site_name"   content="サイト名">
<meta property="og:locale"      content="ja_JP">

<!-- Twitter Card（X）-->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="メタタグ完全ガイド｜title・description・OGPの書き方">
<meta name="twitter:description" content="SEOに効くメタタグの書き方を徹底解説。">
<meta name="twitter:image"       content="https://example.com/images/meta-tag-guide-ogp.jpg">

OGPタグが正しく設定されているかはOGPチェッカーでURLを入力するだけで確認できます。SNSシェア前の確認に活用してください。

robots metaタグ

robots metaタグは、検索エンジンにそのページをインデックスするかどうか、リンクをたどるかどうかを指示するタグです。robots.txt がURLレベルのクロール制御なのに対し、robots metaタグはページレベルのインデックス制御です。

主なディレクティブ

ディレクティブ意味
index検索結果へのインデックスを許可（デフォルト）
noindex検索結果に表示しない
followページ内のリンクをたどることを許可（デフォルト）
nofollowリンクをたどらない（PageRankを渡さない）
noarchiveGoogleのキャッシュに保存しない
nosnippet検索結果にスニペットを表示しない
 
<!-- 通常のページ（インデックス許可） -->
<meta name="robots" content="index, follow">

<!-- 検索結果に出したくないページ -->
<meta name="robots" content="noindex, follow">

<!-- 管理画面・確認ページなど完全に除外 -->
<meta name="robots" content="noindex, nofollow">

canonicalタグとの違い

canonicalタグ（<link rel="canonical" href="...">）は「このページの正規URLはこちら」とGoogleに伝えるためのタグです。複数のURLで同じコンテンツが存在する場合（PCとモバイル、HTTPとHTTPS、パラメータ付きURLなど）に評価を集約します。

<!-- canonicalタグの基本形 -->
<link rel="canonical" href="https://example.com/ja/blog/meta-tag-guide">

使い分けの原則：ページを検索結果から完全に除外したい場合は noindex、別のURLに評価を集約したい場合は canonical を使います。両方同時に設定することは基本的に避けてください。

hreflangタグ

hreflangタグは、多言語・多地域サイトで各ページの言語と対象地域をGoogleに伝えるためのタグです。適切に設定することで、日本語ユーザーには日本語版、英語ユーザーには英語版が検索結果に表示されるようになります。

記述ルール

  • 言語コードはIETF BCP 47形式（例：ja、en、en-US、zh-TW）
  • すべての言語バリアントを相互に参照する必要がある（A→B、B→A の双方向）
  • どの言語にも一致しないユーザー向けに x-default を設定する
  • URLは絶対URLで記述する
<!-- 日本語ページに記述するhreflangの例 -->
<link rel="alternate" hreflang="ja"      href="https://example.com/ja/blog/meta-tag-guide">
<link rel="alternate" hreflang="en"      href="https://example.com/en/blog/meta-tag-guide">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/blog/meta-tag-guide">

hreflangは設定ミスが多いタグです。特に「相互参照の片方が抜けている」「x-defaultを設定し忘れている」という問題がよく見られます。設定後はGoogle Search Consoleの「国際ターゲット設定」レポートでエラーがないか確認しましょう。

よくある質問

titleタグとh1タグは同じ内容にすべきですか？
必ずしも同じである必要はありません。titleタグは検索結果のタイトルとして機能するため、キーワードを含んだ簡潔な文言が適しています。h1タグはページ内の見出しとして読者に向けて書くため、多少長くても問題ありません。ただし両者が大きくかけ離れているとGoogleがtitleを書き換える場合があるため、内容の一致度を意識することをお勧めします。
meta descriptionを設定しないとどうなりますか？
Googleが検索クエリに関連するページ本文の一部を自動的にスニペットとして表示します。自動生成されたスニペットはCTRが低くなる傾向があるため、重要なページには必ず設定することをお勧めします。特にECサイトやランディングページでは、説明文の内容がコンバージョンに直結します。
OGP画像はJPEGとPNGどちらが良いですか？
写真系はJPEG、ロゴや文字が入った画像はPNGが適しています。Facebookは双方をサポートしていますが、ファイルサイズを抑えてページ読み込み速度を維持するために、JPEGは圧縮率80〜85%程度にするのがバランスの良い選択です。WebPはまだ一部のプラットフォームで対応していないため、OGP画像にはJPEGまたはPNGを推奨します。
noindexを設定したページはすぐに検索結果から消えますか？
Googleがそのページを次にクロールした時点で反映されます。通常は数日〜数週間かかります。即座に削除したい場合は、Google Search Consoleの「URL削除」ツールを使うことで一時的に検索結果から除去できます（再クロール時に永続的に反映されます）。
hreflangタグはHTMLに書く方法以外もありますか？
はい、HTTPレスポンスヘッダーまたはXMLサイトマップで指定する方法もあります。大規模なサイトではHTMLに毎ページ記述するよりサイトマップで一括管理する方が効率的です。ただしJavaScriptで動的に生成されるページは、サーバーサイドレンダリングまたは静的生成で確実にHTMLに出力されるよう注意してください。

まとめ

メタタグはページの品質そのものではありませんが、検索エンジンとSNSがページを正しく理解・表示するための「説明書」として不可欠な要素です。本記事で解説した主なポイントを振り返ります。

  • titleタグ：主キーワードを先頭に、30〜60文字（日本語15〜30文字）で簡潔に
  • meta description：120〜155文字でユーザーのメリットを明示し、CTRを高める
  • OGP：og:title・og:description・og:image（1200×630px）・og:urlを必ず設定
  • robots：noindexとcanonicalを混同せず、用途に応じて使い分ける
  • hreflang：多言語サイトでは相互参照とx-defaultを忘れずに設定

設定が完了したら、以下の無料ツールで検証することをお勧めします。