Open Graph Generator
Generate Open Graph & Twitter meta tags with a live social-card preview.
Your field values are turned into meta tags locally in your browser, and nothing you enter is uploaded to a server.
Need to inspect a link's parts? Try the URL Parser.
About Open Graph Generator
This open graph generator builds the Open Graph and Twitter Card meta tags your pages need to render rich link previews on social platforms. Fill in the title, description, canonical URL, og:image, type, site name, and Twitter card style, then watch a live social-card preview update as you type before copying the finished HTML. It is handy for developers, marketers, and content teams who want correct social meta tags without hand-writing every property. As an og meta tags generator and twitter card generator it covers the common og:image tags and social meta tags so links shared on Facebook, LinkedIn, Slack, and X look polished. Everything runs locally in your browser, so your input is processed on your device and nothing is uploaded to a server.
Features
- Generates Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name) tags
- Adds matching Twitter Card tags (twitter:card, title, description, image)
- Live social-card preview that updates as you type
- Outputs a clean, copy-ready HTML meta block
- Properly escapes special characters in titles, descriptions, and URLs
- Lets you pick the og:type and twitter:card style (such as summary_large_image)
- Copy to clipboard or download the tags as meta-tags.html
- Skips empty fields so the generated markup stays tidy
How to use the Open Graph Generator
- Enter your page title, description, URL, and image URL in the input fields.
- Set the og:type and Twitter card style, then add your site name.
- Check the live social-card preview to confirm how the link will appear.
- Click Copy to grab the HTML or use Download to save meta-tags.html.
- Paste the generated tags into your page's <head> section.
Example
Input
title: Launch Day
url: https://acme.dev/launch
image: https://acme.dev/og.png
Output
<title>Launch Day</title>
<!-- Open Graph -->
<meta property="og:title" content="Launch Day" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.dev/launch" />
<meta property="og:image" content="https://acme.dev/og.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Launch Day" />
<meta name="twitter:image" content="https://acme.dev/og.png" />
Empty fields are omitted, and og:type defaults to website.
Common errors & troubleshooting
- The og:image does not show up in previews on Facebook or LinkedIn. — Use a full absolute URL (https://...) for the image, not a relative path, and make sure the image is publicly reachable.
- Twitter shows a small image instead of a large card. — Set the twitter:card value to summary_large_image so platforms render the full-width image layout.
- Title or description looks cut off in the preview. — Keep titles around 60 characters and descriptions around 110-160 characters so platforms do not truncate them.
- Special characters like & or < break the markup. — Type the raw characters; the generator escapes them automatically into valid HTML entities in the output.
- Platforms still show old preview data after you update the tags. — Re-scrape the URL with the platform's debugger (such as the Facebook Sharing Debugger) to clear the cached preview.
Frequently asked questions
- What is the Open Graph Generator?
- The Open Graph Generator is a tool that produces a ready-to-paste HTML block of Open Graph and Twitter Card meta tags built from your title, description, URL, image, type, and site name.
- How do I use the Open Graph Generator to create meta tags?
- Fill in your page title, description, canonical URL, og:image, type, and site name, watch the live preview update, then click Copy or Download and paste the tags into your page's <head>.
- What is the difference between Open Graph and Twitter Card tags?
- Open Graph (og:) tags are read by Facebook, LinkedIn, Slack, and many others, while twitter: tags are specific to X/Twitter. This tool outputs both so previews work everywhere.
- Which og:image size works best?
- A 1200x630 pixel image with an absolute URL is the safe choice for summary_large_image cards across most platforms.
- Why do my changes not appear when I share the link?
- Social platforms cache previews, so paste your URL into their sharing debugger to force a fresh scrape after updating the meta tags.
- Is my input kept private in the Open Graph Generator?
- Yes. The tags are built locally in your browser, your data never leaves your device, and nothing you enter is uploaded to a server.
Related tools
All ArrayKit tools