DevTools Surf logoDevTools Surf
AI / Modern DevAnimation / CSSAPI / Config
Sign in
DevTools Surf logoDevTools Surf
AI / Modern DevAnimation / CSSAPI / Config
Sign in
HomeWeb / FrontendOpenGraph Image Debugger

Example: OpenGraph Image Debugger

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input
<title>My App</title>
<meta property="og:title" content="My App">
<meta property="og:description" content="A great app">
<meta property="og:image" content="https://example.com/og.png">
Output
═══ Summary ═══
og:title: My App
og:description: A great app
og:image: https://example.com/og.png
Declared size: (not declared)
og:image:alt: (missing)
og:url: (missing)
og:type: (missing)
twitter:card: (missing)
✓ Nothing that breaks the preview
⚠ 6 improvements available
═══ Improvements ═══
⚠ og:image:width and og:image:height are not declared. Without them the first share of a URL often renders without the image while the crawler downloads it.
⚠ No og:image:alt — screen readers announce the card with no description of the picture.
⚠ No og:type. Add <meta property="og:type" content="website"> (or "article").
⚠ No og:url — shares of tracking-parameter variants will not be merged into one canonical share count.
⚠ No og:site_name — Slack and Discord use it as the card's byline.
⚠ No twitter:card. Add <meta name="twitter:card" content="summary_large_image"> for a full-width image on X.
═══ Per-platform ═══
ℹ Declare og:image:width and og:image:height to have the per-platform size and crop checked here.
Facebook: ideal 1200×630 (1.91:1), minimum 200×200, under 8 MB
X — summary_large_image: ideal 1200×675 (2:1), minimum 300×157, under 5 MB
X — summary: ideal 400×400 (1:1), minimum 144×144, under 5 MB
LinkedIn: ideal 1200×627 (1.91:1), minimum 200×200, under 5 MB
Slack: ideal 1200×630 (1.91:1), minimum 200×200, under 2 MB
Discord: ideal 1200×630 (1.91:1), minimum 200×200, under 8 MB
WhatsApp: ideal 1200×630 (1.91:1), minimum 300×200, under 0.3 MB
═══ Tags to add ═══
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta prope
…

About OpenGraph Image Debugger

OpenGraph Image Debugger preview - Web / Frontend tool

Validate OpenGraph meta tags and preview how URLs appear when shared. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

  • Verifying social previews before launching a marketing page
  • Debugging why shared links show broken images on Slack
  • QA-testing OpenGraph tags across multiple social platforms
  • Ensuring blog posts display rich previews when shared on LinkedIn

Tips

  • Paste any URL to preview its Twitter and Facebook cards
  • Check for missing og:image dimensions that cause cropping
  • Validate that og:title stays under 60 characters for best display

Fun Facts

  • The OpenGraph protocol was introduced by Facebook in 2010 at their f8 developer conference, turning any web page into a 'rich object' in a social graph.
  • Twitter Cards launched in 2012 as Twitter's own metadata standard, but most sites now include both OG and Twitter meta tags for full coverage.
  • LinkedIn truncates og:title at 120 characters and og:description at 150, while Facebook allows up to 95 characters for titles in feed.

FAQ

Why wouldn't my OG image show?
Common reasons: relative URL instead of absolute, wrong dimensions (<200×200 fails on some), image not publicly accessible, or Facebook/Twitter cached the old version.
Does it force a cache refresh?
Can't from browser — use Facebook's Sharing Debugger (developers.facebook.com) or Twitter's Card Validator (cards-dev.twitter.com) to force-refresh their caches.
What's the minimum image size?
1200×630 for Facebook/LinkedIn (1.91:1). 1200×675 for Twitter (16:9). Smaller images get upscaled and look bad.
What if my image is dynamically generated?
OG images from Next.js's `opengraph-image.tsx` or similar work fine. Just ensure the URL is absolute and the endpoint is publicly cacheable.

Related Web / Frontend Tools

Meta Tags / OG PreviewerTailwind → CSSHTML → React JSXHTML → MarkdownSVG → React ComponentCSS Unit Converterrobots.txt ValidatorSitemap XML Validator
New · Flagshipsimple REST client

REST Handler — Collections, env vars, history, cURL converter

Send requests, save collections (nested), swap environments, and convert between cURL / Collection JSON / REST Handler YAML.

Open

Popular tools

The most-used tools on DevToolsSurf, one click away.

Encoding & crypto

  • Base64 Encode
  • Base64 Decode
  • URL Encoder
  • URL Decoder
  • Hash Generator
  • JWT Decoder
  • JWT Encoder
  • UUID Generator
  • ULID Generator
  • Password Generator
  • Bcrypt Hash Tester

Converters

  • CSV to JSON
  • JSON to CSV
  • XML to JSON
  • JSON to XML
  • HTML → Markdown
  • HTML → React JSX
  • cURL to Code
  • Collection JSON → cURL
  • Swagger to Collection JSON
  • JSON → Go Struct
  • JSON → TypeScript Types

JSON & YAML

  • JSON Formatter
  • JSON Validator
  • JSON Viewer
  • JSON Minifier
  • JSON Diff
  • JSONPath Tester
  • YAML Formatter
  • YAML to JSON
  • JSON to YAML

Text & regex

  • Regex Tester
  • Text Diff
  • Case Converter
  • Word Counter
  • Markdown Preview
  • Slug Generator
  • Lorem Ipsum Generator
  • Markdown → PDF

CSS & color

  • CSS Beautifier
  • Minify CSS
  • Color Converter
  • Gradient Generator
  • Contrast Checker
  • Color Palette Generator
  • Flexbox Playground
  • Tailwind → CSS

Generators

  • QR Code Generator
  • Mock Data Generator
  • Favicon Generator
  • .gitignore Builder
  • README.md Generator
  • Dockerfile Generator
  • Sitemap Generator

API & networking

  • REST Handler
  • HTTP Header Analyzer
  • IP Address Lookup
  • CIDR Calculator
  • User-Agent Parser
  • HTTP Status Reference
  • OpenAPI Viewer

Date & time

  • Timestamp Converter
  • Timezone Converter
  • Cron Expression Parser
  • Duration Calculator
  • Age Calculator
  • Date Format Converter

Images

  • Image Converter
  • Image Resizer (Batch)
  • SVG Optimizer
  • Base64 ↔ Image
  • WebP ↔ AVIF Converter
  • Image Compressor

PDF tools

  • PDF Merger
  • PDF Splitter
  • PDF Compressor
  • Markdown → PDF
  • EPUB → PDF
  • MOBI / AZW → PDF
  • DOCX → PDF
  • HTML → PDF

Resources

  • Community feed
  • Themes marketplace
  • Pricing & credits
  • Privacy policy
  • Terms of service
  • Sitemap
  • robots.txt

Your account

  • Sign in
  • Dashboard
  • Run history
  • My profile
  • Settings
DevTools Surf logo
DevTools Surf919+ tools

Fast · privacy-first · client-side · © 2026

Home·Feed·ThemesPricing·Sign inPrivacy·Sitemap Feedback