Oginify logoOginifyGenerate

Meta tags, demystified.

Open Graph (OG) tags tell social platforms what to display when someone shares your URL. Here's the minimum set you need.

1. Required tags

Paste these inside the <head> of your HTML.

<meta property="og:title"       content="Your page title" />
<meta property="og:description" content="A one-sentence summary." />
<meta property="og:image"       content="https://yourcdn.com/og.png" />
<meta property="og:url"         content="https://yoursite.com" />
<meta property="og:type"        content="website" />

<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="Your page title" />
<meta name="twitter:description" content="A one-sentence summary." />
<meta name="twitter:image"       content="https://yourcdn.com/og.png" />

2. Image dimensions

1200 × 630 pixels is the universal sweet spot. It works for Twitter (summary_large_image), LinkedIn, Facebook, and Slack unfurls.

3. Hosting the image

Upload the PNG Oginify generates to any static host: Cloudflare R2, AWS S3, Vercel Blob, or just your own /public folder. Use the public URL in og:image.

4. Per-page images (frameworks)

In Next.js (App Router):

export const metadata = {
  openGraph: { images: ['/og/post-1.png'] },
  twitter:   { card: 'summary_large_image', images: ['/og/post-1.png'] },
};

In TanStack Start:

export const Route = createFileRoute('/post')({
  head: () => ({
    meta: [
      { property: 'og:image', content: '/og/post-1.png' },
      { name: 'twitter:image', content: '/og/post-1.png' },
    ],
  }),
});

5. Test it

Use Twitter Card Validator or opengraph.xyz to preview your live URL before sharing.