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 looks 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 in your HTML head that control how your page appears when shared on social media and messaging platforms. Created by Facebook in 2010, the protocol is now used by LinkedIn, Slack, Discord, WhatsApp, iMessage, and virtually every platform that generates link previews. Without OG tags, platforms guess from your content — and they guess badly, often showing the wrong title, a broken image, or just the raw URL.
For indie makers, OG tags are a direct multiplier on every link share. When a user posts your product URL on X or drops it in a Slack channel, your og:image and og:title determine whether people click or scroll past. A well-designed 1200x630px OG image with your product name and key benefit can double or triple click-through rates on shares compared to no image at all.
Essential OG Tags and What They Do
How to Add OG Tags in Next.js App Router
Export a metadata object from your page or layout. Next.js generates all OG and Twitter Card tags automatically. For dynamic pages, use generateMetadata:
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",
siteName: "Your Brand",
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"],
},
}OG Image Size and Format Guide
Frequently Asked Questions
Does LinkedIn cache my og:image and how do I reset it?
Yes. LinkedIn caches og:image and other Open Graph tags aggressively — sometimes for weeks. When you update your OG image, LinkedIn continues showing the old cached version to users who share your URL. To force a cache refresh: change the image filename or add a version query parameter (e.g. /og-image.png?v=2), then use LinkedIn's Post Inspector tool at linkedin.com/post-inspector to submit the URL for recrawling. Facebook and Slack also have similar inspection and cache-clearing tools in their developer portals.
What is the difference between twitter:card summary and summary_large_image?
twitter:card controls the layout of your link preview on X (formerly Twitter). summary shows a small square thumbnail to the left of the text — suitable for most content. summary_large_image shows a large full-width image above the title and description, taking up much more visual space in the feed. For product launches, blog posts, and anything you want to stand out, always use summary_large_image with a well-designed 1200x630px image. It significantly increases engagement compared to the smaller thumbnail layout.
Why is my og:image not showing when I share on Slack?
Slack has stricter requirements for OG image display. Common reasons it fails: the og:image URL requires authentication or session cookies (Slack cannot access it); the image is hosted on a domain that blocks Slack's crawler via robots.txt or rate limiting; the image file is too large (over 5MB); the image dimensions are under 200x200px; or the URL redirects before reaching the image. To debug: paste your URL into the Slack message box without sending and check if the preview appears. If not, check whether the image URL is publicly accessible without any cookies.
Should og:image and twitter:image be the same?
They can be the same, and usually are. If twitter:image is absent, X falls back to og:image automatically. The main reason to set separate twitter:image is if you want a different image crop on X — for example, X previews are slightly different dimensions than Facebook/LinkedIn previews. If you use the standard 1200x630px image, both platforms display it well and there is no need to specify separate images. Always use absolute URLs (starting with https://) for both — relative paths will not work.
How do I generate dynamic OG images in Next.js?
Next.js App Router supports automatic OG image generation via the opengraph-image.tsx convention. Create a file at app/blog/[slug]/opengraph-image.tsx and export a default async component that returns JSX — Next.js renders it to a PNG at runtime using @vercel/og. This lets you show the actual page title, author name, and branding in the OG image without manually creating images for each page. The ImageResponse API is available from next/og and supports basic HTML/CSS layout for image composition.