Skip to main content

Free Open Graph Tag Generator

OG and Twitter tags with a live preview.

0/60 characters

0 characters

Type

How to use the Open Graph Tag Generator, step by step

Real screenshots of the current tool, using sample inputs. Long results are shown as a preview.

  1. 1

    Add your input

    Paste or type into the field Open Graph Tag Generator works from.

    Free Open Graph Tag Generator in its default state before the walkthrough
  2. 2

    Sample text in place

    With sample text entered, Open Graph Tag Generator is ready to run.

    Free Open Graph Tag Generator with sample input or settings in place
  3. 3

    Review the result

    The output updates as you change the input or settings. Review the result shown here.

    Free Open Graph Tag Generator showing its actual result with sample inputs
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.
Paste them inside the <head> tag of your HTML. Above the closing </head>. In Next.js, use the Metadata API (app/page.tsx) or next/head (pages/).
1200×630 pixels, under 8 MB, served from an HTTPS URL. Facebook recommends 1.91:1 aspect ratio; LinkedIn and Twitter both accept 1200×627 or 1200×630.
og:type tells platforms what kind of content this is. "website" is the default and works for homepages. "article" enables article-specific fields like og:article:published_time, og:article:author, og:article:section.
Yes if you want Twitter to show a large-image card. Twitter falls back to OG tags for basic rendering but uses its own twitter:card, twitter:site, and twitter:creator tags for enhanced cards.
Three common causes: (1) the platform has cached an old version.
og:title: 40–60 characters. Above 60, Facebook and LinkedIn truncate. og:description: 2–4 sentences, roughly 150–200 characters.
Not directly. Google does not use og:title or og:description as ranking signals. However, OG tags indirectly improve rankings by driving more social shares and clicks, which Google observes as engagement signals.
Publish the page first, then run the URL through Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), and Twitter Card Validator (cards-dev.twitter.com/validator).
Yes, and you should. Each page needs unique og:title, og:description, og:image, and og:url. Generic site-wide OG tags cause every shared link to look identical, which kills CTR.
Completely free. No signup, no email, no watermark, no limits. Generate OG tags for as many pages as you need.
Yes. Every site built with Grigora's AI Website Builder ships with per-page OG tags auto-populated from the content. The Blog CMS generates og:article:* fields on publish, including published time, author, and section.

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 November 2026