Home Pricing Docs
Sign In Get Started

Blog · 6 Oct 2025

The Definitive Guide to Open Graph in 2025

By ogli.sh

Open Graph (OG) tags control how your links appear on social platforms and messaging apps. Done right, they boost click-through, shareability, and trust. This guide covers what actually matters in 2025: the essential tags, safe image specs, platform quirks (X/Twitter, Facebook, LinkedIn, Slack/Discord, iMessage/WhatsApp), cache refresh tactics, and how to make previews dynamic with a single API call.

TL;DR (use this checklist)

How Open Graph works

When someone shares a URL, platforms fetch the page HTML and read meta tags in the <head>. They use those tags to render the preview card (image, title, description). Many platforms also cache the result for speed and abuse prevention. 

<!-- Minimum viable OG setup -->
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="Short, compelling summary (100–160 chars)." />
<meta property="og:url" content="https://example.com/my-page" />
<meta property="og:image" content="https://cdn.example.com/og/my-page-1200x630.jpg" />
<meta property="og:image:alt" content="Descriptive text for screen readers and fallbacks" />

<!-- Twitter/X safe default -->
<meta name="twitter:card" content="summary_large_image" />

Image specs that “just work”

Platform quirks (what to expect)

Caching & refresh strategy

Most platforms won’t refetch your page immediately if you tweak a title or image. Practical ways to see updated previews:

  1. Version your image URLs (e.g., og:image=https://cdn.example.com/og/card.jpg?v=2).
  2. Use a stable page URL (og:url matches canonical), but swap the image URL and re-share.
  3. Mind headers: serve images with long-lived cache on your CDN, but change the querystring when you update.
  4. Debug locally: paste the URL in multiple platforms or use their inspectors to see what they fetched last.

Dynamic OG: personalize & A/B test

Static previews are fine, but dynamic previews convert better: add campaign names, prices, deadlines, or user names to the image at share time. You can also A/B test creative variants.

With a short link in front of your destination, you can attach different OG metadata per campaign without touching the destination page. That’s exactly what ogli.sh is for.

Example: dynamic preview via ogli.sh

Create a short link that points to your real URL, but overrides the preview: 

# cURL example (adjust fields to your API)
curl -X POST https://api.ogli.sh/v1/links \
  -H "Authorization: Bearer $OGLI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/product/123",
    "alias": "launch-123",
    "og": {
      "title": "New: SuperWidget 2.0",
      "description": "Ships today. Free returns. See what’s new.",
      "image": "https://cdn.example.com/og/superwidget-1200x630.jpg?v=launch"
    },
    "qr": { "enabled": true },
    "expiresAt": null,
    "webhookUrl": "https://hooks.example.com/ogli-events"
  }'

Now share https://ogli.sh/launch-123. The card will use your custom OG, even if the destination page has different tags.

Rotate creatives without breaking links

Want to update the preview after launch day? Keep the short link, just switch the OG image: 

# Update the OG image later (example)
curl -X PATCH https://api.ogli.sh/v1/links/launch-123 \
  -H "Authorization: Bearer $OGLI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "og": {
      "image": "https://cdn.example.com/og/superwidget-1200x630.jpg?v=day2"
    }
  }'

Copy & design tips that lift CTR

Quality assurance: a 2-minute pre-flight

  1. View page source and confirm the tags in <head> (no duplicates, no typos).
  2. Hit the image URL directly—loads fast? correct size? HTTPS? correct cache headers?
  3. Share the link in a private channel (Slack/Discord/DM) and confirm the card looks right.
  4. Test on mobile—does the image crop hide critical text?
  5. If you change the preview, bump the image querystring and re-share.

FAQ

Do I need both OG and Twitter tags?
OG is the baseline. Adding twitter:card ensures consistent large-image cards on X/Twitter.

What if my destination page already has OG tags?
Your short link can override them. That’s useful when you want campaign-specific previews without editing the destination site.

Can I use multiple images?
You can include multiple og:image tags, but many platforms use only the first. Pick the best one and keep it simple.

How big can the image be?
Keep it under ~1–2 MB for quick fetches; huge images risk timeouts or compression artefacts.

Recap & next steps

Try it now: create a short link with a custom preview, share it on your socials, and watch the difference. When you’re ready to scale, wire in webhooks and rotate creatives per campaign.

← Back to all posts