How to use the Open Graph Generator
1. Fill in the title, description, page URL, and image URL for your social share preview.
2. Select the Open Graph type and Twitter Card format that best fits your content.
3. Copy all the generated tags and paste them inside the <head> of your HTML document.
What is it?
Open Graph (OG) tags control how your page looks when shared on Facebook, LinkedIn, Slack, iMessage, and other platforms that support the Open Graph protocol. Without them, social platforms guess what to show — often displaying wrong images or titles. A good OG image (1200×630px recommended) dramatically increases engagement on shared links.
Twitter Cards serve the same purpose for Twitter/X but use a separate set of meta tags. The "summary_large_image" card shows a large image preview and is the most eye-catching format. You can copy the same title and description from your OG tags — this generator outputs both sets at once to save time.
Example
og:title: How to Build a REST API og:description: Step-by-step tutorial using Node.js og:image: https://example.com/og-image.png og:type: article
<meta property="og:title" content="How to Build a REST API"> <meta property="og:description" content="Step-by-step tutorial using Node.js"> <meta property="og:image" content="https://example.com/og-image.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="How to Build a REST API">
OG tags control how your page appears when shared on LinkedIn, Facebook, Slack, and Discord. Twitter uses its own tags.
Benefits
Control exactly how your page appears when shared on social media
Without OG tags, social platforms choose their own title, image, and description — often poorly. OG tags give you full control.
Fix broken social previews on existing pages
Missing og:image, incorrect og:url, or wrong og:type causes broken unfurls in Twitter, LinkedIn, Facebook, and Slack.
Ensure your image meets every platform's size requirements
Facebook requires 1200×630 minimum; Twitter has its own aspect ratio preferences — the generator outputs compliant tags for all.
One block covers Twitter cards, Facebook, LinkedIn, and Slack
A correctly generated OG block produces consistent previews across all major social and messaging platforms simultaneously.
Frequently asked questions
What is the recommended Open Graph image size?
1200×630 pixels is the recommended size for og:image. This works across all platforms. The image should be under 5MB and use JPG or PNG format. Avoid important content in the outer 10% since some platforms crop the edges.
Why do I need both OG tags and Twitter Card tags?
Twitter/X uses its own twitter: namespace for cards and does not read og: tags (except as a fallback). To get perfect previews on all platforms, include both sets. This generator outputs both at once.
What is the og:type field for?
og:type tells platforms what kind of content this page is. 'website' is the generic default. Use 'article' for blog posts (unlocks author/publish date), 'product' for e-commerce pages, and 'profile' for user profile pages.