The Required Tags
<head>
<!-- Required OG tags -->
<meta property="og:title" content="Free CSS Gradient Generator | WebDesign001"/>
<meta property="og:description" content="Create beautiful CSS gradients visually. Linear, radial, conic — copy the code instantly."/>
<meta property="og:image" content="https://webdesign001.net/og-images/gradient-generator.png"/>
<meta property="og:url" content="https://webdesign001.net/design-tools/css-gradient-generator/"/>
<meta property="og:type" content="website"/>
<!-- Recommended extras -->
<meta property="og:site_name" content="WebDesign001"/>
<meta property="og:locale" content="en_US"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image:alt" content="Screenshot of the CSS Gradient Generator tool"/>
</head>OG Image Guidelines
- Size: 1200×630px is the universal standard
- Format: JPG or PNG (WebP not supported everywhere)
- File size: Under 8MB, ideally under 1MB
- Text: Keep text large — the image is often shown at thumbnail size
- Safe zone: Keep important content away from edges (crop varies per platform)
- URL: Must be an absolute URL (https://...) — relative URLs don't work
Twitter/X Cards
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Free CSS Gradient Generator"/>
<meta name="twitter:description" content="Create CSS gradients visually — linear, radial, conic."/>
<meta name="twitter:image" content="https://webdesign001.net/og-images/gradient-generator.png"/>
<meta name="twitter:image:alt" content="CSS Gradient Generator screenshot"/>
<meta name="twitter:site" content="@webdesign001"/>💡 Tip: Twitter/X falls back to OG tags if Twitter-specific tags are missing. But it's good practice to include both since Twitter's description length limit differs from Facebook's.
Testing Your Tags
- Facebook: Sharing Debugger — also clears Facebook's cache
- Twitter/X: Card Validator
- LinkedIn: Post Inspector
- WhatsApp: Share a link in a chat and check the preview
- Our tool: Use our Open Graph Preview to check all platforms at once