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必須 | 相対パスは無効 |
よくある失敗パターン
og:imageを設定していない
最も多い失敗。og:imageがないとSNSにシェアされた際にサムネイルが表示されず、クリック率が大幅に下がります。すべてのページに設定しましょう。
og:imageを相対パスで指定している
og:imageには必ず絶対URL（https://から始まる完全なURL）を使用してください。相対パスでは多くのSNSが画像を読み込めません。
og:descriptionが長すぎる
Facebookでは200文字程度で省略されます。重要な情報は前半に凝縮し、簡潔な説明文を心がけましょう。
全ページで同じOGP画像・説明文を使い回している
ブログ記事や商品ページなど、主要なページにはそれぞれ固有のog:imageとog:descriptionを設定することでブランド体験が向上します。