Social Media Debugger
Preview exactly how your URL looks when shared on Facebook, Twitter/X, and LinkedIn. Debug Open Graph tags, Twitter Cards, and every meta tag in real-time.
What is a Social Media Debugger?
A Social Media Debugger fetches any public URL server-side — exactly like Facebook, Twitter, or LinkedIn's crawlers do — and extracts every Open Graph tag, Twitter Card tag, and general meta tag. It then renders a live preview of how your link will appear when shared, and scores your implementation to flag missing or poorly configured tags.
Unlike browser extensions that only read the DOM, this tool uses a real server-side fetch with a social crawler User-Agent, so you see exactly what platforms see — including any server-side redirects or conditional rendering.
Why Open Graph Tags Matter
- og:title — Controls the headline shown in link previews. Missing this means platforms fall back to the page
<title>, which may be too long or poorly formatted for social. - og:image — The single biggest factor in click-through rate for shared links. Links with no image get dramatically fewer clicks.
- og:description — The teaser text shown below the title. Should be compelling and under 160 characters.
- og:type — Helps platforms categorise your content. Use
articlefor blog posts,productfor e-commerce,websitefor general pages. - twitter:card — Set to
summary_large_imagefor the large image format on Twitter/X, orsummaryfor the compact format.
Frequently Asked Questions
<title> tag is used by browsers (tab title) and search engines. The og:title property is used specifically for social media link previews. They can and often should be different — your page title might include your site name ("10 Tips for Better Sleep | HealthBlog") while your og:title might be more punchy and standalone ("10 Tips That Will Transform Your Sleep").<head> of your HTML. For example: <meta property="og:title" content="Your Title">. Most CMS platforms (WordPress, Webflow, Shopify) have built-in OG tag settings or plugins (like Yoast SEO). For Next.js use the metadata API; for Nuxt use useHead().