はじめに
自分のサイトのURLをX（Twitter）やLINEでシェアしたとき、味気ないリンクだけが表示されていませんか？
設定次第で、タイトル・説明文・画像がきれいなカード形式で表示され、クリック率が大きく変わります。この設定を行う仕組みが OGP（Open Graph Protocol）タグです。
SEOとの直接的な関係は薄いですが、SNSからの流入増加・ブランド認知向上を通じて間接的にSEOにも貢献します。
OGPタグとは？
OGP（Open Graph Protocol）は、FacebookがWebページのメタ情報をSNSに伝えるために策定した仕様です。現在はX・LINE・Slackなどほぼすべてのプラットフォームが対応しています。
HTMLの <head> 内に記述することで、そのページがSNSでシェアされたときの表示内容を制御できます。
設定しないとどうなる？
OGPタグが未設定の場合、SNSは独自の判断でページ情報を取得します。その結果：
- タイトルがURLのまま表示される
- 画像がランダムな要素から取得される（関係ない画像が出ることも）
- 説明文が本文の冒頭を無加工で使用される
シェアしてもらっても見た目が悪く、クリックされにくくなります。
必須のOGPタグ5つ
<head>
<!-- タイトル -->
<meta property="og:title" content="ページのタイトル">
<!-- 説明文（120文字以内推奨） -->
<meta property="og:description" content="ページの内容を簡潔に説明するテキスト">
<!-- ページの種類 -->
<meta property="og:type" content="website">
<!-- ページのURL -->
<meta property="og:url" content="https://example.com/page">
<!-- シェア時に表示される画像 -->
<meta property="og:image" content="https://example.com/og-image.png">
</head>
og:imageの推奨サイズ
| 推奨サイズ | 最小サイズ | ファイルサイズ |
|---|---|---|
| 1200×630px | 600×315px | 1MB以下 |
横長（16:9）の画像が最もきれいに表示されます。
X（Twitter）向けの追加設定
Xはog:タグに加えて、独自の twitter: タグも読み取ります。
<!-- カードの表示形式（summary_large_image = 大きな画像カード） -->
<meta name="twitter:card" content="summary_large_image">
<!-- サイトのXアカウント（任意） -->
<meta name="twitter:site" content="@yourhandle">
<!-- タイトル・説明・画像はog:タグから自動継承されることが多い -->
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="説明文">
<meta name="twitter:image" content="https://example.com/og-image.png">
summary_large_image にすることで、大きな画像付きのカードが表示され、タイムラインで目立ちます。
設定後の確認方法
設定したOGPタグが正しく機能しているかは、各プラットフォームのデバッグツールで確認できます。
X（Twitter）Card Validator
cards-dev.twitter.com/validator にURLを入力するとプレビューが確認できます。
Facebook Sharing Debugger
developers.facebook.com/tools/debug/ でFacebook・Instagram向けの表示を確認できます。
OGP確認ツール
ogp.me にURLを入力するだけで、OGPタグの内容とプレビューを一覧表示できます。
SNS流入とSEOの関係
OGPタグ自体はGoogleの検索順位に直接影響しません。ただし次の間接効果があります：
- シェアされやすくなる → 多くの人の目に触れる → サイトへの流入増加
- 被リンクが増える → SNSで見たユーザーが自分のサイトやブログで紹介してくれる → SEO評価向上
- ブランド認知が広がる → 指名検索（サイト名での検索）が増える → 検索シグナルとして評価
特にブログ記事は「読んで良かった」と思ったユーザーがシェアしてくれる可能性が高く、OGP最適化の効果が出やすいコンテンツです。
よくある間違い
全ページ同じ画像・説明文にしている
ページごとに内容が異なるなら、OGPタグもページごとに設定すべきです。全ページ共通のトップ画像だけでは、記事がシェアされても何の記事かわかりません。
画像のURLが相対パスになっている
og:image には 絶対URL（https://から始まるフルパス） を指定してください。相対パスでは画像が表示されません。
<!-- NG -->
<meta property="og:image" content="/images/og.png">
<!-- OK -->
<meta property="og:image" content="https://example.com/images/og.png">
画像を更新したのに反映されない
SNSはOGP情報をキャッシュします。画像を変更した場合は、各プラットフォームのデバッグツールで「キャッシュをクリア」してから再取得してください。
まとめ
- OGPタグはSNSシェア時の表示を制御するHTML設定
og:title・og:description・og:image・og:url・og:typeの5つが必須- X（Twitter）向けに
twitter:cardも追加すると大きな画像カードで表示される - 画像は1200×630px・1MB以下・絶対URLで指定する
- SEOへの直接効果はないが、シェア増加 → 流入増加 → 被リンク増加という間接効果がある
設定後は必ずデバッグツールで表示を確認しましょう。
合わせて読みたい
- 内部リンクのSEO効果と正しい設置方法：SNS流入を獲得した後は内部リンクでユーザーを回遊させましょう
- 被リンクとSEO：SNSシェアが被リンク獲得につながる仕組みを詳しく解説しています