How do I generate Open Graph tags?

Enter your page title, description, image URL, and canonical URL into peek. The tool instantly shows you a platform-accurate preview and lets you export the complete HTML meta tag set to paste into your page's .

What is the correct Open Graph image size?

1200×630px is the standard recommended size. LinkedIn specifically requires at least 401px width and recommends 1200×627px (1.91:1 ratio). For X, 1200×628px works well. Using 1200×630px covers all major platforms safely.

Should I use og: tags or twitter: tags?

Use both. Set the Open Graph tags (og:title, og:description, og:image, og:url) as the base. Add twitter:card=summary_large_image and twitter:title/description to maximise compatibility with X. Slack reads twitter: tags in addition to OG.

Do I need og:image:width and og:image:height?

They are not strictly required, but including them lets platforms skip fetching the image just to check its dimensions, which speeds up link card rendering. Always include them when you know the exact size.

Can I use a relative URL for og:image?

No. og:image must be an absolute URL with a scheme, for example https://example.com/og.jpg. Social crawlers fetch the image separately from the page and cannot resolve relative paths.

Open Graph Tag Generator

Enter your page title, description, image URL, and canonical URL. peek generates the correct Open Graph and Twitter Card tags, shows you a live preview across all platforms, and lets you copy the HTML directly to your clipboard.

Generate and preview your tags →

Complete Open Graph + Twitter Card template

Copy this template into your page's <head> and replace the placeholder values.

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:description" content="A clear description under 160 characters." />
<meta property="og:image" content="https://example.com/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the preview image" />
<meta property="og:site_name" content="Your Site Name" />

<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A clear description under 160 characters." />
<meta name="twitter:image" content="https://example.com/og.jpg" />

Image size by platform

Platform	Recommended size	Notes
LinkedIn	1200 × 627	Min 401px wide; smaller images show as thumbnails
X (Twitter)	1200 × 628	Requires twitter:card=summary_large_image
Discord	1200 × 630	Reads og:image; max embed width ~520px in-chat
Slack	1200 × 630	Unfurls use og:image; caches ~30 minutes
iMessage	1200 × 630	Reads from static HTML, no JS executed

Full image size guide by platform →

Framework-specific snippets

Astro

---
// src/layouts/BaseLayout.astro
const { title, description, image } = Astro.props;
---
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={Astro.url.href} />
<meta name="twitter:card" content="summary_large_image" />

Next.js (App Router)

// app/my-page/page.tsx
export const metadata = {
  title: "My Page Title",
  description: "A clear description.",
  openGraph: {
    title: "My Page Title",
    description: "A clear description.",
    images: [{ url: "https://example.com/og.jpg", width: 1200, height: 630 }],
    url: "https://example.com/my-page",
  },
  twitter: { card: "summary_large_image" },
};

Frequently asked questions

How do I generate Open Graph tags?: Enter your page title, description, image URL, and canonical URL into peek. The tool instantly shows you a platform-accurate preview and lets you export the complete HTML meta tag set to paste into your page's <head>.
What is the correct Open Graph image size?: 1200×630px is the standard recommended size. LinkedIn specifically requires at least 401px width and recommends 1200×627px (1.91:1 ratio). For X, 1200×628px works well. Using 1200×630px covers all major platforms safely.
Should I use og: tags or twitter: tags?: Use both. Set the Open Graph tags (og:title, og:description, og:image, og:url) as the base. Add twitter:card=summary_large_image and twitter:title/description to maximise compatibility with X. Slack reads twitter: tags in addition to OG.
Do I need og:image:width and og:image:height?: They are not strictly required, but including them lets platforms skip fetching the image just to check its dimensions, which speeds up link card rendering. Always include them when you know the exact size.
Can I use a relative URL for og:image?: No. og:image must be an absolute URL with a scheme, for example https://example.com/og.jpg. Social crawlers fetch the image separately from the page and cannot resolve relative paths.