Open Graph Tag Generator

Generate og:title, og:image, og:type, og:url — with a live preview of how your link will render on Facebook, LinkedIn, and Twitter.

6 og:type variants supported Twitter Card tags included Article + product schema One-click copy HTML

Page details

Facebook preview
1200 × 630 image
example.com
Your og:title
Your og:description — 2 to 4 sentences describing the page.
LinkedIn preview
Image
Your og:title
example.com

OG Tag Quality Score

0
Grade F
Issues to fix
  • Add an og:title (10+ chars)
  • Add a 2–4 sentence og:description
  • Add an og:url (absolute)
  • Add an og:image (1200×630 recommended)

Generated HTML

<!-- Open Graph tags generated by Grigora -->
<meta property="og:type" content="website" />

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image" />
52,100+
OG tags generated
6
og:type variants supported
4.6
G2 Rating →
4.8
Trustpilot Rating →

How to generate Open Graph tags

Four steps under 45 seconds. See exactly what each step looks like before you start.

1

Fill in page details

Title (40–60 chars), description (150–200 chars), canonical URL, and image URL. The live preview updates as you type.

grigora.co/tools/open-graph-tag-generator
og:title
You've been storing coffee wrong ▋
og:image (1200×630)
Preview image
2

Pick the right og:type

Website is the default. Article unlocks author/published_time. Product unlocks price/currency. Profile, video, and book each add their own fields.

grigora.co/tools/open-graph-tag-generator
og:type
website
article
product
profile
video
book
+ article:author, article:published_time enabled
3

Preview across platforms

Side-by-side Facebook, LinkedIn, and Twitter card previews. If your image is too small or your title gets truncated, you'll see it here before publishing.

grigora.co/tools/open-graph-tag-generator
1200×630 thumb
yoursite.com
You've been storing coffee wrong
FB ✓LI ✓X ✓
4

Copy HTML and paste in <head>

One-click copy of the full tag bundle — OG + Twitter Card + article fields if applicable. Paste inside <head> on your page, deploy, then force-rescrape in Facebook Debugger.

grigora.co/tools/open-graph-tag-generator
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:url" content="..." />
<meta name="twitter:card" content="..." />
...8 more tags
What we learned from 52,100 OG tag generations

Patterns the tool surfaced

Aggregated patterns from real user-generated OG tags (April 2025 – April 2026). No PII; counts only.

68%
Of submitted og:title were over 60 chars before editing
41%
Of users initially used a relative og:image URL (broken)
1200×630
Most common valid og:image resolution
23%
Of articles forgot article:published_time
92%
Saw their quality score rise above 80 after 3 edits
7 days
Average Facebook cache duration before re-scrape is needed

Add OG tags to your stack

Copy-paste-ready snippets for the 5 most common platforms.

// app/blog/[slug]/page.tsx — Next 13+ App Router
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://site.com/blog/${post.slug}`,
      siteName: 'Your Site',
      images: [{ url: post.coverImage, width: 1200, height: 630 }],
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author.name],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

App Router's Metadata API handles OG + Twitter Card in one return. Works with static and dynamic routes.

6 og:type values, explained

Each type unlocks additional fields for richer previews. Pick the one that matches your content.

og:type = website

Default type. Use for homepages, category pages, landing pages. No extra fields required.

<meta property="og:type" content="website" />

og:type = article

Blog posts, news articles, long-form content. Unlocks article:published_time, article:author, article:section, article:tag.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-18T10:00:00Z" />

og:type = product

E-commerce product pages. Enables product:price:amount, product:price:currency, product:availability for Facebook Shops.

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="49.99" />

og:type = profile

Personal or organization profile pages. Adds profile:first_name, profile:last_name, profile:username, profile:gender.

<meta property="og:type" content="profile" />
<meta property="profile:first_name" content="Ada" />

og:type = video.movie

Video pages — films, episodes, trailers. Enables video:duration, video:release_date, video:actor, video:director.

<meta property="og:type" content="video.movie" />
<meta property="video:duration" content="7200" />

og:type = book

Book detail pages (publishers, author sites). Enables book:author, book:isbn, book:release_date, book:tag.

<meta property="og:type" content="book" />
<meta property="book:isbn" content="978-0-14-044913-6" />

8 mistakes that break your OG previews

Every one of these will silently kill your social card. Severity-rated, fixable in minutes.

high

Missing og:image

Every page needs an og:image — without it, Facebook and LinkedIn fall back to the first usable image on the page, which is often a logo or a low-quality thumbnail. Add <meta property="og:image" content="https://yoursite.com/path/to/image.webp" /> with a 1200×630 absolute HTTPS URL.

