OGPタグ（Open Graph Protocol）とは、SNSでページがシェアされた際の表示内容（タイトル・画像・説明文）を制御するHTMLメタタグです。正しく設定することでSNSからの流入を最大化できます。
OGPタグとは？
OGP（Open Graph Protocol）とは、FacebookやLINE・SlackなどのSNSでURLをシェアした際に、タイトル・説明文・サムネイル画像などを正しく表示させるためのHTMLメタタグの仕様です。htmlの<head>内に記述します。
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
なぜOGPタグが重要なのか？
OGPタグが正しく設定されていないと、SNSでシェアされた際にサムネイルが表示されなかったり、無関係な画像が引用されたりします。適切に設定することでブランドの印象を統一し、SNSからのクリック流入を大幅に増やすことができます。
+2.5倍
OGP設定時のSNSクリック率向上の目安
1200×630px
推奨og:imageサイズ
40%
OGP未設定サイトの割合
必須OGPタグ一覧
| タグ名 | 内容 | 必須度 |
|---|---|---|
| og:title | SNSに表示するページタイトル（最大95文字） | 必須 |
| og:description | SNSに表示する説明文（最大200文字） | 必須 |
| og:image | シェア時に表示するサムネイル画像URL | 必須 |
| og:url | ページの正規URL | 必須 |
| og:type | コンテンツ種別（website / article 等） | 必須 |
| og:site_name | サイト名 | 推奨 |
| og:locale | 言語・地域（例: ja_JP） | 推奨 |
Twitter Card（X向け）タグ
| タグ名 | 内容 |
|---|---|
| twitter:card | カードタイプ（summary_large_image 推奨） |
| twitter:title | Xに表示するタイトル（og:titleのフォールバックあり） |
| twitter:description | Xに表示する説明文（og:descriptionのフォールバックあり） |
| twitter:image | Xに表示するサムネイル画像URL（og:imageのフォールバックあり） |
og:imageの設定ガイド
og:imageはSNSシェア時の第一印象を決める最重要タグです。サイズや形式を間違えると画像が表示されなかったり、トリミングされて見栄えが悪くなります。
| 項目 | 推奨値 | 備考 |
|---|---|---|
| サイズ | 1200×630px | 最小600×315px以上 |
| アスペクト比 | 1.91:1 | 横長の標準比率 |
| ファイル形式 | JPEG / PNG | GIF・WebPは非対応のSNSあり |
| 容量 | 8MB以下 | 1MB以下を推奨 |
| URLの種類 | 絶対URL必須 | 相対パスは無効 |
OGPの確認方法｜SNSごとの確かめ方
OGPの確認は「タグが正しく書かれているか」と「各SNSでどう表示されるか」の2段階に分けます。タグが正しくても、SNS側が古い情報を覚えている（キャッシュしている）と、変更が表示に反映されないためです。
| 確かめること | 方法 |
|---|---|
| タグの書き方 | ページのソースで og:title・og:description・og:image・og:url を探すか、URLを入れてOGPタグをまとめて判定できるツールを使う。og:image が絶対URL（https://〜）になっているかも見る |
| Facebookでの表示 | Meta公式のシェアデバッガー（developers.facebook.com/tools/debug）にURLを入れると、表示のプレビューと読み取ったタグが出る。「もう一度スクレイピング」で古いキャッシュを更新できる |
| X（旧Twitter）での表示 | 以前あったCard Validatorのプレビュー機能は終了しているため、投稿画面にURLを貼ってカードの表示を確かめる。twitter:card などのタグが無い場合は og: タグの内容が使われる |
| LINE・Slackでの表示 | トークやメッセージにURLを貼って確かめる。どちらも一度読み取った内容をしばらく使い続けることがあるので、修正直後は反映まで時間がかかる場合がある |
タグの書き方は、メタタグチェックにURLを入れると、OGPタグとtitle・meta descriptionをまとめて確認できます。
よくある失敗パターン
og:imageを設定していない
最も多い失敗。og:imageがないとSNSにシェアされた際にサムネイルが表示されず、クリック率が大幅に下がります。すべてのページに設定しましょう。
og:imageを相対パスで指定している
og:imageには必ず絶対URL（https://から始まる完全なURL）を使用してください。相対パスでは多くのSNSが画像を読み込めません。
og:descriptionが長すぎる
Facebookでは200文字程度で省略されます。重要な情報は前半に凝縮し、簡潔な説明文を心がけましょう。
全ページで同じOGP画像・説明文を使い回している
ブログ記事や商品ページなど、主要なページにはそれぞれ固有のog:imageとog:descriptionを設定することでブランド体験が向上します。
