Meta Tag Generator
Generate SEO, Open Graph, and Twitter Card meta tags for your web pages. See a live social preview and copy all tags with one click.
Page Details
15/60 chars (ideal: ≤60)
61/160 chars (ideal: ≤160)
Social Preview
example.com
My Awesome Page
A description of my page for search engines and social media.
Generated Tags
<!-- Primary Meta Tags --> <title>My Awesome Page</title> <meta name="title" content="My Awesome Page"> <meta name="description" content="A description of my page for search engines and social media."> <link rel="canonical" href="https://example.com/page"> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/page"> <meta property="og:title" content="My Awesome Page"> <meta property="og:description" content="A description of my page for search engines and social media."> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="Example Site"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@example"> <meta name="twitter:url" content="https://example.com/page"> <meta name="twitter:title" content="My Awesome Page"> <meta name="twitter:description" content="A description of my page for search engines and social media."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
SEO Health Check
Frequently Asked Questions
What are Open Graph meta tags?▼
Open Graph (OG) tags are HTML meta tags that control how your page appears when shared on social media platforms like Facebook, LinkedIn, and Slack. They define the title, description, image, and URL shown in link previews.
What size should my OG image be?▼
The recommended OG image size is 1200×630 pixels (1.91:1 aspect ratio). This works across Facebook, LinkedIn, Twitter, and most messaging apps. Keep it under 1MB for fast loading.
What is the ideal meta description length?▼
Google typically displays 155–160 characters of a meta description. Aim for 70–160 characters — long enough to be descriptive but short enough to display in full. Descriptions over 160 characters get truncated.
What is Twitter Card and how does it differ from OG?▼
Twitter Card tags control how your content appears when shared on Twitter/X. While Twitter can read OG tags as fallback, Twitter-specific tags give you more control over the card type (summary vs large image) and Twitter-specific fields like site handle.
Do I need both OG and Twitter Card tags?▼
Best practice is to include both. Twitter reads OG tags as fallback, but explicit Twitter Card tags ensure correct rendering. Other platforms (LinkedIn, Slack, Discord) primarily read OG tags.
Related Products
on GumroadTypeScript Quick Reference Toolkit
5 practical reference files for TypeScript developers: cheatsheet, TS vs JS comparison, 20 utility types with real examples, tsconfig best practices template, and 15 common mistakes guide. Print it. Keep it on your desk.
Buy on Gumroad →DevToolkit Starter Kit
A ready-to-deploy developer tools website with 12 built-in tools. Astro + Preact + Tailwind. Deploy to Cloudflare Pages for free. Built-in SEO, dark mode, and ad-ready layout.
Buy on Gumroad →DevPlaybook Interview Vault
210+ real technical interview questions with model answers, asked at Google, Meta, Amazon, Microsoft, Stripe, and Shopify. Covers Frontend (55), Backend (55), System Design (50), and DSA (50). Available in English and Traditional Chinese.
Buy on Gumroad →You Might Also Need
HTML to Markdown Converter
Convert HTML to Markdown instantly. Supports headings, bold, italic, links, images, lists, tables, code blocks, and blockquotes. Free online tool, runs in your browser.
Open free tool →
HTML Entity Encoder / Decoder
Encode HTML special characters to entities and decode HTML entities back to text. Convert < > & " and 50+ named entities. Free, runs in browser.
Open free tool →
HTML Formatter & Minifier
Format messy HTML with proper indentation or minify it to reduce file size. Handles void elements, pre/script blocks, and nested tags. Runs entirely in your browser.
Open free tool →
More Free Tools
Related Articles
TypeScript 5.5 New Features: Complete Guide for Developers 2026
Everything you need to know about TypeScript 5.5: inferred type predicates, isolated declarations, JSDoc @import tag, new Set methods, and performance improvements. With practical code examples.
Best Tailwind CSS Tools and Resources for Developers in 2026
The complete guide to Tailwind CSS tools in 2026. Component libraries, UI generators, VS Code extensions, playground tools, and cheatsheets that make building with Tailwind faster and more productive.
Markdown to HTML: Best Free Tools and How They Work
Discover the best free Markdown to HTML converters in 2026. Learn how the conversion works, which tools to use for different contexts, and how to preview and export Markdown as HTML.
CSS-in-JS vs Tailwind CSS vs CSS Modules: Which to Choose in 2025?
An honest comparison of CSS-in-JS (styled-components, Emotion), Tailwind CSS, and CSS Modules in 2025 — covering developer experience, performance, bundle size, team scalability, and when each approach wins.
HTML/CSS/JavaScript Fundamentals: The Core Every Developer Must Know in 2026
Essential HTML semantics, CSS specificity, JavaScript async patterns, event loop, and DOM performance techniques that separate senior developers from juniors in 2026.
Enjoying this tool? Get more like it.
Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.
Unlock AI-Powered Dev Tools
- ⚡ AI Code Review, Doc Generator & SQL Builder
- ⚡ All premium templates & early access
- ⚡ Member discounts on Gumroad products
$9/mo after trial · Cancel anytime
Want the full toolkit?
Get DevPlaybook Pro
Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.
MIT licensed · Instant download · No subscription
See what's included → Browse all deals →