CreaTools LogoCreaTools
Tech Notes
OGP Generator

OGP設定完全ガイド｜SNSで正しく表示させるための判断基準と事故回避

2025-12-09

結論：OGP設定の正解

1. OGP画像は必須（1200×630px） 2. キャッシュされる前提で設計 3. 公開前にデバッガーで確認 4. 動的生成は"余力があれば"

OGPの確認は OGP Generator で。この記事は「何を守れば失敗しないか」の判断基準だけ。

即決チェックリスト

必須項目

  • og:title を設定したか
  • og:description を設定したか
  • og:image を設定したか（絶対URL）
  • og:url を設定したか
  • twitter:card を設定したか（summary_large_image）

画像

  • サイズは1200×630pxか
  • 絶対URLか（相対パスはNG）
  • 5MB以下か
  • 重要な情報は中央に配置したか

公開前

  • 本番URLでデバッガー確認したか
  • 画像URLにバージョンを含めたか（キャッシュ対策）

最低限のmeta構成

<!-- OGP（Facebook / LINE / LinkedIn） -->
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明文（160文字以内）" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

<!-- Twitterカード -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og.png" />

これで全SNSに対応できる。 Twitterは og:* をフォールバックで読むが、twitter:card だけは必須。

OGPとTwitterカードの関係

フォールバック挙動

プラットフォーム参照するタグ
Facebook / LINEog:* のみ
X（Twitter）twitter:* → og:* の順
LinkedIn / Discordog:*

Twitterは og:* をフォールバックで読む。 ただし twitter:card だけは明示的に指定が必要。

twitter:card の種類

値用途
summary_large_image大きい画像（ほぼこれ）
summary小さいサムネイル
player動画埋め込み

迷ったら summary_large_image。

画像デザインの最低ライン

サイズ

項目正解
サイズ1200×630px
アスペクト比1.91:1
ファイルサイズ5MB以下
形式PNG or JPEG

セーフエリア

SNSによってはトリミングされる。重要な情報は中央に配置。

+----------------------------+
|      マージン50px以上       |
|   +------------------+     |
|   |   タイトル       |     |
|   |   ロゴ           |     |
|   +------------------+     |
|                            |
+----------------------------+

テキスト

要素文字数フォントサイズ
タイトル20〜30字48〜72px
サブタイトル10〜15字24〜32px

コントラスト

背景と文字のコントラスト比 4.5:1以上。タイムライン上で小さく表示されても読めるように。

キャッシュ問題（最重要）

OGPはキャッシュされる前提で設計する。

SNS別のキャッシュ

プラットフォームキャッシュ期間手動クリア
X（Twitter）約7日Card Validator
Facebook数時間〜シェアデバッガー
LINE不定不可
LinkedIn約7日Post Inspector
Discord / Slack不定困難

対策：画像URLにバージョンを含める

<!-- 更新時にv=2, v=3...と変更 -->
<meta property="og:image" content="https://example.com/og.png?v=2" />

URLが変わればキャッシュは無効化される。

詳細は別記事

キャッシュ問題の詳細は OGPキャッシュ問題と解決策 を参照。

実装方法

静的HTML

<head>
  <meta property="og:title" content="タイトル" />
  <meta property="og:description" content="説明" />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:url" content="https://example.com" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

Next.js（App Router）

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  openGraph: {
    title: "タイトル",
    description: "説明",
    images: ["/og.png"],
    siteName: "サイト名",
    locale: "ja_JP",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
  },
};

metadataBase を設定しないと相対パスが解決されない。

動的生成（応用）

記事ごとにタイトルを埋め込んだOGP画像を自動生成する場合：

詳細は 動的OGP画像の生成方法 を参照。

確認方法

各SNSのデバッガー

プラットフォームツール
X（Twitter）Card Validator
Facebookシェアデバッガー
LinkedInPost Inspector

確認手順

  1. 本番URLにデプロイ（localhostは不可）
  2. デバッガーでURLを入力
  3. タイトル・説明・画像が正しいか確認
  4. 問題があればキャッシュクリア

開発環境（localhost）ではSNSが画像を取得できない。必ず本番URLでテスト。

よくある失敗

失敗原因対策
画像が表示されない相対パス絶対URLに変更
古い情報が表示されるSNSキャッシュデバッガーでクリア
タイトルが途切れる文字数超過30〜40文字に収める
localhostで確認できないSNSがアクセス不可本番URLでテスト
更新が反映されない画像URLが同じ?v=2 を追加

まとめ

判断正解
画像サイズ1200×630px
画像URL絶対URL
twitter:cardsummary_large_image
キャッシュ対策URLにバージョン
確認本番URLでデバッガー
動的生成余力があれば

OGPは「設定論」ではなく「事故回避論」。公開前に必ずデバッガーで確認。

関連記事