inSite OGPチェッカー

URLのOGPタグを取得し、X・Facebook・LINEでのシェア表示をプレビューします。

サーバーサイドで安全に処理登録不要・完全無料

チェックするURLを入力

OGPタグを確認したいページのURLを入力してください。

使い方

URLを入力

OGPを確認したいページのURLをペースト

チェックを実行

「チェック」ボタンでOGPタグを取得

プレビューを確認

X・Facebook・LINEでの表示をタブ切替で確認

OGP（Open Graph Protocol）とは

OGP（Open Graph Protocol）とは、WebページがSNSでシェアされたときの表示内容（タイトル・画像・説明文など）を制御するためのHTMLメタタグの仕様です。Facebookが2010年に策定し、現在はX（旧Twitter）、LINE、LinkedIn、Pinterest、Slackなど主要なプラットフォームが対応しています。

OGPを設定しないと、SNSでURLをシェアした際にタイトルや画像が意図しない内容で表示されたり、画像が表示されなかったりします。適切にOGPを設定することで、SNSからのクリック率（CTR）向上やブランドイメージの統一が期待できます。

当ツールを使えば、設定済みのOGPタグを一覧で確認し、各SNSでの実際の見え方をシェア前にプレビューできます。

必須OGPタグ一覧と設定方法

OGPタグは<head>タグ内に記述します。以下が主要なOGPタグの一覧です。

タグ名	必須	説明
og:title	◎	ページのタイトル。SNSシェア時に太字で表示される
og:description	◎	ページの説明文。120文字以内が推奨
og:image	◎	シェア時に表示される画像のURL（絶対URL）
og:url	◎	ページの正規URL（canonical相当）
og:type	○	コンテンツの種類（website / article など）
og:site_name	○	サイト名。Facebookで表示される
twitter:card	○	X（Twitter）のカード形式（summary / summary_large_image）
twitter:image	△	X専用の画像URL。未設定時はog:imageを参照

OGPタグの記述例

<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="article" />
  <meta property="og:site_name" content="サイト名" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

OGP画像の推奨サイズ

OGP画像（og:image）の推奨サイズは1200 × 630 px（アスペクト比 1.91:1）です。このサイズであれば、Facebook・X・LINEのいずれでも大きなプレビュー画像として表示されます。

プラットフォーム	推奨サイズ	最小サイズ	備考
Facebook	1200×630	600×315	600×315未満だと小さなサムネイルに
X（Twitter）	1200×628	300×157	summary_large_imageは2:1比率でクロップ
LINE	1200×630	200×200	正方形に近い画像も表示可能
LinkedIn	1200×627	200×200	1.91:1比率推奨

注意: OGP画像のファイルサイズは5MB以下を推奨します（Facebookの上限は8MB）。形式はJPG・PNG・WebPに対応していますが、一部プラットフォームではWebP非対応の場合があるため、JPGまたはPNGが安全です。テキストを含む場合は、端がクロップされることを考慮して中央寄せにしましょう。

各SNSのOGP対応比較

各SNSはOGPタグの解釈方法やカード表示が異なります。以下の比較表で主要な違いを把握しておきましょう。

項目	Facebook	X（Twitter）	LINE
OGPタグ	og:* を使用	twitter:* 優先、なければ og:*	og:* を使用
カードタイプ	自動判定	summary / summary_large_image	自動判定
画像比率	1.91:1	2:1（large）/ 1:1（summary）	1.51:1
キャッシュ更新	シェアデバッガーで即時	数日〜1週間で自動更新	即時更新手段なし
デバッガー	シェアデバッガー	Card Validator（廃止済み）	なし

ポイント: X（Twitter）の公式Card Validatorは2022年に廃止されました。現在、Xでのプレビュー確認は実際にポスト作成画面でURLを貼り付けるか、当ツールのようなサードパーティツールを使う方法が一般的です。

OGPが反映されない場合の対処法

OGPタグを設定したのにSNSのプレビューに反映されない場合、以下の原因が考えられます。

SNS側のキャッシュが残っている

Facebookはシェアデバッガーで「もう一度スクレイピング」をクリックすることでキャッシュを即時更新できます。X（Twitter）はURL末尾にクエリパラメータ（?v=2など）を付けてキャッシュを回避するか、数日待って自動更新されるのを待ちます。LINEには手動でキャッシュをクリアする手段がないため、時間経過による自動更新を待つ必要があります。

og:imageが相対URLになっている

OGPの画像URLは絶対URL（https://から始まる完全なURL）で指定する必要があります。/images/ogp.pngのような相対パスでは正しく読み込まれません。

JavaScriptで動的に出力している

SNSのクローラーはJavaScriptを実行しません。SPAフレームワーク（React、Vue等）でOGPタグを動的に生成している場合、クローラーはタグを認識できません。サーバーサイドレンダリング（SSR）または静的HTMLで出力する必要があります。

robots.txtやnoindexでクローラーをブロックしている

robots.txtでSNSのクローラーをブロックしていると、OGPタグが読み取れません。FacebookのクローラーはFacebot、X（Twitter）はTwitterbot、LINEはLine URLPreviewerというUser-Agentを使用します。これらを許可しているか確認しましょう。

SSL証明書に問題がある

HTTPS環境でSSL証明書が無効・期限切れの場合、クローラーがページにアクセスできずOGPが取得されません。SSL証明書の状態を確認しましょう。

OGP画像の作り方・デザインのコツ

