Open Graph & Twitter Cards: Control How Your Pages Look on Social
You wrote a great article, polished a landing page, or launched a new product. Then someone shares the link in a Slack channel or on LinkedIn — and it shows up as a bare URL with no image, or with the wrong image, or your favicon stretched into a blurry rectangle. That’s an Open Graph problem, and it’s entirely preventable.
The four required Open Graph tags
Every page needs four OG tags: og:title, og:type, og:image, and og:url. Without them, social platforms guess, and they usually guess badly. Pair these with og:description and og:site_name for a complete preview card.
Image dimensions matter more than you think
Facebook recommends 1200×630 pixels with a 1.91:1 aspect ratio. The minimum is 600×315; below that the platform falls back to a small thumbnail or refuses to display the image at all. Below 200×200 most platforms reject it outright. Use a high-quality JPEG or PNG and stay under 8 MB.
Twitter Cards layer on top
twitter:card defines the layout: summary (small square thumbnail) or summary_large_image (banner-style, far more engaging in feeds). If you don’t set Twitter tags, X falls back to OG — but explicit is better. Add twitter:site with your @handle to attribute the share to your account.
Don’t lie to the crawler
Some sites serve different OG tags to social crawlers than to regular visitors — a tactic that can get pages flagged for cloaking. Use the “Fetch as facebookexternalhit” toggle above to compare. If your tags differ between user agents, that’s usually a JavaScript SSR problem worth fixing.
Test before you ship
Paste any URL above. We fetch the live HTML, parse every OG and Twitter tag, download the actual og:image to measure its real dimensions and file size, and render preview cards exactly as Facebook, LinkedIn, X, WhatsApp, and Discord would show them. Run it on every important page before launch — and on competitors to learn what they’re telling social platforms that you’re not.