What Is a OG / Social Card Debugger?
An OG / Social Card Debugger helps you preview and troubleshoot how your web pages appear when shared on social media platforms. Open Graph (OG) meta tags control the title, description, and image that display in link previews on Facebook, Twitter/X, LinkedIn, Slack, and messaging apps.
This tool lets you enter your OG tag values and instantly see a simulated preview for each platform. It also generates the correct HTML meta tags you need to paste into your page's <head> section — eliminating the guesswork of social card formatting.
How to Use This Tool
- Enter your page details — Fill in the OG title, description, URL, and image URL. These are the core fields that social platforms read when generating link previews.
- Preview across platforms — See how your link will appear on Facebook, Twitter/X, LinkedIn, and Slack. Each platform renders cards slightly differently, so check all of them.
- Copy the generated meta tags — The tool generates the correct og: and twitter: meta tags. Copy them into your page's <head> section.
- Test after deployment — After adding the tags to your live page, use Facebook's Sharing Debugger and Twitter's Card Validator to clear cached previews and confirm the new tags are working.
Tips and Best Practices
- → Always include an og:image. Links shared without an image get significantly fewer clicks. Use a 1200×630px image for best results across all platforms.
- → Keep og:title under 60 characters. Longer titles get truncated on most platforms. Front-load the most important words.
- → Generate your meta tags with our Meta Tag Generator. It covers not just OG tags but also standard SEO meta tags, Twitter Cards, and structured data — a complete head-section solution.
- → Test with real URLs after deploying. Browser previews are simulations. Always verify with platform-specific debuggers after your tags are live to catch caching issues and rendering differences.
See also: round out the head metadata with a BreadcrumbList for SERP trails, and validate any other structured-data blocks with the Schema Validator before deploy.
Frequently Asked Questions
What is an OG (Open Graph) tag?+
Open Graph tags are HTML meta tags that control how your page appears when shared on social media platforms like Facebook, Twitter/X, LinkedIn, and Slack. They define the title, description, and preview image.
Why does my link preview look wrong?+
Social platforms cache OG data aggressively. If you updated your tags but the old preview still shows, use each platform's cache invalidation tool (Facebook Sharing Debugger, Twitter Card Validator) to force a refresh.
What image size should I use for OG?+
The recommended OG image size is 1200×630 pixels. This works well across Facebook, Twitter/X, LinkedIn, and most messaging apps. Use a 2:1 aspect ratio.
Does this tool fetch live data from my URL?+
This tool lets you input your OG tag values manually and preview how they will render across platforms. It does not fetch live page data — use it to test and refine your tags before deploying them.
What is a Twitter Card?+
Twitter Cards are Twitter/X's version of OG tags. They use meta tags like twitter:card, twitter:title, and twitter:image to control how links appear in tweets. This tool generates both OG and Twitter Card meta tags.
Do OG tags affect SEO?+
OG tags do not directly affect search engine rankings, but they significantly impact click-through rates from social shares. A compelling title, description, and image increase the likelihood that people click your shared links.
How does this differ from the official Facebook and X debuggers?+
The official debuggers fetch your URL from their servers, which is the only way to verify that those platforms can actually reach and parse your page. This tool fetches the URL from your browser and previews how OG tags would be interpreted. The advantage is no rate limits and no need to deploy first; the disadvantage is that you cannot verify platform-specific quirks like Facebook image-cache behavior. Use this tool during development, then run the official debuggers before launch.
Why does my OG image not show up?+
Three common causes: the og:image URL is relative (it must be absolute with https://), the image file is larger than the platform allows (Facebook caps at 8MB, X at 5MB), or the image dimensions are below the platform minimum (Facebook ignores anything under 200x200). The debugger flags each of these specifically and shows the actual dimensions and file size of the linked image so you can compare against the requirements.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service