Open Graph

ELI5 — The Vibe Check

Open Graph is the reason your link previews look nice when you paste them in iMessage, Slack, or Twitter. Without it, you just get a bare URL. With it, you get a beautiful card with a title, description, and image. Facebook invented it and now everyone uses it.

Real Talk

Open Graph is a protocol developed by Facebook that enables any web page to become a rich object in a social graph. By adding OG meta tags (og:title, og:description, og:image, og:url) to the HTML head, pages generate rich previews when shared on social platforms, messaging apps, and Slack.

Show Me The Code

<!-- Open Graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://vibecoder-dictionary.com" />
<meta property="og:title" content="Vibecoder Dictionary" />
<meta property="og:description" content="Developer terms explained like you're five." />
<meta property="og:image" content="https://vibecoder-dictionary.com/og-image.png" />

When You'll Hear This

Generate dynamic OG images for each blog post.,The OG image should be 1200x630px for best results.,Use the Facebook Sharing Debugger to preview your OG tags.