OG Preview ToolとMeta Tag Generatorの違いは何ですか?

Meta Tag Generatorはmeta/OGP/Twitter CardのHTMLタグをフォーム入力から生成することが主目的のツールです。OG Preview Toolはタグの生成ではなく、入力したtitle・description・画像URL・サイト名がTwitter/X・Facebook・LINEで実際にどのようなカードとして見えるかを、各SNSに近いレイアウトで大きくプレビューすることに特化しています。タグのコードが欲しい場合はMeta Tag Generatorをご利用ください。

URLを入力すると、そのページのOGPタグを自動取得しますか?

いいえ、自動取得(スクレイピング)は一切行いません。全ての項目は手入力です。画像URL欄に入力した値だけは、プレビュー表示のためにブラウザが直接その画像を読み込みますが、これは通常の画像表示と同じ挙動であり、タイトルや説明文など他の入力内容が外部に送信されることはありません。

実際のTwitterやFacebookでの表示と完全に一致しますか?

近似的なプレビューであり、完全な一致を保証するものではありません。各SNSのカードデザインはアプリのバージョンやOS、シェアされる文脈(投稿・DM・グループチャットなど)によって細部が変わることがあります。公開前には各社が提供する公式のデバッガー(例: X Card Validator、Facebookシェアデバッガ)でも確認することをおすすめします。

LINEのプレビューはどんな場面で使われますか?

LINEでURLを含むメッセージを送信すると、トーク画面にog:title・og:image・og:site_name(またはドメイン)を使ったリンクプレビューカードが表示されます。日本国内向けのサービスやメディアではLINEでの共有頻度が高いため、Twitter/X・Facebookに加えてLINEでの見え方も確認できるようにしています。

画像が表示されない場合はどうすればいいですか?

画像URLが正しいhttps絶対URLになっているか、画像自体が公開アクセス可能か(認証や社内ネットワーク限定になっていないか)を確認してください。相対パス(/images/og.png など)を指定すると、実際のSNS環境では読み込めても本ツールのプレビューでは失敗することがあります。必ず https:// から始まる絶対URLを入力してください。

OG Preview(OGPカードの見え方プレビュー)

title・description・画像URL・サイト名を入力し、Twitter/X・Facebook・LINEでシェアした際の見え方をカード形式でプレビューします。

入力欄の値はすべて手入力です。URLからOGPタグを自動取得(スクレイピング)する機能はありません。画像URLはお使いのブラウザが直接読み込んでプレビュー表示するだけで、タイトルや説明文など他の入力内容が外部に送信されることはありません。

入力

サイト名 (og:site_name)

ページタイトル (0/60)

説明文 (0/155)

画像URL (og:image、1200×630推奨)

ページURL

Twitter Cardタイプ

OGPタグのHTMLコードをフォームから生成したい場合は Meta Tag Generatorをご利用ください。画像サイズの目安はOG画像の最適サイズガイドで解説しています。

Twitter / X プレビュー

画像URLを入力するとここに表示されます

example.com

ページタイトルがここに表示されます

Facebook プレビュー

画像URLを入力するとここに表示されます

example.com

ページタイトルがここに表示されます

説明文がここに表示されます

LINE プレビュー

No Image

ページタイトルがここに表示されます

example.com

※実際の表示はアプリのバージョンやOS、シェアされる文脈によって異なる場合があります。公開前には各SNS公式のデバッガーでの確認もおすすめします。

How to Use the OG Preview Tool

Type in your page's site name, title, description, image URL and page URL to see how the resulting Open Graph card would look when shared on Twitter/X, Facebook and LINE. Every field is typed by hand — this tool does not fetch or scrape any page's existing meta tags. The image URL is only used to render an <img> preview directly in your browser, exactly like pasting an image link into any editor; no other field is ever transmitted anywhere.

How is this different from the Meta Tag Generator?

The Meta Tag Generator focuses on producing copy-paste-ready HTML meta/OG/Twitter Card tags from a form. This tool focuses on the visual result: large, platform-styled card mockups for Twitter/X, Facebook and LINE, so you can sanity-check truncation, image cropping and layout before you publish. Use the Meta Tag Generator when you need the actual tag markup; use this tool when you need to see it.

