OGP(SNS・AIに伝わるメタ情報)を正しく設定する

OGP(Open Graph Protocol)は、ページがどんな内容かを、SNSやAIに正しく伝えるためのメタ情報です。SNSでシェアされたときのカード表示に使われるほか、いまは検索エンジンやAIがページの主題を読み取る手がかりにもなります。つまりOGPは、見た目の装飾ではなく、機械可読性——機械に正しく読まれる構造——の一部です。

先にお断りすると、正しく設定してもシェア数や流入が増える保証はありません。ここでできるのは「正しく伝わる構造を作る」ところまでです。

OGPとは何か

OGPは、<head> 内に書く <meta> タグの集まりです。ページの「タイトル」「種類」「説明」「URL」「代表画像」などを、機械が読める形で明示します。

最低限そろえるOGP

現在、最低限そろえたいのは次の6つです。

<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="article">
<!-- トップページは website、記事ページは article -->
<meta property="og:description" content="ページの要約">
<meta property="og:url" content="https://example.com/page/">
<!-- 正規URL。canonical と一致させる -->
<meta property="og:image" content="https://example.com/ogp.png">
<!-- 絶対URL・推奨 1200×630px -->
  • og:url は、そのページの正規URL(canonical)と一致させます。ここがずれていると、シェアやAIの参照が別URLに割れます。
  • og:image は絶対URLで指定し、推奨サイズは 1200×630px 程度です。

X(旧Twitter)向け

Xは基本的に og: を読みますが、カードの種類だけは指定します。

<meta name="twitter:card" content="summary_large_image">
  • いまは大きな画像で表示する summary_large_image が主流です(かつての summary 固定は古い指定です)。
  • twitter:title などを個別に足すこともできますが、og: があれば多くは足ります。むしろ重複させないことが大切です。

テーマで出すか、プラグインで出すか

OGPは、テーマ(functions.php / header.php)で条件分岐して出力する方法と、プラグインで出力する方法があります。どちらでも構いません。要点は実装手段ではなく、重複・矛盾・欠落がないことです。

  • 特定のプラグイン名を勧めることはしません(各プラグインのUIは頻繁に変わります)。いま使っている環境で、正しく・一度だけ出ているかを確認するのが先です。
  • 現場でよく見つかるのが、OGPの二重出力です。SEO系プラグインを複数入れている、あるいはテーマとプラグインの両方が出している、といった状態で、og:title が2つ出ているサイトは珍しくありません。これは機械可読性の欠陥です。出力箇所を1つに統一します。

確認する方法

設定したら、確認します。

  • ページのソースを表示して、og: タグが 1組だけ あるか。
  • og:url が canonical と一致しているか。
  • og:image が絶対URLで、実在するか。
  • 各SNSの共有デバッガー(FacebookのSharing Debugger など)で、カード表示が意図どおりか。

放置されたサイトで、よく見つかること

診断でOGP周りを見ると、次のような欠陥がよく見つかります。

  • OGPそのものが無く、シェアしても味気ないリンクになる
  • 二重出力で、意図と違うタイトルや画像が拾われる
  • og:url と canonical の不一致
  • og:image の未設定、またはリンク切れ

いずれも「マイナスをゼロに戻す」是正です。正しく設定するところまでが範囲で、その先の拡散や流入は保証しません。