OGP Dev Tool

About

OGP Dev Tool gives web developers an instant preview of how a page's Open Graph Protocol (OGP) metadata will appear on social networks and popular UI component libraries — all without leaving Chrome.

Open the DevTools panel (F12 → OGP tab), navigate to any page, and see a full breakdown of every OGP tag alongside live-rendered previews.

──────────────────────────
🔍 What you can inspect
──────────────────────────
OGP Dev Tool reads and displays all major OGP-related meta tags including:
• og:title, og:description, og:image, og:url, og:type, og:locale
• og:image:width / og:image:height / og:image:type
• og:site_name, og:video, og:audio
• twitter:card, twitter:title, twitter:description, twitter:image, twitter:creator
• fb:app_id, article:author, article:published_time, and more

──────────────────────────
📱 Live social & UI previews
──────────────────────────
See exactly how your metadata renders in five preview styles:
• X (Twitter) — card preview with image, title, and description
• Facebook — link preview card
• shadcn/ui — clean card component
• Ant Design — card component
• Material UI — card component

──────────────────────────
⭐ Key benefits
──────────────────────────
✅ Works on localhost — test OGP before deploying; no tunnels or staging servers required
✅ No page reload needed — hit the Reload button in the panel to re-read metadata instantly
✅ Copy any value to clipboard with one click
✅ Dark mode support — follows your DevTools preference
✅ Three UI languages — English, 日本語, 中文
✅ Completely local — no data is ever sent to external servers; all inspection happens in your browser

──────────────────────────
👨‍💻 Who is this for?
──────────────────────────
Front-end developers, SEO engineers, and content teams who need a fast feedback loop when writing or debugging OGP tags. Instead of sharing a URL with a social debugger tool and waiting for a re-scrape, you get instant visual feedback right inside DevTools on any page — including localhost.

──────────────────────────
🔒 Permissions
──────────────────────────
• storage — saves your language and theme preferences locally
• Access to all URLs — required to inspect OGP metadata on any page you visit

Source code: https://github.com/Uno-Takashi/OGP-Dev-Tool