OGP画像はSNSでシェアされたときの「顔」になる重要な要素です。クリック率に直結するため、以下のポイントを押さえて作成しましょう。

推奨テキストは中央に配置

各SNSで画像の端がクロップされるため、タイトルや重要なテキストは画像の中央80%の範囲に収めましょう。特にXのsummary_large_imageは上下がカットされます。

推奨文字は大きく・少なく

OGP画像はスマホのタイムラインで小さく表示されることが多いです。フォントサイズは32px以上、テキスト量は20文字以内を目安にしましょう。

推奨ブランドカラーを統一

OGP画像にロゴやブランドカラーを入れることで、タイムライン上でサイトの認知度を高められます。配色はサイトのメインカラーと合わせましょう。

注意テキストのみの画像は避ける

Facebookのポリシーでは、画像内のテキスト量が20%を超えるとリーチが低下する可能性があります。イラストや写真をベースに、テキストは補助的に使いましょう。

作成ツール: Canva（無料プランあり）では「SNS投稿」テンプレートから1200×630pxのOGP画像を簡単に作成できます。Figmaを使う場合は、フレームサイズを1200×630に設定してデザインし、PNG形式でエクスポートしましょう。

WordPress・CMS別OGP設定方法

OGPの設定方法はCMSやサーバー環境によって異なります。主要な環境別に設定手順を紹介します。

WordPress プラグインで設定

WordPressではSEOプラグインを使うのが最も簡単です。

SWELL: 投稿編集画面の「SEO設定」からog:title・og:description・og:imageを個別に設定可能（プラグイン不要）
Yoast SEO: 投稿編集画面の「Social」タブからFacebook用・X用のOGPを個別に設定
All in One SEO: 投稿編集画面の「Social」からOGPタグを一括設定。デフォルト画像も設定可能

HTML 手動で記述

静的サイトやカスタムCMSでは、HTMLの<head>内に直接記述します。

<!-- OGP基本タグ -->
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明文（120文字以内）" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="サイト名" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@アカウント名" />

その他CMS Wix・Shopify・Astro

Wix: 各ページの「SEO設定」→「ソーシャルシェア」からOGP画像・タイトル・説明文を設定
Shopify: 商品ページ・ブログ記事のアイキャッチ画像が自動的にog:imageに設定される。カスタマイズはtheme.liquidで直接編集
Astro / Next.js: レイアウトコンポーネントの<head>内でpropsから動的にOGPタグを出力

OGPデバッガー（シェアデバッガー）の使い方

OGPの設定が正しく反映されているか確認するには、各プラットフォームが提供するデバッガーツールを使います。当ツールでもプレビュー確認は可能ですが、SNS側のキャッシュを更新するにはプラットフォーム公式のデバッガーが必要です。

Facebook シェアデバッガー

Facebookのシェアデバッガーにアクセス（Facebook開発者アカウントが必要）

確認したいURLを入力して「デバッグ」をクリック

OGPタグの解析結果とプレビューが表示される。キャッシュを更新するには「もう一度スクレイピング」をクリック

X（Twitter） Card Validator廃止後の確認方法

X（旧Twitter）の公式Card Validatorは2022年に廃止されました。現在の確認方法は以下の通りです。

方法1: Xのポスト作成画面でURLを貼り付け、カードプレビューを確認（下書きでOK、投稿不要）
方法2: 当ツール（inSite OGPチェッカー）でXタブのプレビューを確認
キャッシュ回避: OGP変更後にXのキャッシュが残る場合、URLの末尾に?v=2などのクエリパラメータを付けて新しいURLとして認識させる

LINE キャッシュクリアの制限

LINEには公式のOGPデバッガーがなく、手動でキャッシュをクリアする手段も提供されていません。OGPを変更した場合、数日〜1週間程度で自動的に更新されます。急ぎの場合は、URLを新しいパスに変更するか、リダイレクト先を変えるなどの対応が必要です。

OGPに関するよくある質問

OGPとはどういう意味ですか？

OGPは「Open Graph Protocol」の略で、WebページがSNS（Facebook・X・LINEなど）でシェアされたときに表示されるタイトル・画像・説明文を制御するためのHTMLメタタグの仕様です。Facebookが2010年に策定し、現在は多くのプラットフォームが対応しています。

OGPを設定しないとどうなる？

OGPを設定しない場合、SNSがページ内の情報を自動的に推測してプレビューを生成します。その結果、意図しない画像（広告バナーやアイコンなど）が表示されたり、タイトルや説明文が不適切に切り詰められたりすることがあります。これによりクリック率が低下し、シェアの拡散効果も減少します。

FacebookのOGPとは？

FacebookのOGPとは、Facebookでの共有時に使用されるog:title、og:description、og:image、og:urlなどのメタタグです。OGP自体がFacebookによって策定された仕様であり、Facebookは最も厳密にOGPタグを解釈するプラットフォームです。確認にはFacebook公式の「シェアデバッガー」を使用します。

OGP画像の推奨サイズは？

OGP画像の推奨サイズは1200×630px（アスペクト比1.91:1）です。このサイズであればFacebook・X・LINEのいずれでも大きなプレビュー画像として表示されます。ファイルサイズは5MB以下、形式はJPGまたはPNGが安全です。

サイト全体のSEO状態を把握したい方へ

inSiteなら、サイト全体のインデックス状況・内部リンク構造を一元管理。SEOの改善サイクルを効率化できます。

14日間無料トライアルを始める

カード登録不要 / 自動課金なし