OGP Preview

シェアされたとき、どう見えるか。
5つのサービスで投稿前に確認。

URLを入れると、X・Facebook・LINE・Slack・Discord でシェアしたときのカードを再現します。og:image のサイズ・縦横比・容量、不足している OGP タグも指摘。公開前の確認と、画像が出ないときの原因探しに。

  • 無料・登録不要
  • 結果まで約5秒
  • X / Facebook / LINE / Slack / Discord
  • og:image のサイズを実測

使い方

  1. 1
    ページのURLを入力
  2. 2
    SNS ごとのプレビューと指摘を確認
  3. 3
    直したら再度確認。X や Facebook のキャッシュは各社のデバッガーで更新

OGP の基本と推奨サイズ

これだけ入れておけば、どのSNSでも崩れない

<meta property="og:title" content="ページのタイトル(60文字以内)">
<meta property="og:description" content="内容の要約(90〜110文字)">
<meta property="og:image" content="https://example.com/ogp.jpg">  <!-- 1200×630px -->
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="article">  <!-- トップは website -->
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
サービス画像の扱いタイトル・説明キャッシュの更新
Xtwitter:card が summary_large_image なら大きな画像(1.91:1)。summary なら正方形の小さな画像。5MB までタイトル約70文字、説明は2行で省略投稿作成画面で再取得される(Card Validator は廃止)
Facebook1200×630 推奨、600×315 以上で大きなカード。8MB までタイトル約88文字、説明1行シェアデバッガーで「もう一度スクレイピング」
LINEog:image を 1.91:1 で表示。トーク画面では幅が狭いタイトル2行、説明は出ない手動更新の手段なし。URL に ?v=2 などを付けて別URL扱いにする
Slackog:image を本文の下に表示(大きすぎると縮小)サイト名・タイトル・説明を表示メッセージ内のリンクを一度削除して貼り直す
Discordog:image を埋め込みの下に表示サイト名・タイトル・説明を表示キャッシュは数時間で切れる

よくある質問

画像が出ない・古いままのとき

OGP を設定したのに画像が表示されない

よくある原因は4つです。(1) og:image の URL が相対パスか http(https が必要)、(2) 画像が 600×315px 未満、(3) 画像のサーバーが外部からの取得を拒否している(WAF・ホットリンク対策・ログイン必須)、(4) ページ自体がボットのアクセスを 403 で弾いている。このツールの判定欄に該当する項目が出ます。

直したのに SNS では古い画像のまま

各SNSが以前の取得結果をキャッシュしています。Facebook はシェアデバッガーで再取得、X は投稿作成画面でプレビューを出せば再取得されます。LINE は手動更新の手段がないため、URL の末尾に ?v=2 のようなパラメータを付けて別URLとして扱わせるのが実務的な回避策です。

X で小さなカードになってしまう

twitter:card が未設定か summary になっています。大きな画像で出すには summary_large_image を指定し、og:image を 1.91:1(1200×630px)にします。

WordPress で OGP はどこで設定する?

All in One SEO・Yoast・Rank Math などの SEO プラグインに「ソーシャル」の設定欄があり、ページごとの og:image と twitter:card を指定できます。テーマが独自に OGP を出力している場合、二重に出ることがあるので、このツールの「取得した OGP タグ」で重複を確認してください(最初の1つが使われます)。

このツールについて

判定の基準
Open Graph・Twitter Cards の仕様と各社の推奨(og:image 1200×630px、600×315px 以上、X 5MB・Facebook 8MB)で判定します。カードの再現は目安です。
データの扱い
入力したURLのページをサーバーが取得して判定します。取得したページと結果は保存しません(利用状況の把握のため、ツール名・対象ホスト・所要時間だけを記録し、IP アドレスは記録しません)。
運営
株式会社ACOSTECH(COCORO Sync.)。運営会社 ・ 不具合・要望を伝える
最終更新

ほかのお役立ちツール

SEO・AI検索・SNSの作業を、その場で確かめる。登録不要・無料

無料LLMO・AI検索 LLMO対応度チェッカー

URLを入れるだけで、AI検索に引用される準備ができているかを30項目で採点。直すべき順に提示します。

使ってみる →
無料LLMO・AI検索 llms.txt ジェネレーター

サイトマップから主要ページを選ぶだけで、AI向けのサイト案内ファイル llms.txt を生成します。

使ってみる →
無料LLMO・AI検索 AIクローラー向け robots.txt

学習用・AI検索用・ユーザー操作時に分けて、23種のAIクローラーの許可・拒否を設定します。

使ってみる →
無料LLMO・AI検索 AIクローラー アクセスログ解析

アクセスログをブラウザ内で集計し、AIクローラーがいつ・どのページに来たかを可視化します。

使ってみる →
無料SEO・競合調査 記事一覧CSV・更新ペース分析

競合サイトの全ページをサイトマップから棚卸しし、更新ペースとディレクトリ構成を把握。CSV出力。

使ってみる →
無料SEO・競合調査 見出し構成の比較

自社と競合の記事を横並びにして、H1〜H3の構成・文字数・自社に無い話題を抽出します。

使ってみる →
無料SNS SNS投稿テキストチェッカー

X・Instagram・TikTok・Threads の文字数と見え方を同時に確認。Instagramの改行保持、Xの分割、ハッシュタグ整理も。

使ってみる →
無料SEO・競合調査 構造化データ ジェネレーター

FAQ・記事・会社情報・店舗・パンくず・手順の JSON-LD をフォーム入力で生成。コピーして貼るだけ。

使ってみる →
無料SNS SNS画像サイズ・安全領域プレビュー

1枚の画像が X・Instagram・リール・TikTok・YouTube でどう切れるかを一度に確認。各サイズに切り出してダウンロード。

使ってみる →
無料SEO・競合調査 画像 alt 一括チェック

ページ内の画像を一覧にして、alt が無い・空・弱い画像を抽出。リンク内の画像も判定。CSV出力。

使ってみる →
Next step

継続的に改善するなら Insight.Instagram 分析

Instagram の投稿ごとに、リーチ・保存・プロフィールへの移動を集計します。反応の多い投稿の共通点が分かり、次に作る投稿のテーマと時間帯を決める材料になります。

サービスを見る →
広告
広告枠(300×250)
広告枠(300×250)