high

Image too small or wrong aspect ratio

Use exactly 1200×630 (or 1.91:1 ratio). Below 600×315, Facebook shows a small thumbnail instead of a large card. Above 8MB, the image is rejected entirely. Export at WebP quality 85 or JPEG quality 90 to stay under 500KB for most images.

high

Relative URL in og:image or og:url

OG crawlers require absolute URLs — "https://yoursite.com/image.jpg", not "/image.jpg". Relative paths cause the scraper to fail silently with no fallback. Always prepend the protocol and hostname.

medium

og:title longer than 60 characters

Facebook and LinkedIn truncate after ~60 chars. Keep og:title concise — it can differ from your HTML <title>. Use the headline-style hook here, not the keyword-stuffed SEO title.

high

Mismatched og:url and canonical

og:url must match the canonical URL exactly — including trailing slashes and www vs non-www. Mismatched URLs cause Facebook to attribute shares to the wrong page, splitting your share count across two records.

medium

Non-HTTPS image URL

HTTP images often get silently dropped by Facebook and LinkedIn. Always serve og:image from HTTPS. If your CDN supports it, also add a fallback og:image:secure_url.

medium

Missing Twitter Card tags

OG tags alone give Twitter a small-thumbnail fallback. Add <meta name="twitter:card" content="summary_large_image" /> plus twitter:title, twitter:description, twitter:image to get the big-image card. Our generator includes these automatically.

medium

Not re-scraping after OG tag changes

Facebook caches OG data for 7–30 days. After updating tags, paste the URL into Facebook Sharing Debugger and click "Scrape Again". Do the same with LinkedIn Post Inspector. Without this, old tags will be shown to users for weeks.

Grigora vs Facebook Debugger vs metatags.io

Honest comparison. Each of these tools has its own sweet spot.

FeatureGrigoraFB Debuggermetatags.io
Live preview (Facebook + LinkedIn + Twitter)Facebook only
OG Tag Quality Score
One-click copy full HTML
Twitter Card tags bundled
Article schema fields (author, published_time)
Framework install guides
No signup, no login requiredFacebook login
Auto-maintained on every publishWith Grigora

Also optimized for AI search

OG tags are read by ChatGPT, Perplexity, and Claude web crawlers when they summarize shared URLs.

ChatGPT / GPTBot

Uses og:title and og:description as the primary summary when a user shares a URL in chat. Accurate OG tags = accurate AI summaries.

GPTBot · OAI-SearchBot

Perplexity

Displays the og:image thumbnail in source cards next to cited links. Missing og:image = no thumbnail = lower click-through from AI citations.

PerplexityBot

Claude (Anthropic)

ClaudeBot reads the full OG meta bundle to build context when answering questions about a URL. article:* fields improve byline attribution.

ClaudeBot

Automate OG tags forever with Grigora

Hand-writing OG tags per page doesn't scale. These Grigora products generate and maintain them on your behalf.

AI Website Builder

Auto-generates og:title, og:description, og:image per page. Image auto-resized to 1200×630 and served from the CDN.

Learn more

Blog & CMS

Every post gets og:type=article plus article:published_time, article:author, article:section auto-filled on publish.

Learn more

Grigora Mail

Newsletter link previews inherit OG tags from your domain. Consistent branding from web to inbox.

Learn more

More OG + meta tools

All free, all part of the Grigora SEO suite.

OG Image Preview Tool

Upload or paste an image URL to preview the exact Facebook + LinkedIn card rendering before publishing.

OG Title Checker

Validate the length and pixel width of your og:title so it never gets truncated on social feeds.

OG Description Generator

Auto-generate 2–4 sentence OG descriptions tuned for social CTR, different from your meta description.

Meta Tag Generator

Generate the full meta tag bundle — title, description, canonical, robots, and OG — in one go.

View all 190+ free tools

Frequently asked questions

12 questions we get most often about Open Graph tags.

Open Graph is a meta-tag protocol created by Facebook in 2010 that tells social platforms how to render your link when someone shares it. Without og:title, og:description, and og:image, Facebook and LinkedIn fall back to scraping whatever they can find on the page — often the wrong image or a truncated paragraph. With OG tags, you control the thumbnail, headline, and blurb. Twitter also reads OG tags as a fallback when Twitter Card tags are missing. If you share links anywhere on social media, OG tags directly control your click-through rate.

Want OG tags handled automatically on every page?

Grigora AI Website Builder + Blog CMS auto-generate and maintain OG tags forever. No plugin needed.

Try Grigora free
4.6 on G2 4.8 on Trustpilot
Last updated May 2026