X、Facebook、Threads攻略ツールOGPチェックシミュレーター

※ 入力されたURLや診断結果は保存・公開されません。
※入力されたHTMLコードや診断結果は保存・公開されません。
📁

OGP画像をアップロード、またはドラッグ＆ドロップ

※アップロードされた画像はサーバーに保存されず、ブラウザ内でのみ処理されます。

使い方

  1. 上部の入力欄に確認したいWebページのURLを入力してください。
  2. 「解析実行」ボタンを押すと、現在のOGP設定やメタタグ情報を取得できます。
  3. 編集パネルでタイトルや説明文、画像をリアルタイムに調整できます。
  4. HTMLコードを直接貼り付けて解析したり、画像プレビューモードでSNSカードの表示確認も可能です。

このツールで出来ること

  • X, Facebook, Threads, LINEでのSNSカード表示確認
  • タイトル・説明文・画像のリアルタイム編集プレビュー
  • 各デバイス・SNSごとのレイアウト差異の把握
  • 画像サイズの自動チェック（推奨1200x630px）
  • HTML貼り付けモードでソース解析
  • 画像プレビューモードで表示崩れや文字切れ確認

OGPの基礎知識と効果

OGPとは？

Open Graph Protocol（OGP）は、SNSでURLがシェアされた際にタイトル、画像、説明文を正しく表示するための仕組みです。 適切に設定することで、カード形式で視覚的に魅力的に表示され、クリック率（CTR）の向上に繋がります。

ツールによる効果

このシミュレーターを利用すると、文字切れや画像トリミングを事前に確認でき、URL・HTML解析・画像プレビューを通じて最適なOGP設定を行えます。 SNSでのシェアによる流入改善や、CTR最大化に役立ちます。

プラットフォーム別の違いと調整のコツ

各SNSの特性

  • X: 画像が大きく表示されるLarge形式が主流。説明文よりもタイトル重視。
  • Facebook: タイトルの下にドメインが強調され、信頼性が重視される。
  • LINE: トーク画面のサイズにより画像がトリミングされやすいため、中央配置が基本。
  • Threads: タイトルとドメインを重視。PCとアプリで画像のトリミング範囲が異なる。

よくある失敗・表示されない原因

  • 画像URLが相対パス（/img/ogp.jpgなど）になっている。※絶対パス必須
  • 画像サイズが300px以下
  • SNS側のキャッシュが古い（各社のデバッガーでの更新が必要）
  • 画像URLに日本語が含まれている（エンコードが必要）

OGP公開前攻略チェックリスト

  • 画像URLは「https://」から始まる絶対パスか？
  • 画像の比率は1.91:1（1200x630px推奨）に近いか？
  • タイトルに重要なキーワードが左側に配置されているか？
  • 各SNSプレビューで文字や画像が切れていないか？

OGPの最適な文字数目安

og:title（タイトル）

推奨：30文字〜50文字（重要部分は前半30文字以内）

  • スマホ表示では32文字を超えると「...」で省略される傾向があります
  • 15文字以内に最重要キーワードを配置するのが鉄則

og:description（説明文）

推奨：90文字〜140文字（重要部分は前半60文字）

  • PCでは120文字程度まで見えますが、スマホ（特にXのタイムライン）では50〜80文字程度で切れることが多いです
  • 冒頭の1文で「自分に関係がある」と思わせることが重要です

応用：クリック率（CTR）を最大化する5つのコツ

  • 画像内にテキストを入れる： タイムライン上では文字情報よりも「画像」が先に目に入ります。記事の結論やベネフィットを画像内にも記載しましょう。
  • 「自分事化」させる問いかけ： 説明文の冒頭を「〜で悩んでいませんか？」といった問いかけから始めると、指が止まりやすくなります。
  • 数字と具体性： 「驚きの効果」よりも「30日間で15%改善」のように、具体的な数字を入れることで信頼性が増します。
  • カードサイズを意識： X（旧Twitter）では `summary_large_image` を指定し、画面占有率を上げることが基本戦略です。
  • ターゲットに合わせたトーン： ThreadsやInstagram（Meta系）では親近感のある表現、Facebookではフォーマルな表現が好まれます。

OGP設置・各種メタタグ完全解説

1. 基本の必須OGPコード（共通セクション）

すべてのSNSで共通して参照される最も重要なタグです。これらをまとめて記述します。

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページ説明">
<meta property="og:url" content="ページURL">
<meta property="og:image" content="OGP画像のURL">
<meta property="og:type" content="ページの種類">
<meta property="og:site_name" content="サイト名称">
  • og:title: 記事のタイトル。SNSで最も目立つ部分です。
  • og:description: 記事の要約。30〜80文字程度がスマホで読みやすい目安です。
  • og:url: ページの正規URL（絶対パス）。
  • og:image: シェア時に表示される画像URL。1200x630pxが黄金比です。
  • og:type: トップなら `website`、記事なら `article` を指定します。

