OGPプレビューツール｜SNSシェア時の見た目をHTMLソースから即確認

HTMLソースを貼り付けるだけでTwitter/X・Facebook・LINEのOGP表示をプレビュー。公開前・ローカル環境でも確認できる完全ブラウザ処理のOGPチェッカー。

ブラウザ内処理完全無料登録不要

HTMLソースを貼り付け

確認したいページで Ctrl+U（Mac: Cmd+U）を押してソースを開き、全選択してコピーしてください。

このツールについて

使い方・特徴・補足情報

OGPプレビューとは

OGP（Open Graph Protocol）は、ページを SNS でシェアしたときの見た目を決めるメタタグの仕様です。<head> に記述します。

本ツールは HTML ソースを貼るだけで、X・Facebook・LINE のシェアプレビューを表示します。

処理はすべてブラウザ内の DOMParser で完結します。公開前やローカル、BASIC 認証下のページでも確認できます。

HTML を外部へ送らないため、機密の漏洩リスクなく試せます。

👤 こんな人におすすめ✨

Webページを公開する人

✅ 楽になること

SNSシェア時のOGP表示の確認

✍️ 避けたい手間

公開後のサムネ崩れ

解決できる困りごと

記事公開後に SNS のサムネが崩れていたという事故を未然に減らせる
各 SNS で表示が違うかどうかを並べて確認できる
公開前のローカル環境でも OGP タグの抜け漏れを発見しやすい

使い方

確認したいページをブラウザで開き、Ctrl+U（Mac: Cmd+U）でソースを表示します
ソース全体をCtrl+A → Ctrl+Cでコピーします
入力エリアにペーストして「OGPを解析する」ボタンをクリックします
Twitter/X・Facebook・LINEのプレビューと設定済みタグ一覧を確認します

使用例

OGPタグから SNS プレビュー生成

HTML ソースの og:title / og:description / og:image を読み取って Twitter・Facebook・LINE 用プレビューに変換する例です。

入力

<meta property="og:title" content="てもとツール｜ブラウザだけで動く無料ツール集">
<meta property="og:description" content="文字数カウントや単位変換など、業務で使える無料Webツールを集めました。">
<meta property="og:image" content="https://temototool.com/ogp/top.png">
<meta name="twitter:card" content="summary_large_image">

出力

[Twitter / X]  large_image カード形式
  タイトル: てもとツール｜ブラウザだけで動く無料ツール集
  説明: 文字数カウントや単位変換など、業務で使える無料Webツールを集めました。
  画像: https://temototool.com/ogp/top.png（1200×630px 推奨）
[Facebook]    縦長カード
[LINE]        サムネイル付きシェア

OGP タグが不足しているケース

og:image が抜けていると SNS で画像が表示されません。本ツールは抜け漏れを警告メッセージで知らせます。

入力

<meta property="og:title" content="新商品ページ">
<!-- og:image を書き忘れ -->

出力

[Warning] og:image が見つかりません。SNS シェア時にサムネイルが表示されない可能性があります。
[Warning] og:description が見つかりません。説明文が自動抽出されます。

活用シーン

公開前ページの事前チェック

ステージングのページは外部に出ていないため、URL 入力型では確認できません。本ツールは HTML を貼って解析するので、公開前に OGP を確かめられます。

Twitter/X カードの表示確認

summary と summary_large_image では表示が大きく違います。設定したタグがどのカードになるかを、プレビューで先に把握できます。

LINEシェア時のサムネイル確認

LINE は og:title・og:description・og:image でプレビューを作ります。国内で重要な経路なので、画像が正しく出るか確認できます。

OGPタグの漏れを一覧で確認

推奨タグがそろっているかを、表形式でひと目で確認できます。未設定タグには追加すべき HTML のサジェストも出ます。

BASIC認証・VPN下のページ確認

イントラや VPN 経由のページは、URL 入力型では確認できません。HTML を貼る方式なら、アクセス制限に関わらず OGP を確かめられます。

技術的な解説

補足: 仕組み

解析には DOMParser を使います。HTML から DOM を作り、meta タグを走査して OGP 値を抽出します。

property（og 系）と name（twitter 系）の両方を見ます。twitter:image が無ければ og:image を使うフォールバックも入れています。

巨大ファイルの固まりを防ぐため、解析は先頭10万文字に限ります。DOMParser は JS を実行しないため安全です。

もっと詳しく

og:とtwitter:の優先順位

OGP には og 系と twitter 系の2系統があります。多くの SNS は twitter 系が無ければ og 系へフォールバックするので、最小構成なら og 系だけで X でもカードは出ます。

逆に画像を系統ごとに別物にすると、表示先で絵が食い違います。両方をそろえるか、片方に寄せるのが安全です。

シェアしてもカードが古いままの理由

各 SNS は取得した OGP 値をサーバー側でキャッシュします。直したのに反映されないのは、HTML ではなく SNS のキャッシュが古いためです。

X や Facebook のデバッガーで再取得するとキャッシュが更新されます。本ツールは HTML 時点の値を映すので、原因の切り分けに使えます。

よくある質問

URLを入力してプレビューできますか？

現時点では URL 入力に対応しておらず、これは CORS の制限でクライアントから任意の URL を取得できないためです。HTML ソース（Ctrl+U）をコピーして貼り付けてください。

og:imageの画像が表示されません

画像 URL が相対パスの場合や、CORS 制限のある外部 URL の場合は表示されないことがあります。そのときカードには URL のテキストが出るため、実際の SNS 表示とは異なる場合があります。

設定は正しいのにプレビューが違う

SNS のシェアカードは各社のサーバーがキャッシュを持つため、実際の表示と差が出ることがあり、各社のデバッガーで更新できます。本ツールは HTML 時点の値をそのまま表示します。