Softonic

Open Graph プレビュー

ステップ 1 / 2
次へ

タイトル、説明、サイト名、ページ URL、画像 URL を入力すると、このツールがキーを打つたびに更新される Facebook と X(Twitter)の共有カードをリアルタイムでレンダリングします。Open Graph タグのためのデザイン用サンドボックスです。何も取得も公開もしないので、カードが良い見た目になるまで見出しの長さや画像のトリミングを試し、その文言を実際の og: タグにコピーできます。

プレビューの組み立て方

  1. 1

    カードの項目を入力

    タイトル、サイト名、説明、ページ URL、画像 URL。各項目は 1 つの og: タグに対応します。

  2. 2

    カードが更新される様子を見る

    Facebook と X のモックが、入力するそばから各プラットフォームの実際のレイアウトと切り詰め方で再レンダリングされます。

  3. 3

    画像 URL を追加

    絶対 https の画像アドレスを貼り付けるとトリミングが見られます。空のままにすると Facebook カードにプレースホルダーが表示されます。

  4. 4

    og: タグにコピー

    カードが読みやすくなったら、同じタイトル、説明、画像をページのメタタグに移します。

各項目が何になるか

項目 Open Graph タグ カードでの表示
タイトル og:title 太字の見出し、1 行に切り詰め
説明 og:description 灰色の副題、2 行に制限
サイト名 og:site_name Facebook 見出しの上の小さなラベル
URL og:url ドメインが表示される。ホスト名が決める
画像 URL og:image 両方のモックカードで 1.91:1 にトリミング

ツールは入力した URL からホスト名を読み取るので、https://blog.example.com/post はカードに blog.example.com と表示されます。

2 枚のカードと、その違い

  • Facebook は画像を 1.91:1 にトリミングし、続いて小さな大文字でドメイン、1 行の太字タイトル、最大 2 行の説明を表示します。画像 URL がないと灰色のプレースホルダーをレンダリングし、これが現実の世界で平板で画像のない共有が生まれる最もよくある原因です。
  • X(Twitter) は角丸の summary_large_image カードを表示します: 2:1 でトリミングされた画像、ドメイン、タイトル、その下に説明。

文言をぴったり収める

  • タイトル: 60〜70 文字を目安に。Facebook は約 88 文字、X は約 70 文字で切り詰めるので、70 文字以内のタイトルはどこでも欠けずに収まります。
  • 説明: およそ 160 文字未満に保ちます。カードは 2 行に制限し、残りは切り捨てられます。
  • 画像: 1.91:1 のトリミングがきれいになるよう 1200 x 630 px で設計し、絶対 https:// の URL でホストします。相対パスはタグが公開されると読み込まれません。
  • サイト名: 短く、ブランド名のみで、キャッチコピーは入れません。見出しの上にラベルとして置かれます。

公開当日のチェックリスト

  • [ ] タイトルが 70 文字未満
  • [ ] 説明が 160 文字未満
  • [ ] 画像 URL が絶対指定(https。// や相対パスではない)
  • [ ] 画像を 1200 x 630 px、JPG または PNG で設計
  • [ ] URL が公開する正規 URL と一致
  • [ ] 文言を実際の og: タグにコピーし、チェッカーで検証

よくある質問

いいえ。カードの項目を手で入力すると、ツールがそれがどう見えるかをモックアップします。スクレイパーではなくデザイン用サンドボックスなので、ページが公開される前でも動作します。ページにすでにあるタグを読み取るには、代わりにそのページの HTML を Open Graph チェッカーに貼り付けてください。

Facebook カードと X(Twitter)の大きな画像カードです。どちらも同じ Open Graph の値を使うので、ここで読みやすいカードは、同じ og: タグから展開する LinkedIn、Slack、Discord などのアプリの良い目安になります。ただし各アプリの上限は少しずつ違います。

画像の項目が空か、貼り付けた URL が有効な絶対 https アドレスでないからです。完全な https の画像 URL を追加すると、トリミングがすぐに表示されます。公開するときは、ファイルを 5 MB 未満に保ち、公開された image/* のコンテンツタイプで配信してください。

各プラットフォームは異なる位置で切り詰め(Facebook は約 88 文字、X は約 70 文字)、モックカードもそれを反映します。タイトルを 60〜70 文字に切り詰めれば、どのプラットフォームでも欠けずに収まります。

関連ツール

メタディスクリプション長チェッカー

メタディスクリプションの文字数と推定ピクセル幅を測り、編集上の目安やデスクトップ・モバイルのレイアウト例と比較します。

HTTPセキュリティヘッダーチェッカー

HTTPレスポンスヘッダーを貼り付け、HSTS、CSP、クリックジャッキング、MIME、リファラ、クロスオリジン設定をブラウザー内で確認します。

Google SERP シミュレーター

モバイルとデスクトップの文字数上限を使って、Google 風の検索スニペットを概算で確認します。下書きはこのブラウザーセッション内にのみ残ります。

Canonicalタグジェネレーター

任意のURLに対して有効なrel=canonical linkタグを生成します。URLの検証と、避けるべきよくあるミスも含みます。

外部リンク抽出ツール

生のHTMLを貼り付け、必要に応じてベースURLを指定すると、コード内の外部http/httpsリンクを重複なしで一覧表示します。リンク監査やSEOレビューに最適です。

FAQスキーマ生成ツール

質問と回答のペアからFAQPageのJSON-LDマークアップを生成します。Googleのリッチリザルトや強調スニペットの対象になるための構造化データを数秒で用意できます。

このツールは他の言語でも利用できます