Meta Tags SEO Guide
Complete guide to meta tags, Open Graph, and social media optimization.
← Developer Tools
Meta Tag Generator — SEO, OG, Twitter, WhatsApp Previews
SEO · OG · Twitter Card · SERP Preview · Facebook · WhatsApp
Generate complete HTML meta tags for SEO, social sharing and accessibility. Essential SEO: title (character counter), meta description, canonical URL, keywords, robots, theme-color. Open Graph: og:type, og:image, og:site_name, locale. Twitter Card: card type, site/creator handles. Article meta: published_time, author, section. Mobile: apple-mobile-web-app. Live previews for Google SERP, Facebook, Twitter/X and WhatsApp. 6 page type presets. Copy per section or copy all.
⚡ Presets:
📝 Essential SEO
39 / 60
30–60 chars ideal. Truncated after ~60 chars in Google.
102 / 160
50–160 chars ideal. Shown below title in search results.
📊 Open Graph
Custom OG title/description
🐦 Twitter / X Card
@
@
📰 Article Meta
📱 Mobile Meta
🔍 Google Search Result Preview
https://example.com/blog/web-apps
How to Build Amazing Web Apps | My Blog
Learn step-by-step how to build modern web applications with the latest frameworks and best practices.
📋 Generated HTML
<!-- ═══ Essential Meta Tags ═══ --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How to Build Amazing Web Apps | My Blog</title> <meta name="description" content="Learn step-by-step how to build modern web applications with the latest frameworks and best practices."> <meta name="keywords" content="web apps, tutorial, javascript"> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://example.com/blog/web-apps"> <meta name="theme-color" content="#6366f1"> <!-- ═══ Open Graph ═══ --> <meta property="og:type" content="article"> <meta property="og:title" content="How to Build Amazing Web Apps | My Blog"> <meta property="og:description" content="Learn step-by-step how to build modern web applications with the latest frameworks and best practices."> <meta property="og:url" content="https://example.com/blog/web-apps"> <meta property="og:image" content="https://example.com/og/web-apps.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Web app development tutorial illustration"> <meta property="og:site_name" content="My Website"> <meta property="og:locale" content="en_US"> <!-- ═══ Twitter / X Card ═══ --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="How to Build Amazing Web Apps | My Blog"> <meta name="twitter:description" content="Learn step-by-step how to build modern web applications with the latest frameworks and best practices."> <meta name="twitter:image" content="https://example.com/og/web-apps.png">
Frequently Asked Questions
What are meta tags?
Meta tags are HTML elements in the <head> section that provide metadata about a webpage — not visible to users but read by search engines (for SEO) and social media (for link previews).
What is the ideal title tag length?
30–60 characters. Google typically shows up to 60 chars before truncating. Include your primary keyword near the start and brand name at the end separated by | or -.
What are Open Graph tags?
Open Graph (og:) tags control how your page appears when shared on Facebook, LinkedIn, and WhatsApp. The most important are og:title, og:description, og:image (1200×630px recommended), og:url and og:type.
What is Twitter Card?
Twitter Card meta tags control how links appear in tweets. summary_large_image shows a large image above title/description. summary shows a small thumbnail. twitter:card is required to enable cards.
What does robots meta tag do?
"index, follow" = Google can index and follow links (default). "noindex" = exclude from search. "nofollow" = don't follow outgoing links. Use "noindex, nofollow" for admin, staging, and duplicate pages.