The Devs Tools

Developer's Guide to Open Graph Generator: Best Practices and Examples

August 18, 2026 · The Devs Tools Team

When you paste a link into Slack, Discord, LinkedIn, or X and see a rich preview card with a title, description, and image, that card is built entirely from a handful of <meta> tags in the page's <head>. This is the Open Graph protocol, originally introduced by Facebook and now the de facto standard consumed by nearly every platform that renders link previews, alongside a parallel (and largely redundant) set of twitter:* tags for X/Twitter-specific rendering. Crucially, these tags are read by server-side crawlers, not by a logged-in browser session — the crawler fetches your raw HTML once, without executing JavaScript in most cases, and caches the result for some period of time. That means Open Graph data generated dynamically by a client-side framework after hydration is often invisible to these crawlers unless it's present in the initial server-rendered or statically generated HTML. Getting these tags right is a small amount of markup with an outsized effect on click-through rate, since a broken or missing preview image makes a shared link look untrustworthy or unfinished compared to ones with a clean card.

[!TIP] Need to build these tags now? Try our free, local Open Graph Generator to produce copy-paste-ready meta tags for Facebook, LinkedIn, and X completely offline.

The Core Tag Set

A minimal, functional Open Graph block looks like this:

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/post">
<meta property="og:title" content="My Post Title">
<meta property="og:description" content="A short summary of the page.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:site_name" content="Example Site">

Adding Twitter Card tags lets you control the X-specific rendering, particularly the large-image card layout:

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/post">
<meta property="twitter:title" content="My Post Title">
<meta property="twitter:description" content="A short summary of the page.">
<meta property="twitter:image" content="https://example.com/og-image.png">

Common Mistakes That Break Previews

  • Relative image URLs: og:image must be an absolute URL (https://...), not a relative path — crawlers won't resolve it against your domain.
  • Images that are too small or wrong aspect ratio: most platforms expect roughly 1200×630px; undersized images get rejected or rendered blurry.
  • Missing og:url: without it, some platforms canonicalize the shared link incorrectly, which can split engagement metrics across URL variants.
  • Stale caches: platforms cache preview data aggressively. After changing tags, you often need each platform's own debugging/inspection tool to force a re-scrape — editing the tags alone won't retroactively fix already-shared links.

Practical Workflow

  1. Fill in title, description, canonical URL, and a hosted 1200×630 image.
  2. Generate the tag block and paste it into your page's <head>, ideally in your static HTML or server-rendered output rather than injected client-side.
  3. Validate that the image URL resolves publicly (crawlers can't see localhost or auth-gated assets).
  4. Share the link once in a private channel to confirm the card renders as expected before wider distribution.

Conclusion

Open Graph tags are cheap to write and expensive to get wrong — a missing or malformed tag is often the difference between a link that looks professional in a chat thread and one that looks broken. Because crawlers read raw HTML rather than a rendered DOM, verifying the tags exist in your actual page source (not just your component tree) is the detail most teams skip.