Generate all the meta tags your page needs for better SEO and beautiful social sharing previews on Google, Facebook, Twitter, LinkedIn, and WhatsApp.
๐ท๏ธ Open Meta Tag GeneratorFree ยท No signup ยท Runs in browser ยท 5 live previews
A meta tag generator helps you create the HTML tags that tell search engines and social platforms what your page is about. There are three key sets: basic SEO tags (title, description, canonical), Open Graph tags (for Facebook, LinkedIn, WhatsApp), and Twitter Card tags. Getting all three right means your page ranks better in Google and looks great when someone shares it on social media.
The ToolForge Meta Tag Generator generates all three tag sets simultaneously and shows live previews of exactly how your page will appear on Google, Facebook, Twitter, WhatsApp, and Slack โ before you even publish.
Live Google SERP preview with accurate character truncation
Facebook/LinkedIn card preview (1.91:1 image ratio)
Twitter summary and summary_large_image card previews
WhatsApp link preview bubble
Character counters with color-coded warnings (title: 50โ60, description: 120โ160)
OG type selector: website, article, product, profile, video
Locale selector for 8 top languages
Quick presets: Blog Post, Product Page, Landing Page, Portfolio
Copy tags in sections (Basic, OG, Twitter) or all at once
Download as .html snippet file
Type your page title. The character counter turns green at 50โ60 characters โ the ideal length for Google. Titles longer than 60 characters get cut off in search results.
Describe your page in 120โ160 characters. Include your main keyword naturally. This text appears below your title in Google results and also populates your social share descriptions.
The page URL becomes your canonical link and the og:url property. The site name appears in Facebook and LinkedIn card footers (e.g., "via ToolForge").
Paste the full URL of your social share image. Use a 1200ร630px image (1.91:1 ratio). This image appears in Facebook, LinkedIn, Twitter, and WhatsApp previews. Use JPG for photos, PNG for graphics with text.
Select the content type (website, article, product) and your preferred Twitter card format. Use summary_large_image for visual content, summary for text-heavy content.
Check all 5 preview cards on the right. They update in real-time as you type. Verify your title and description fit, your image loads correctly, and all platforms show what you expect.
Click "Copy All Tags" to get all three tag sections at once, or copy sections individually. Paste inside the <head> element of your HTML page, before the closing </head> tag.
Open Graph was created by Facebook in 2010 and adopted by virtually every social platform. The core OG tags are og:title, og:description, og:image, og:url, og:type, and og:site_name. Without them, platforms scrape your page and generate previews from whatever content they find first โ often resulting in wrong images, generic titles, or missing descriptions.
<meta property="og:title" content="Page Title"> <meta property="og:description" content="Description"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com/page"> <meta property="og:type" content="website">
Twitter Cards control how URLs appear when tweeted. The twitter:card property can be "summary" (small square image) or "summary_large_image" (full-width banner image above the text). If Twitter Card tags are missing, Twitter falls back to OG tags. Adding explicit Twitter tags lets you use different titles and descriptions optimized for that platform's audience.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Page Title"> <meta name="twitter:description" content="Description"> <meta name="twitter:image" content="https://example.com/image.jpg"> <meta name="twitter:site" content="@yourhandle">
The <title> tag and <meta name="description"> are the oldest and most fundamental SEO tags. Google displays the title as the blue link in search results (truncated at ~60 characters) and the description as the gray snippet below (truncated at ~160 characters). While meta descriptions are not a direct ranking factor, a well-written description with a clear call to action significantly improves click-through rate from search results. Always include a <link rel="canonical"> tag to tell Google which URL is the authoritative version of the page, preventing duplicate content penalties.
| Use Case | Recommended OG Type | Twitter Card |
|---|---|---|
| Blog post or article | article | summary_large_image |
| Product landing page | product | summary_large_image |
| Homepage or company site | website | summary_large_image |
| Author or user profile | profile | summary |
| Video content page | video | summary_large_image |
| Documentation or guide | website | summary |
| Event page | website | summary_large_image |
Keep title tags between 50โ60 characters. Google truncates longer titles, which wastes your click-through opportunity.
Write unique meta descriptions for every page. Duplicate descriptions signal low-quality content to Google.
Include your primary keyword in both the title and description, but write for humans first โ Google rewards natural language.
Always use HTTPS image URLs for og:image. HTTP images are blocked on most platforms.
Test your tags with official platform debuggers after publishing: Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector.
Update meta tags when you update content significantly โ especially for time-sensitive articles where freshness matters.
Open Graph (OG) tags are HTML meta tags that control how your page appears when shared on Facebook, LinkedIn, WhatsApp, and other social platforms. They define the title, description, image, and URL that appear in the shared link preview. Without OG tags, platforms generate previews automatically, which often look broken or miss important information.
The recommended size for og:image is 1200ร630 pixels with a 1.91:1 aspect ratio. This size works well across Facebook, LinkedIn, Twitter (summary_large_image), and WhatsApp. Keep the file size under 5MB. Use JPG for photographs and PNG for graphics with text.
The summary card shows a small square thumbnail (144ร144px minimum) to the left of the title and description. The summary_large_image card shows a large image above the title and description, taking up much more space in the timeline. Use summary_large_image for content where the image is important (blog posts, products, portfolios) and summary for content where the text is more important.
Twitter/X will fall back to Open Graph tags if Twitter Card tags are not present. However, including both gives you maximum control over how your content appears on each platform. The title and description can differ between OG and Twitter tags, allowing you to optimize for each audience.
After publishing your page with the generated tags, use these official debuggers: Facebook Sharing Debugger (developers.facebook.com/tools/debug/), Twitter Card Validator (cards-dev.twitter.com/validator), and LinkedIn Post Inspector (linkedin.com/post-inspector). These tools fetch your page and show exactly how the preview will appear.
Free, instant, no signup โ all previews live in your browser.
Open Meta Tag GeneratorCheck your color choices meet accessibility standards with our Color Contrast Checker โ verify WCAG AA and AAA compliance for foreground and background color pairs.