OpenGraph & Social Meta Tag Previewer
Generate search-engine-optimized HTML meta tags, OpenGraph data, and Twitter cards. Preview how your webpage appears on Google, Twitter / X, Facebook, LinkedIn, and Discord in real time.
Page Metadata Configuration
KitWharf — 100% Free Client-Side Developer & Utility Tools
Fast in-browser utility tools for developers, designers, and creators. Convert images, format JSON, test regex, calculate finance, and optimize SVGs with zero tracking.
<!-- Primary Meta Tags --> <title>KitWharf — 100% Free Client-Side Developer & Utility Tools</title> <meta name="title" content="KitWharf — 100% Free Client-Side Developer & Utility Tools" /> <meta name="description" content="Fast in-browser utility tools for developers, designers, and creators. Convert images, format JSON, test regex, calculate finance, and optimize SVGs with zero tracking." /> <meta name="robots" content="index, follow" /> <link rel="canonical" href="https://kitwharf.com/" /> <meta name="theme-color" content="#4f46e5" /> <!-- Open Graph / Facebook / LinkedIn --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://kitwharf.com/" /> <meta property="og:title" content="KitWharf — 100% Free Client-Side Developer & Utility Tools" /> <meta property="og:description" content="Fast in-browser utility tools for developers, designers, and creators. Convert images, format JSON, test regex, calculate finance, and optimize SVGs with zero tracking." /> <meta property="og:site_name" content="KitWharf" /> <meta property="og:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&h=630&fit=crop" /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://kitwharf.com/" /> <meta name="twitter:title" content="KitWharf — 100% Free Client-Side Developer & Utility Tools" /> <meta name="twitter:description" content="Fast in-browser utility tools for developers, designers, and creators. Convert images, format JSON, test regex, calculate finance, and optimize SVGs with zero tracking." /> <meta name="twitter:creator" content="@kitwharf" /> <meta name="twitter:image" content="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&h=630&fit=crop" />
100% In-Browser Privacy: Meta tags and live card previews are generated completely inside your web browser. No URLs or draft marketing copy are sent to our servers.
Core SEO & Social Meta Tags Reference Guide
| Tag Property | Standard Length | Network Target | SEO & CTR Impact |
|---|---|---|---|
| <title> | 50 – 60 characters | Google, Bing, Browser Tabs | Primary on-page organic ranking factor. Crucial for click-through rate. |
| <meta name="description"> | 140 – 160 characters | Search Engine Result Pages | Acts as organic search ad copy; compelling descriptions boost click rates. |
| <meta property="og:image"> | 1200 × 630 px (1.91:1) | Facebook, LinkedIn, Discord, Slack | Large image cards drive 3x higher social engagement than plain text links. |
| <link rel="canonical"> | Absolute HTTPS URL | All Search Spiders | Consolidates duplicate content ranking signals and UTM parameters. |
Recommended Social Card Image Dimensions Matrix
| Platform | Recommended Size | Aspect Ratio | Max File Size |
|---|---|---|---|
| Open Graph Universal (FB / LinkedIn) | 1200 × 630 px | 1.91 : 1 | < 8 MB |
| Twitter / X Summary Large Image | 1200 × 628 px | 1.91 : 1 (or 2:1) | < 5 MB |
| Twitter / X Square Summary | 144 × 144 px (or 300 × 300 px) | 1 : 1 | < 5 MB |
How to Test and Add Meta Tags to Your Website
Enter Page Details
Provide your page title, meta description, canonical URL, and 1200x630 social card graphic URL.
Audit Length Limits
Ensure your title stays under 60 characters and description under 160 characters to avoid search snippet truncation.
Preview Across Feeds
Switch between Google, Twitter, Facebook, and Discord to confirm your link looks professional in every feed.
Copy Into <head>
Paste the generated HTML snippet directly inside the <head> tag of your HTML or Next.js metadata object.