devbio
FeaturesExamplesMarketplaceToolsBlogsPricingFAQ
Sign inClaim your slug
All free tools

Open Graph previewer

Paste a URL, see how the link card renders on every major platform. We fetch the page server-side, read the meta tags, and show you the exact preview Twitter, LinkedIn, Slack, Discord and Facebook will render.

Try one:

On this page

  • What is Open Graph?
  • The canonical OG tag set
  • Twitter Cards
  • Image sizes that work everywhere
  • Next.js example
  • Plain HTML example
  • When previews look broken
  • FAQ
Guide

The developer's guide to Open Graph in 2026

Every link you ship — a blog post, a launch page, a project repo — gets previewed somewhere. Twitter wraps it in a card. Slack puts it in a sidebar. iMessage turns it into a tappable rectangle. Open Graph is what tells those platforms what to render. Get it right, and every link spreads your work for you; get it wrong, and your post looks like a half-finished URL.

What is Open Graph?

Open Graph is a meta-tag protocol Facebook published in 2010. Today it's the de-facto standard every social platform uses to extract a title, description and image from a URL. Add a handful of tags to your page's and the network of social crawlers (Twitterbot, LinkedInBot, Slackbot, Discordbot, Facebook's scraper) will pick them up the next time someone shares a link to your URL.

Your link, but for your career

A bio that looks this good. Without writing any meta tags.

devbio auto-generates Open Graph cards for your page, your projects, and your resume — so every link you drop in a DM or Slack thread looks polished.

devbio.me/
devbio

The developer-first bio platform.

© 2026 devbio.me

Product
ComponentsExamplesMarketplaceResume builderPricingBlogs
Free tools
All toolsOpen Graph previewerMRR calculatorUsername availabilityTech-stack badges
Company
Twitter
<meta property="og:*">
<head>

If you skip OG tags, platforms fall back to whatever they can scrape — the <title> tag, the first image, a guess at a description. The result is unpredictable, and worse, your competitor's well-tagged link looks dramatically better next to yours in a feed.

The canonical OG tag set

You can get away with five tags. Anything beyond is polish.

<meta property="og:title"       content="The post's title — keep it under 70 chars" />
<meta property="og:description" content="A 1-2 sentence summary, ideally 100-160 chars." />
<meta property="og:image"       content="https://example.com/og/post.png" />
<meta property="og:url"         content="https://example.com/post" />
<meta property="og:type"        content="article" />

These five give every major platform enough to render a rich card. Add og:site_name if your site has a brand, og:locale if you target a non-English audience, and og:image:width / og:image:height if your image isn't the standard 1200×630 — some scrapers refuse images they can't size-check.

Twitter Cards — the optional second set

Twitter / X reads OG tags as a fallback, but it prefers Twitter Card tags when both are present. In practice you need three Twitter-specific tags to control the layout:

<meta name="twitter:card"  content="summary_large_image" />
<meta name="twitter:site"  content="@yourhandle" />
<meta name="twitter:image" content="https://example.com/og/post.png" />

summary_large_image renders the full-bleed card you've seen on every viral thread. The smaller alternative, summary, ships a 125×125 thumbnail next to the text — fine for index pages, weak for blog posts.

Image sizes that work everywhere

The size most platforms agree on:

  • 1200×630 (1.91:1) — Twitter summary_large_image, LinkedIn, Facebook, Slack, Discord. This is the safe default.
  • 1200×1200 (1:1) — Instagram, iMessage in some contexts. Avoid as your primary image; ship as a secondary og:image.
  • 600×314 — minimum size Facebook will scrape. Don't go smaller or your image gets stripped.

Keep the file under 5 MB (Facebook's hard cap) and serve it from a CDN — many scrapers time out at 5 seconds. Use PNG or JPEG; SVG and WebP are inconsistent across crawlers.

Next.js example (App Router)

Next.js 13+ ships a typed Metadata export that compiles directly into the right meta tags. No next/head needed.

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://example.com/blog/${post.slug}`,
      type: 'article',
      images: [{ url: post.ogImage, width: 1200, height: 630, alt: post.title }],
    },
    twitter: {
      card: 'summary_large_image',
      site: '@example',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}

For dynamically-generated images, drop an opengraph-image.tsx file next to your page.tsx — Next compiles it into a per-route OG endpoint and wires the meta tags automatically.

Plain HTML example

<!doctype html>
<html lang="en">
  <head>
    <title>The post's title</title>
    <meta name="description" content="A 1-2 sentence summary." />

    <meta property="og:title"       content="The post's title" />
    <meta property="og:description" content="A 1-2 sentence summary." />
    <meta property="og:image"       content="https://example.com/og/post.png" />
    <meta property="og:url"         content="https://example.com/post" />
    <meta property="og:type"        content="article" />
    <meta property="og:site_name"   content="Example" />

    <meta name="twitter:card"  content="summary_large_image" />
    <meta name="twitter:site"  content="@example" />
    <meta name="twitter:image" content="https://example.com/og/post.png" />
  </head>
  <body>…</body>
</html>

When the previews look broken

Common culprits, in order of frequency:

  1. Cached scrape. Twitter and LinkedIn cache OG data aggressively. Use Twitter's Card Validator or LinkedIn Post Inspector to force a re-scrape after you push fixes.
  2. Image too large or behind auth. If your CDN returns a 4xx for hot-linked image requests, scrapers can't see the image. Test the image URL in an incognito window.
  3. OG tags injected client-side. Most scrapers don't run JS. If you're a SPA, you have to SSR or pre-render the meta tags into the served HTML.
  4. Mixed protocol. An http:// image on an https:// page gets blocked. Always use absolute, https-only URLs in og:image.

FAQ

Does Open Graph affect SEO?
Not directly. Google doesn't rank pages higher because of OG tags. But every share that renders a good card means more click-throughs and more backlinks — both of which absolutely affect SEO. OG is upstream of SEO.
Do I need both og:* and twitter:* tags?
No. Twitter falls back to og:* for everything except twitter:card and twitter:site. In practice, adding three Twitter tags on top of your OG set covers every meaningful difference between platforms.
What's the right title length?
≤ 70 characters. Twitter truncates around 70, LinkedIn around 200, Slack effectively unlimited but ugly past 100. Aim for one strong sentence.
Why does my preview show the wrong image?
The scraper's cached an older version. Use the platform validators linked above to flush. Twitter clears in seconds; LinkedIn can take an hour.
Can I have multiple og:image tags?
Yes — list them in priority order. Most platforms use the first one that passes their size check.
Are you saving the URLs I check?
No. We fetch the URL to extract its meta tags, render the preview in your browser, and forget the URL. No analytics on tool input. Same goes for every tool on this page.
GitHub
Privacy
Terms