無料OG画像プレビューツール

URLを入力して、Facebook、Twitter、LinkedInでウェブサイトがどのように表示されるか確認。OGタグを検証し問題を特定。

メタタグを入力

OGタグを手動で入力して、各プラットフォームでの表示をプレビューしてください。URLフェッチはブラウザのCORS制限によりサーバーサイドプロキシが必要です。

0/60 chars
0/160 chars

推奨：すべてのプラットフォームで最良の結果を得るには1200×630px（1.91:1比）。

OGタグプレビュー

Fill in the fields on the left to see live previews of how your link will appear on each platform.

OG画像プレビューツールとは？

OG（Open Graph）画像プレビューツールは、ウェブサイトのOGメタタグを分析し、SNSで共有された際にどのように表示されるかをプレビューするツールです。

OGタグが正しく設定されていないと、SNSでの共有時に画像が表示されなかったり、タイトルや説明が正しく表示されなかったりします。当ツールで問題を事前に特定し修正できます。

OGタグのヒント

1

推奨画像サイズを使用

1200x630pxがFacebookとLinkedInで最適です。Twitterは1200x675pxが推奨されます。

2

必須タグを設定

og:title、og:description、og:image、og:urlの4つは必ず設定してください。

3

画像URLは絶対パスで

OG画像のURLは相対パスではなく、https://から始まる絶対パスで指定してください。

4

ページごとにカスタマイズ

各ページに固有のOGタグを設定すると、SNSでの共有効果が最大化されます。

5

Test on Each Platform

Each platform renders previews differently. Facebook uses large horizontal cards, Twitter supports both summary and large image cards, Discord shows an embed with accent color. Always preview on all platforms before launching campaigns.

6

Use Absolute URLs for Images

Social media crawlers cannot resolve relative image paths. Always use full absolute URLs (https://...) for og:image. Ensure images are publicly accessible — authenticated or localhost URLs will fail.

OG画像プレビュー：Kleap vs 代替サービス

機能KleapMetatags.ioOpenGraph.xyzFacebook Debugger
価格完全無料無料/有料無料/有料Free
対応プラットフォームFacebook、Twitter、LinkedInFacebook、Twitter、LinkedInFacebook、TwitterFacebook only
Manual Tag EntryYesYesNo (URL only)No (URL only)
Copy Meta TagsYesYesNoNo
Character WarningsYesNoNoNo
No Signup RequiredYesYesYesFacebook login

よくある質問

OGタグとは？+
Open Graphタグは、SNSでURLが共有された際にタイトル、説明、画像をどのように表示するかを制御するHTMLメタタグです。
OG画像の推奨サイズは？+
1200x630pxが最も広く対応しています。Twitterカード用には1200x675pxも推奨されます。
OGタグがないとどうなりますか？+
SNSがページの内容を推測して表示するため、不適切な画像やテキストが表示される可能性があります。
OGタグはSEOに影響しますか？+
直接的なSEOランキング要因ではありませんが、SNSでのクリック率に大きく影響し、間接的にトラフィックとSEOに貢献します。
Twitter用の特別なタグは必要ですか？+
OGタグがフォールバックとして使用されますが、twitter:cardとtwitter:imageを追加すると、Twitter固有の表示を最適化できます。
Do I need both OG and Twitter meta tags?+
You always need OG tags (og:title, og:description, og:image) since most platforms use them. Twitter/X-specific tags (twitter:card, twitter:title, twitter:description, twitter:image) are optional — Twitter falls back to OG tags if they're missing. However, twitter:card is recommended because it controls whether Twitter shows a small square image (summary) or a large banner image (summary_large_image).
Why can't this tool fetch OG tags from a URL?+
Browser security policies (CORS) prevent client-side JavaScript from fetching content from other websites. To read OG tags from a URL, you need a server-side proxy or API. This tool focuses on manual entry so it can run 100% in your browser with zero data sent to any server — your meta tags never leave your device.
What is og:type and what values should I use?+
og:type tells platforms what kind of content your page contains. Common values are: 'website' (homepage, landing pages), 'article' (blog posts, news), 'profile' (personal pages), and 'product' (e-commerce items). The default is 'website'. Facebook uses this to categorize content in news feeds. For most pages, 'website' is fine; use 'article' for blog posts to enable additional tags like article:published_time.
How do OG tags affect SEO and click-through rates?+
OG tags don't directly affect Google rankings, but they significantly impact click-through rates from social media. Posts with optimized OG tags (compelling title, clear description, eye-catching image) can see 2-3x higher engagement compared to posts with missing or auto-generated previews. Higher engagement means more traffic, which indirectly benefits SEO through increased backlinks and brand visibility.
Can I use different titles for Google and social media?+
Yes. The HTML <title> tag is what Google shows in search results, while og:title is what social platforms show in link previews. You can optimize each for its context — a shorter, keyword-rich title for Google and a more compelling, curiosity-driven title for social sharing. Similarly, meta description and og:description can be different to optimize for each channel.

SNS対応のウェブサイトを構築

KleapのAIウェブサイトビルダーでOGタグが自動設定されたプロフェッショナルなサイトを作成。

無料で構築を開始

Related Free Tools

Image Compressor

Meta Tags Generator

Social Media Post Generator

Favicon Generator

無料OG画像プレビューツール | SNS共有プレビュー | Kleap