HTML Meta Tag Generator
Generate a complete HTML <head> snippet with SEO meta tags, Open Graph, Twitter Card, robots directives, and canonical URLs — all in one click.
Page Information
Open Graph + Social
Twitter Card
Include Sections
Generated HTML
Social Preview
Frequently Asked Questions
What are Open Graph meta tags?▼
Open Graph (OG) tags are meta tags that control how your page looks when shared on social networks like Facebook, LinkedIn, and Slack. They define the title, description, image, and URL shown in link previews. They were created by Facebook but are now widely adopted across the web. The most important are og:title, og:description, og:image, and og:url.
What is the difference between Twitter Cards and Open Graph?▼
Twitter has its own card system (twitter:card, twitter:title, etc.) but it falls back to Open Graph tags if Twitter-specific tags aren't present. Twitter supports four card types: summary (small image), summary_large_image (wide banner image), app (app store links), and player (video/audio). Use summary_large_image for most content pages for maximum visual impact.
What size should my OG image be?▼
For Open Graph: 1200×630 pixels at a 1.91:1 ratio is the recommended size. This works on Facebook, LinkedIn, and most platforms. Minimum is 600×315px. For Twitter summary_large_image, 1200×600px works well. Always use HTTPS for image URLs. Keep images under 8MB (Facebook) or 5MB (Twitter).
Do I need canonical tags too?▼
Yes — the canonical link tag (<link rel="canonical" href="..."/>) tells search engines which URL is the authoritative version of a page, preventing duplicate content issues. It's separate from meta tags but equally important for SEO. This generator includes the og:url tag which serves a similar purpose for social sharing.
What is the robots meta tag?▼
The robots meta tag controls how search engine crawlers index your page. Common values: 'index, follow' (default — crawl and follow links), 'noindex, follow' (don't index this page but follow links), 'noindex, nofollow' (block completely), 'index, nofollow' (index but don't follow links). Use noindex for staging pages, thank-you pages, and duplicate content.
How do I test my meta tags?▼
Use these tools to preview and validate: Facebook Sharing Debugger (developers.facebook.com/tools/debug/), Twitter Card Validator (cards-dev.twitter.com/validator), LinkedIn Post Inspector (linkedin.com/post-inspector/), and Google Rich Results Test (search.google.com/test/rich-results). Always clear the cache in these tools after updating your tags.
Related Products
on GumroadDevPlaybook 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 →TypeScript 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 →Developer Interview Vault
210 technical interview questions with model answers, key points, and follow-up questions. Covers Frontend, Backend, System Design, and DSA — bilingual English + Traditional Chinese (ZH-TW). PWYW from $29.
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
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.
Vite 6 vs Webpack 5 深度對決：2026 大型專案遷移實戰指南
2026 年最完整的 Vite 6 vs Webpack 5 深度比較與遷移指南。涵蓋效能基準測試、分塊策略、CSS Modules、環境變數轉換、常見陷阱與真實大型專案遷移清單。
CSS Grid vs Flexbox: Complete Guide with Interactive Examples 2025
CSS Grid vs Flexbox with real code examples for every common layout pattern. Holy Grail layout, card grid, navigation bar, sidebar — see exactly when to use each one.
Rust and WebAssembly in 2026: From Zero to Production
Learn how to compile Rust code to WebAssembly for blazing-fast web applications. A complete guide covering wasm-pack, wasm-bindgen, web-sys, JavaScript integration, performance optimization, and real-world case studies from Figma, Google Earth, and more.
SVG Optimization Techniques: Reduce File Size by 70% Without Quality Loss
Step-by-step SVG optimization guide. Use SVGO, manual techniques, and build tool integration to cut SVG file sizes by 50-80% while preserving visual quality.
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 →