All Tools

Open Graph Tag Generator

Fill in your page details to generate a complete set of OG and Twitter Card meta tags. See a live preview of how your page will look when shared on X, LinkedIn, and Slack — then copy the HTML to paste into your <head>.

Page Details

Shown as the link title when shared. 60–90 characters recommended.

Shown under the title in social shares. 100–200 characters.

1200×630px recommended. JPG or PNG. This is what shows in link previews.

e.g. @yoursite

e.g. @yourhandle

Generated HTML — paste into your <head>

<!-- Primary Meta Tags -->

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />

What are Open Graph Tags?

Open Graph (OG) tags are meta tags added to your HTML <head> that control how your page appears when shared on social media. They were created by Facebook but are now used by Twitter, LinkedIn, Slack, Discord, WhatsApp, and virtually every platform that generates link previews. Without them, platforms guess — usually badly.

Essential OG Tags

og:titleThe title shown in the link preview. Should match your page title.
og:descriptionA short description shown under the title. 100–200 characters.
og:imageThe preview image. Must be an absolute URL. Use 1200×630px.
og:urlThe canonical URL of this page.
og:typeThe type of content: website, article, product, profile.
og:site_nameYour brand name — shown in small text above the title on some platforms.

OG Image Best Practices

  • — Use 1200×630px (1.91:1 ratio) — the standard for most platforms.
  • — Keep file size under 300KB — large images load slowly in previews.
  • — Use JPG for photos, PNG for graphics with text or logos.
  • — Put your page title and branding in the image — it shows even if the tags don't.
  • — Use an absolute URL including https:// — relative URLs won't work.
  • — Change the image filename when you update it, to bust CDN caches.

Adding OG Tags in Next.js

Next.js App Router handles OG tags via the metadata export:

export const metadata = {
  title: "Your Page Title",
  description: "Your page description",
  openGraph: {
    title: "Your OG Title",
    description: "Your OG description",
    url: "https://yoursite.com/page",
    images: [{ url: "https://yoursite.com/og.png", width: 1200, height: 630 }],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Your Twitter Title",
    description: "Your Twitter description",
    images: ["https://yoursite.com/og.png"],
  },
}