Open Graph Meta Tag Generator
Generate complete Open Graph meta tags for rich social media previews
Configure Tags
0/60 characters
0/160 characters
Generated Code
<meta name="robots" content="index, follow"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta name="theme-color" content="#000000"> <meta name="viewport" content="width=device-width, initial-scale=1">
💡 Tip: Copy these tags and paste them inside the <head> section of your HTML document.
Other Meta Tag Generators
About Open Graph Meta Tag Generator
Open Graph meta tags control how your website appears when shared on social media platforms like Facebook, LinkedIn, and WhatsApp. Without them, social platforms make their best guess at what to show — often pulling the wrong image, a truncated title, or no description at all. With properly configured OG tags, every share of your content becomes a compelling, branded preview that drives clicks.
Developed by Facebook in 2010, the Open Graph protocol has become the universal standard for social sharing metadata. Every major social platform reads og: tags, making them one of the highest-impact meta tags you can add to any website. A single afternoon spent adding OG tags site-wide can measurably improve click-through rates from social shares for years to come.
The Open Graph meta tag generator takes the complexity out of writing OG tags correctly. Getting the syntax right — correct property names, absolute URLs, proper image dimensions — matters because a single malformed tag can cause the entire OG preview to fall back to default behavior. Our generator validates your inputs and outputs copy-paste ready tags for every page type.
Open Graph Tag Anatomy
Open Graph tags use the property attribute (not name) and must be placed in the HTML head section. The four essential tags are og:title, og:description, og:image, and og:url. Together these four tags control the headline, body text, visual, and canonical URL of your social share preview across all OG-compatible platforms.
Beyond the essentials, og:type tells platforms what kind of content you're sharing — website, article, product, video — which can unlock additional display features. og:site_name adds your brand name to previews. For articles, og:article:published_time and og:article:author add publication metadata that some platforms display prominently.
The og:image tag deserves special attention. It must be an absolute HTTPS URL, pointing to an image of at least 1200x630px. The image must be publicly accessible — no authentication, no robots.txt blocking for social crawlers. Including og:image:width and og:image:height lets platforms display your image immediately without downloading it first, significantly improving preview generation speed.
Key Considerations
Property vs Name Attribute
Open Graph tags use the property attribute, not the name attribute used by standard meta tags. Use <meta property='og:title'> not <meta name='og:title'>. This is the single most common OG tag mistake — using name= instead of property= means social platforms cannot read your tags at all.
Image Requirements
og:image must be an absolute HTTPS URL pointing to an image of at least 1200x630px. Always pair it with og:image:width and og:image:height so platforms don't need to download the full image before rendering the preview. Images under 600px wide display as small thumbnails rather than large preview cards.
Content Length Limits
og:title is typically displayed at 60-70 characters before truncation. og:description at 150-200 characters. Write your most important content first — don't bury the value proposition at the end of a sentence that gets cut off. Erring shorter is safer as each platform truncates at slightly different lengths.
og:url as Canonical
Always set og:url to your page's canonical URL — not a URL with UTM parameters or session IDs. Social platforms use og:url to aggregate share counts. Without it, shares from URL variants are counted separately, fragmenting your social proof metrics across multiple URL versions.
Common Open Graph Tag Issues
Syntax Errors
- •Using name= instead of property= on og: meta tags
- •Relative image URLs instead of absolute HTTPS URLs
- •Missing quotation marks or malformed HTML in tag attributes
- •OG tags placed outside the <head> element
Content Issues
- •og:title identical to page title — missing opportunity to optimise for social context
- •Missing og:image causing platforms to auto-select an unrelated page image
- •og:description duplicating meta description word for word
- •og:type left as default website for articles — missing article-specific features
Image Problems
- •Image too small — displays as thumbnail instead of large card
- •Image blocked by authentication or CDN access controls
- •Missing og:image:width and og:image:height causing slow preview generation
- •Cached old image still showing after og:image update
Implementation Guide
Complete Open Graph Tag Set
All recommended OG tags for a standard web page:
<head>
<!-- Essential Open Graph tags -->
<meta property="og:title" content="Your Page Title – Optimised for Social" />
<meta property="og:description" content="Compelling description under 150 characters." />
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the preview image" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />
<!-- For blog posts and articles -->
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-03-01T00:00:00Z" />
<meta property="article:author" content="Author Name" />
</head>Next.js 15 Open Graph Metadata
Generate OG tags using Next.js built-in metadata API:
// app/your-page/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
openGraph: {
title: "Your Page Title – Site Name",
description: "Social-optimised description under 150 characters.",
url: "https://yourdomain.com/your-page",
siteName: "Your Site Name",
images: [
{
url: "https://yourdomain.com/og-image.jpg",
width: 1200,
height: 630,
alt: "Descriptive image alt text",
},
],
locale: "en_US",
type: "website",
},
};Dynamic OG Image Generation
Generate unique OG images for every page using Next.js ImageResponse:
// app/og/route.tsx
import { ImageResponse } from "next/og";
export const runtime = "edge";
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get("title") ?? "Default Title";
return new ImageResponse(
(
<div style={{
width: "1200px", height: "630px",
display: "flex", alignItems: "center", justifyContent: "center",
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
padding: "80px",
}}>
<h1 style={{ color: "white", fontSize: "60px", textAlign: "center" }}>
{title}
</h1>
</div>
),
{ width: 1200, height: 630 }
);
}
// Use as: og:image = https://yourdomain.com/og?title=Page+TitleCommon Use Cases
- Generating OG tags for a new website before launch
- Auditing and fixing broken social previews across an existing site
- Creating platform-specific OG tags for marketing campaigns
- Adding article metadata to blog posts and news content
- Ensuring e-commerce product pages have compelling social previews
Pro Tip
Write your og:title and og:description separately from your SEO title and meta description. Social sharing and search results are different contexts — social copy should be more conversational and clickable, while SEO copy should be keyword-focused. The extra effort of maintaining separate versions pays off in measurably higher click-through rates.