2. X（旧Twitter）専用タグ

Xでのカード表示を最適化するための設定です。`og:title` などが未設定の場合は共通OGPが参照されますが、カード形式の指定などは必須です。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:description" content="ページ説明">
<meta name="twitter:image" content="サムネ画像のURL">
<meta name="twitter:site" content="@ユーザー名">
<meta name="twitter:creator" content="@作者のユーザー名">

X専用タグ設置のメリット

  • 表示形式の制御: `twitter:card` で大きな画像（large）か小さな画像か選べ、クリック率を最大化できます。
  • 最適化: `og:title` よりも短いX専用タイトルを出し分けるなど、プラットフォームに合わせた訴求が可能です。
  • アカウント紐付け: 公式アカウントを表示し、フォロワー獲得に繋げられます。

X専用タグ設置のデメリット

  • コードの冗長化: 基本のOGPと内容が重複する場合、HTMLの容量がわずかに増えます。
  • 管理コスト: タイトル変更時に両方のタグを書き換える手間が発生します。

3. Facebook専用タグ

Facebook for Developersで発行したIDを記述します。ドメイン所有権の証明や、シェア数の分析機能を利用する際に必要です。

<meta property="fb:app_id" content="FacebookアプリID">

4. LINE・Threads・その他のタグ

LINEやThreadsには独自のメタタグという概念はほぼなく、共通のOGPタグがそのまま使用されます。そのため、基本のOGP（og:〜）を正確に設定することが最も有効な対策となります。

5. SEO正規化（Canonical）

SNS用の `og:url` とは別に、検索エンジンに対して「このURLが正解である」と伝えるためのタグです。

<link rel="canonical" href="正規URL">

※配置のポイント: `canonical` はクローラーが最初に見つけるよう `` の上部に、`og:url` は他のOGPタグと固めて記述するのがセオリーです。

よくある質問（FAQ）

設定を変えたのにSNSの表示が変わりません。

SNS側に古いキャッシュが残っている可能性があります。Xの「Post Validator」やFacebookの「シェアデバッガー」を使用してキャッシュを強制更新してください。SNSは一度取得したOGP情報をキャッシュするため、変更後すぐに反映されない場合があります。

og:imageの推奨サイズは？

1200 × 630 px（比率 1.91:1）が推奨サイズです。このサイズで作成すれば、Facebook・X・LINEなど主要なSNSで最も綺麗に表示されます。最低でも600 × 315 px以上を推奨します。

Twitter用のタグを設定しないと表示されませんか？

twitter:title などが未設定の場合、多くのSNSは og:title などの共通タグを代用して表示します。ただし、カードの種類を指定する twitter:card は個別に設定することを推奨します。summary_large_image を指定すると大きな画像で表示されます。

og:imageが表示されない原因は？

主な原因は以下の通りです。

  • 画像URLが間違っている
  • 相対URL（relative URL）を使用している
  • 画像サイズが小さい
  • SNS側のキャッシュが残っている
  • HTTPSでない画像URLを使用している

特に多いのは「相対URL」と「キャッシュ」の問題です。絶対URL（https://〜）で指定することを推奨します。

twitter:cardが反映されない原因は？

twitter:cardが反映されない主な原因は以下です。

  • twitter:cardが設定されていない
  • twitter:imageが指定されていない
  • 画像サイズが小さい
  • キャッシュが残っている

summary_large_image を指定し、XのPost Validatorで再取得すると反映される場合があります。

relative URL（相対パス）は使えますか？

OGPでは絶対URL（absolute URL）の使用を推奨します。相対パスはSNSクローラーが正しく解釈できない場合があります。

NG例：/images/ogp.jpg

OK例：https://example.com/images/ogp.jpg

OGPの変更はどれくらいで反映されますか？

OGPはSNS側のキャッシュにより、すぐには反映されない場合があります。

  • X（旧Twitter）：数分〜数時間
  • Facebook：数分〜数時間
  • LINE：数時間〜1日
  • Threads：数時間

各SNSのデバッガーを使用すると、キャッシュを強制更新できます。

入力したURLやHTML、画像はサーバーに保存されますか？

いいえ、一切サーバー側に保存・蓄積・公開されることはありません。
本ツールはプライバシー重視の設計となっており、入力されたURLや解析データが当サーバーのデータベース等に記録されることはありません。

利便性のために提供している「解析履歴機能」についても、データはお客様自身のブラウザ（localStorage）内にのみ保存されます。当サーバーへ送信されたり、第三者や運営者がその内容を確認することは技術的に不可能ですので、ご安心ください。

特に「HTML貼り付けモード」で入力されたソースコードや解析画像については、外部に送信されることなく、すべてお客様のブラウザ上（JavaScript）で直接処理・測定されます。

解析内容がキャッシュとして当サーバーに残ることもありませんので、公開前の機密性の高いページ確認などにも安心してご利用いただけます。

Share