Kostenloser OG Image Preview

Sehen Sie, wie Ihr Link auf Social Media aussieht, bevor Sie ihn teilen.

Enter Your Meta Tags

Enter your OG tags manually below to preview how they render on each platform. URL fetching requires a server-side proxy due to browser CORS restrictions.

0/60 chars
0/160 chars

Recommended: 1200x630px (1.91:1 ratio) for best results across all platforms.

Social Media Previews

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

What Is an Open Graph Preview Tool?

An Open Graph preview tool lets you see exactly how your web page will appear when someone shares your URL on social media. Open Graph (OG) meta tags control the title, description, and image that platforms like Facebook, Twitter/X, LinkedIn, Discord, Slack, and WhatsApp display in link previews. Without proper OG tags, platforms pull random content from your page — often resulting in missing images, truncated titles, or irrelevant descriptions that hurt your click-through rates.

This free tool lets you enter your OG meta data manually and preview how it renders across 6 major platforms — all client-side with zero data sent to any server. You can check character limits, validate image dimensions, and export ready-to-paste HTML meta tags. Whether you're a developer debugging link previews, a marketer optimizing social shares, or a content creator ensuring your posts look professional, this tool saves you the tedious cycle of updating tags, deploying, and re-scraping on each platform.

Tips for Perfect Social Media Link Previews

1

Use 1200x630px Images

The 1.91:1 aspect ratio (1200x630px) works across all major platforms. Facebook, LinkedIn, and Twitter all crop to this ratio for large preview cards. Avoid text-heavy images — keep important content centered.

2

Keep Titles Under 60 Characters

Facebook truncates titles around 60-65 characters. Twitter is similar. Write concise, compelling titles that convey value within this limit. Front-load keywords for maximum impact.

3

Descriptions: 155 Characters Max

Most platforms truncate descriptions between 155-200 characters. Write the most important information first. Include a clear value proposition or call-to-action within the first 155 characters.

4

Always Include og:image

Links without images get significantly fewer clicks. Posts with link preview images see 2-3x higher engagement on average. Use high-quality, relevant images that complement your title.

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.

Kleap OG Preview vs Other Tools

FeatureKleapMetatags.ioOpenGraph.xyzFacebook Debugger
PriceFreeFree (limited)Free (limited)Free
Platforms Previewed6 platforms4 platforms3 platformsFacebook only
Manual Tag EntryYesYesNo (URL only)No (URL only)
Copy Meta TagsYesYesNoNo
Character WarningsYesNoNoNo
No Signup RequiredYesYesYesFacebook login

Frequently Asked Questions

What are Open Graph meta tags?+
Open Graph (OG) meta tags are HTML tags placed in the <head> section of your web page that control how your URL appears when shared on social media. The main tags are og:title (the headline), og:description (a summary), og:image (the preview image), og:url (the canonical URL), and og:type (content type like website or article). Without these tags, platforms try to guess what to show — often with poor results.
What is the recommended OG image size?+
The recommended Open Graph image size is 1200x630 pixels with a 1.91:1 aspect ratio. This size works well across Facebook, Twitter/X, LinkedIn, Discord, Slack, and WhatsApp. For Twitter summary cards (not large image), use 120x120px minimum. Always use images larger than 200x200px — Facebook won't display images smaller than this.
Why does my link preview show the wrong image?+
This usually happens because: 1) Your og:image URL is a relative path instead of an absolute URL. 2) The image is behind authentication or on localhost. 3) The image is too small (under 200x200px). 4) The platform has cached an old version — use the platform's debug tool (Facebook Debugger, Twitter Card Validator) to force a re-scrape. 5) Multiple og:image tags exist and the platform picked the wrong one.
How do I force Facebook to update my link preview?+
Use Facebook's Sharing Debugger tool (developers.facebook.com/tools/debug). Enter your URL and click 'Scrape Again'. This forces Facebook to re-fetch your OG tags and update the cached preview. Note that it may take a few minutes for the change to propagate across all of Facebook's servers.
What is the difference between og:image and twitter:image?+
og:image is the standard Open Graph tag used by Facebook, LinkedIn, Discord, Slack, WhatsApp, and most other platforms. twitter:image is Twitter/X-specific. If twitter:image is not set, Twitter falls back to og:image. You only need twitter:image if you want to show a different image on Twitter than on other platforms. The twitter:card tag (summary or summary_large_image) controls the layout style.
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.

Website mit perfekten Social-Media-Vorschauen erstellen

Kleaps KI-Website-Baukasten generiert automatisch optimierte OG-Tags.

Jetzt kostenlos starten

Related Free Tools

Image Compressor

Meta Tags Generator

Social Media Post Generator

Favicon Generator

Kostenloser OG Image Preview | Social-Media-Vorschau testen | Kleap