Open Graph Meta Generator: Tags That Make Your Links Look Great on Social
Generate Open Graph and Twitter Card meta tags with a live preview card. Stop guessing which image dimensions Twitter will crop to.
Open Graph Meta Generator: Tags That Make Your Links Look Great on Social
You publish a great blog post, share the link on LinkedIn, and… it shows up with the wrong title, a cropped image, and no description. The cause is almost always missing or malformed Open Graph meta tags. The Open Graph Meta Generator fixes this in under a minute.
What Are Open Graph Tags?
Open Graph is a protocol originally created by Facebook in 2010 to let any web page become a rich “object” in a social graph. When you share a URL on a platform that supports Open Graph — Facebook, LinkedIn, Slack, Discord, Telegram, iMessage, and many others — the platform fetches the page and reads a set of <meta> tags from its <head>. Those tags describe how the link should be displayed.
The minimum useful set:
og:title— the headline shown on the cardog:description— the preview text (1-2 sentences)og:image— the image used as the card’s heroog:url— the canonical URL of the pageog:type—website,article,video.movie,product, etc.og:site_name— your brand or publication name
Twitter (now X) reads Open Graph tags as a fallback but prefers its own Twitter Card tags. The generator outputs both.
Why It Matters
A link preview is often the difference between a click and a scroll-past. Multiple studies have found that posts with rich preview cards get 2-3× higher click-through rates than plain URL shares. For a marketing team, a customer success story, or a job listing, that is a meaningful lift.
Equally important: getting it right prevents embarrassing auto-crops. If your og:image is too tall, Twitter will crop the top and bottom. If it is the wrong aspect ratio, LinkedIn will letterbox it. If the title is too long, it gets truncated with an ellipsis.
The 1200×630 Image Rule
The single most important number in social media metadata is 1200×630 pixels. That is the recommended image size for Open Graph previews across Facebook, LinkedIn, Slack, and most other platforms. Twitter Cards prefer a slightly different aspect (1200×675 for summary_large_image), but most platforms will accept 1200×630 gracefully.
Stick to that size and you will rarely get unexpected cropping. Go smaller and your image will look blurry on high-DPI screens. Go larger and you are wasting bandwidth — these images are typically fetched and cached by social platforms.
How to Use the Generator
- Fill in the basics: page title, description, image URL, site name, page URL, and type.
- Watch the live preview card. The generator renders a realistic preview as you type. If the description gets truncated, you will see exactly where the cut-off happens.
- Optionally tweak Twitter-specific settings. Twitter Cards accept a separate
twitter:title,twitter:description, andtwitter:imagethat override the Open Graph values when needed. - Copy the generated HTML and paste it into your page’s
<head>.
What Good Metadata Looks Like
<meta property="og:title" content="How We Cut Page Load Times by 60%" />
<meta property="og:description" content="A case study on image optimization, code splitting, and edge caching." />
<meta property="og:image" content="https://example.com/images/og-case-study.png" />
<meta property="og:url" content="https://example.com/blog/cut-load-times" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example Co." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How We Cut Page Load Times by 60%" />
<meta name="twitter:description" content="A case study on image optimization, code splitting, and edge caching." />
<meta name="twitter:image" content="https://example.com/images/og-case-study.png" />Common Mistakes
- Relative image URLs. Always use absolute URLs (
https://example.com/image.png), never relative paths. Social media crawlers do not resolve relative URLs reliably. - HTTP instead of HTTPS. Most platforms refuse to load mixed-content images. Always serve
og:imageover HTTPS. - Cached previews. Social platforms cache preview data aggressively. After changing tags, use the platform’s debug tool to force a re-scrape.
- Wrong image size. A 200×200 thumbnail will look fine on mobile but blurry on desktop. Always export at 1200×630 minimum.
- Title too long. Most platforms truncate at around 60-90 characters. The generator’s preview shows you exactly where the cut-off happens.
Try It
The Open Graph Meta Generator at 1Stop Tools is paired nicely with the Meta Tag Generator for general metadata, the Sitemap Generator for discovery, and the Robots.txt Generator for controlling how crawlers access your pages.
About the author
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.
Credentials
- AWS Certified Solutions Architect
- Contributed to open-source developer tools with 10,000+ GitHub stars
- Former staff engineer at a leading frontend platform company
Expertise
developer tooling, CI/CD pipelines, API design, database tools, DevOps workflows, regular expressions, Markdown processing
Education
B.S. in Computer Science, Massachusetts Institute of Technology
Stay up to date
Stay up to date with new tools, blog posts, and improvements. No spam, unsubscribe anytime.
Newsletter integration coming soon.
Related Articles
CSS Box Shadow Generator: Build Multi-Layer Shadows You Can Copy-Paste
Stack CSS box-shadows visually, tune each layer, and copy production-ready CSS. No guessing at rgba values or counting commas.
CSS Text Glitch Effect Generator: Cyberpunk Headings Without JavaScript
Generate a pure-CSS glitch text effect with keyframe animations. Cyberpunk-style RGB-split headings you can drop into any HTML page.
Aspect Ratio Calculator for Designers, Video Editors & Responsive Layouts
Compute width, height, and ratios for any project — from YouTube thumbnails to CSS hero sections — with one free browser tool.
Everything runs in your browser. Nothing leaves your device.
No signups, no uploads, no data collection. Just fast, private utilities for developers, designers, and everyday tasks.