Open Graph tags: the minimum set that makes every link preview work

The six tags that cover every platform

<meta property="og:title" content="Tabby — split expenses with friends">
<meta property="og:description" content="Track shared bills, settle up in a tap.">
<meta property="og:image" content="https://tabby.app/og.png">
<meta property="og:url" content="https://tabby.app">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tabby">

What each tag does

• `og:title` — The bold headline on the preview card. Usually the same as <title>, but can be shorter and more social-friendly.
• `og:description` — The body text under the title. Usually 1–2 sentences. Twitter truncates at ~200 characters; other platforms are more generous.
• `og:image` — The visual that makes someone stop scrolling. This is the most important tag and the one most often broken.
• `og:url` — The canonical URL of the page. Must match the <link rel="canonical"> exactly.
• `og:type` — website for most pages, article for blog posts. Sets the card shape.
• `og:site_name` — Your product name, shown above the title on some platforms.

The og:image rules

The image is where Open Graph usually breaks. The rules are strict because each platform's scraper has its own constraints:

• 1200×630 pixels minimum. This is the standard ratio. Smaller images get upscaled and look blurry; wrong ratios get cropped.
• Under 5 MB total, under 1 MB for Twitter specifically. Twitter's card validator silently drops images over 1 MB — no error, just no image.
• Must be an absolute URL. https://yourapp.com/og.png, not /og.png. Relative URLs don't resolve for the scraper.
• The URL must return an image, not a redirect or HTML. If og:image points at a page that redirects, the scraper follows the redirect and gets HTML instead of an image — so it shows nothing.
• Publicly accessible, no auth. The scraper fetches the image with no cookies or login. If the image is behind a login wall, the card shows no preview.

Twitter Cards: the extra two tags

Twitter uses OG tags as a fallback, but explicit Twitter Card tags give you more control over the card type and let you serve a different image for Twitter specifically:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@actuantdev">

summary_large_image gives you a full-width card — the one you want for a product launch. The default summary is a small square thumbnail next to the text.

How to test

1. 1

   View Page Source (Cmd+U)

   Search for og:title and og:image. If they're absent from the raw HTML, no platform can see them.

2. 2

   Twitter Card Validator

   Go to cards-dev.twitter.com/validator, paste your URL, and click Preview. It shows exactly which tags Twitter found and what the card will look like.

3. 3

   Open the og:image URL directly

   Paste the og:image URL into a browser. If it returns anything other than an image, all platforms will show a blank preview.

Actuant checks every page for OG tags in the raw HTML, verifies the image URL resolves and is the right dimensions, and flags pages missing any of the six core tags.