Open Graph Tag Generator
Fill in your page details and get a copy-paste block of Open Graph and Twitter Card meta tags — with a live health score so you know nothing is missing.
Quick start
Tag health
0%<!-- Open Graph --> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" />
Tips
- →Title 40–60 chars · Description 100–160 chars
- →Image must be an absolute HTTPS URL — relative paths don't work
- →Recommended image size: 1200×630px, under 200 KB
- →After publishing, clear platform caches via Facebook Debugger, LinkedIn Post Inspector, or Twitter Card Validator
How it works
Fill in your page details
Enter the title, description, image URL, and page type.
Check the health score
The live score flags missing fields and out-of-range values before you copy.
Copy the tag block
Paste the generated HTML into your page's <head> and you're done.
What it's typically used for
Before publishing a blog post
Before publishing a blog post or article. It is easy to set OG tags once during initial setup and then forget to review them for each new piece of content. Running each post through the generator ensures the title, description, and image are correctly set before the first share goes out.
Adding metadata to older pages
Adding social metadata to pages that never had it. Older sites and CMS-managed pages often have incomplete or entirely missing OG tags. This tool generates a complete block — both og:* and twitter:* tags — that you paste straight into the page template.
Pre-launch tag health check
Cross-checking tag health before a launch. The health score flags the most common issues: title too long, missing description, no twitter:card set. Finding these before the page goes live avoids a broken or plain link preview on the first social share.
Frequently asked questions
What are Open Graph meta tags?
Open Graph (OG) meta tags are HTML tags in the <head> of a page that control how it appears when shared on social platforms. They set the title, description, image, and type shown in link preview cards on Facebook, LinkedIn, Twitter/X, WhatsApp, Slack and more.
What is the ideal og:image size?
The recommended og:image size is 1200×630 pixels (1.91:1 ratio), under 8 MB — aim for under 200 KB for fast loading. Always use an absolute HTTPS URL; relative paths do not work. Twitter's Large Image card requires at least 300×157px.
Do I need both og:* and twitter:* tags?
Twitter/X reads twitter:* first and falls back to og:* if absent. Setting twitter:card is required to unlock rich card display. For most sites, set og:* for all platforms and add twitter:card — the rest is optional. This generator outputs both automatically.
Why does my social preview still show the old content after I updated the tags?
Social platforms cache link previews aggressively. Clear the cache per platform: Facebook → Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn → Post Inspector (linkedin.com/post-inspector), Twitter/X → Card Validator (cards-dev.twitter.com/validator). WhatsApp has no public tool — share the link fresh in a new conversation.
What title and description length should I use?
For og:title, 40–60 characters is the sweet spot — enough to be descriptive without being truncated. For og:description, aim for 100–160 characters: one or two clear benefit-focused sentences. The tag health score in this tool flags when you are outside these ranges.
Do Open Graph tags affect SEO rankings?
OG tags are not a direct ranking factor in Google Search — they are specifically for social link preview cards. That said, a well-written og:title and og:description that drives more clicks from social can indirectly contribute to traffic. Keep them consistent with your page title and meta description.
What is og:type and which value should I use?
og:type tells social platforms what kind of content is being shared. "website" is the default and works for most pages. Use "article" for blog posts — it unlocks additional tags like article:published_time and article:author. Use "video.movie" or "video.episode" for video content.
Can I use OG tags on a React or Next.js app?
Yes, but OG tags must be in the server-rendered HTML. Social platforms do not execute JavaScript when fetching a page, so tags added dynamically in client-side React will not be seen. Use Next.js metadata API, Remix loader, or Astro front matter to output the tags in the initial HTML.