Open Graph Tester / Social Preview / Meta Tag Generator
Preview your website's social media first impression
Enter a URL to see how your website appears on Facebook, X, LinkedIn, Slack, and messaging apps. Generate Open Graph meta tags, diagnose metadata issues, and fix your link preview before customers share it.
See the card before your customers do
Turn plain links into clear, clickable social previews with the right title, description, image, and Open Graph tags.
Built for the places links actually travel
Secure fetching, accurate parsing, trustworthy previews
OpenGraphy does not fetch target sites from the user's browser. The backend simulates crawler behavior: DNS and redirect checks, private network blocking, initial HTML parsing, image reachability checks, and clear diagnostics.
SSRF protectionEvery fetch validates DNS, IP ranges, and each redirect step to avoid localhost, private networks, and reserved addresses.
4-hour cacheMetadata and preview results are temporarily cached in Redis without long-term URL history or personal data.
DiagnosticsMissing tags, relative image URLs, image size, HTTP status, title length, and description length are checked.
Make every share look like a carefully designed ad placement
Open Graph is the shared language used by social platforms, messengers, and content tools to read page previews. Put the right tags in your HTML head and you control the title, description, image, URL, and content type.
What is Open Graph?
OG tags are metadata for crawlers. Facebook, LinkedIn, Slack, Discord, WhatsApp, Telegram, and X usually read og:title, og:description, and og:image when generating link previews.
Recommended image size
The safest preview image size is 1200 x 630, about 1.91:1. Keep images lightweight so messaging apps can generate previews quickly.
Why fetch from the backend?
Most platform crawlers do not run browser JavaScript or wait for SPA rendering. Server-side fetching is closer to how real crawlers see your page.
Minimal useful Open Graph tags
If you can only fix one thing first, add title, description, image, and canonical URL. These solve most broken preview problems.
<meta property="og:title" content="你的頁面標題" />
<meta property="og:description" content="一段清楚、有吸引力的頁面摘要。" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />Different platforms interpret the same metadata differently
Facebook relies on og:title, og:description, and og:image. After edits, use Sharing Debugger to trigger a fresh scrape.
X / Twitter
X can fall back to OG metadata, but twitter:card and twitter:image make large image cards much more reliable.
LinkedIn often caches the first scrape. Check before publishing, then refresh changed titles or images with Post Inspector.
WhatsApp / iMessage
Oversized images are more likely to fail or be cropped. Compress images and provide width and height hints for faster previews.
Discord / Slack / Telegram
Chat apps prefer metadata present in the initial server HTML. Do not rely only on frontend JavaScript to inject tags.
Pinterest / Reddit
For ecommerce, portfolios, and articles, prepare square or vertical variants in addition to wide preview images.
How common stacks integrate
Next.js / Nuxt / Astro
Use the framework metadata API or SSR/SSG so OG tags are present in the HTML returned by the server.
WordPress
Use an SEO plugin or your theme head hook to output the post title, excerpt, featured image, and canonical permalink.
Single-page apps
If everything renders on the client, many crawlers will miss the metadata. Add SSR, prerendering, or static HTML for share pages.
FAQ
Does Open Graph directly affect SEO rankings?
Usually not as a direct ranking factor, but it can improve social click-through, sharing quality, traffic, citations, and brand exposure.
Why do platforms still show the old image?
Platforms cache scrape results. Use Facebook Sharing Debugger or LinkedIn Post Inspector to force a refresh, and version image URLs when needed.
What happens without OG tags?
Platforms guess from the title tag, meta description, or the first large image. The result is unpredictable and often looks broken.
Does tag casing matter?
Yes. Use standard lowercase names like og:title instead of OG:Title. Many crawlers are strict about casing.