OG Previewの使い方

サイト名・ページタイトル・説明文・画像URL・ページURLを入力すると、Twitter/X・Facebook・LINEでのシェア時の見え方を、各SNSに近いレイアウトのカードとして即座にプレビュー表示します。全ての項目は手入力で、URLを入力しても自動でOGPタグを取得(スクレイピング)することはありません。画像URLだけはブラウザが直接読み込んでプレビューに表示しますが、他の入力内容が外部に送信されることは一切ありません。

各SNSでの表示仕様の目安 / Platform Specs (Approximate)

プラットフォーム	推奨画像サイズ・比率	タイトルの目安	説明文の表示
Twitter / X	1200×630(1.91:1)、summaryは1:1も可	〜70文字程度	カード上には基本的に表示されない
Facebook	1200×630(1.91:1)、最小600×315	〜100文字程度	1〜2行程度に短縮表示
LINE	正方形に近い比率が安定	2行程度で見切れやすい	表示されないことが多い(og:site_name優先)

※上記は一般的な目安であり、各プラットフォームの仕様変更やアプリバージョンにより変動します。

よくある落とし穴と対処 / Common Pitfalls

落とし穴 / Pitfall	問題 / Problem	対処 / Fix
og:imageを相対パスで指定する Using a relative path for og:image	多くのクローラーはページを起点に相対URLを解決できず、画像が表示されない Most crawlers cannot reliably resolve relative image paths	必ず https:// から始まる絶対URLを指定する Always use an absolute https:// URL
画像サイズが小さすぎる Image dimensions too small	Twitter/X・Facebookとも画像に最小サイズがあり、下回ると大きなカードで表示されない Both platforms have minimum size thresholds for large-image cards	1200×630px以上を用意する。Aspect Ratio Calculatorで比率を確認 Use at least 1200x630px
twitter:cardの指定を忘れる Forgetting to set twitter:card	未指定時はsummary(小さい画像)として扱われることがある Missing twitter:card can fall back to the small summary layout	大きな画像で見せたい場合はsummary_large_imageを明示する Explicitly declare summary_large_image
SNS側のキャッシュで更新が反映されない Platform-side caching hides your update	一度シェアされたURLのOGPはSNS側にキャッシュされ、画像やタイトルを変更しても古いまま表示され続ける Once scraped, platforms cache the OG data for that URL	各社の公式デバッガー(シェアデバッガ等)で再取得(re-scrape)する Force a re-scrape via each platform's official debugger
LINEで説明文が表示されないことに戸惑う Confused when LINE doesn't show the description	LINEのリンクプレビューはog:site_nameやタイトルを優先し、説明文は表示されないことが多い LINE's preview often prioritizes og:site_name/title over the description	LINEでの見え方を重視するならタイトルとog:site_nameを分かりやすく設定する Optimize the title and site name if LINE sharing matters most

タグのコード例 / Example Tags

プレビューが確認できたら、実際のHTMLタグは次のような形になります(具体的な値はページごとに置き換えてください)。フォーム入力からこのコードをそのまま生成したい場合はMeta Tag Generatorが便利です。

<meta property="og:site_name" content="サイト名" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="説明文" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page/" />
<meta name="twitter:card" content="summary_large_image" />

Why browser-only?

The title, description and image you preview here often describe a page that is not public yet — an unannounced launch, a draft article, an internal campaign. This tool renders all three card mockups with plain HTML and CSS in your browser. The only network activity is your browser loading the exact image URL you typed, the same as pasting that URL into any image tag — no title, description, site name or page URL is ever sent anywhere. Confirm it yourself in the DevTools Network tab.

プレビューするタイトルや説明文、画像は、まだ公開していないページ(未発表のローンチや下書き記事など)を対象にすることが多いものです。本ツールは3種類のカードをHTMLとCSSでブラウザ内に描画するだけで、発生する通信は入力した画像URLをブラウザが直接読み込む分のみです。タイトル・説明文・サイト名・ページURLが外部に送信されることはありません。