Meta Tags Generator
Generate SEO meta tags, Open Graph, Twitter Cards with live preview. Optimize website metadata for search engines and social sharing
Meta tags are the difference between your link previewing as a thumbnail with title and description on Twitter, Slack, LinkedIn — and previewing as a bare URL. Three standards do most of the work: standard SEO meta tags (title, description, robots), Open Graph (Facebook, Slack, Discord, most messengers), and Twitter Cards (X). This generator emits all three, validates against current size limits, and previews how Google, Facebook, and X will actually render the snippet.
What each tag set is for
- <title> — the tab title and the headline in SERP. ~60 characters before Google truncates. Different from og:title, although they usually share content.
- <meta name="description"> — the snippet under your title in search results. Google uses it as a hint, may rewrite based on query relevance. ~150–160 characters.
- Open Graph (og:title, og:description, og:image, og:type, og:url) — used by Facebook, LinkedIn, Slack, Discord, Telegram, Signal, and most messengers. og:image needs to be at least 1200×630 for high-res previews.
- Twitter Cards (twitter:card, twitter:title, twitter:description, twitter:image) — X-specific. summary_large_image is the standard card type. Falls back to Open Graph when twitter:* is missing.
- Schema.org JSON-LD — structured data for rich results (articles, products, recipes, FAQs). Separate from meta tags; lives in <script type="application/ld+json">.
Working example: a blog post
Input
Title: How we cut p99 latency from 2s to 200ms Description: A walk-through of the three changes that made the biggest difference: connection pooling, query batching, and dropping a cache layer. URL: https://eng-blog.example.com/p99-latency-fix Image: https://eng-blog.example.com/og/p99.png (1200×630)
Output
<!-- SEO --> <title>How we cut p99 latency from 2s to 200ms | EngBlog</title> <meta name="description" content="A walk-through of the three changes that made the biggest difference: connection pooling, query batching, and dropping a cache layer."> <link rel="canonical" href="https://eng-blog.example.com/p99-latency-fix"> <!-- Open Graph --> <meta property="og:type" content="article"> <meta property="og:title" content="How we cut p99 latency from 2s to 200ms"> <meta property="og:description" content="A walk-through of the three changes that made the biggest difference: connection pooling, query batching, and dropping a cache layer."> <meta property="og:url" content="https://eng-blog.example.com/p99-latency-fix"> <meta property="og:image" content="https://eng-blog.example.com/og/p99.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="How we cut p99 latency from 2s to 200ms"> <meta name="twitter:description" content="A walk-through of the three changes that made the biggest difference: connection pooling, query batching, and dropping a cache layer."> <meta name="twitter:image" content="https://eng-blog.example.com/og/p99.png">
Title length: 47 chars (room for site name suffix). Description: 144 chars (under the 160 cap). og:image at 1200×630 hits the summary_large_image card and Facebook large preview. Always include og:image:width and og:image:height — without them, slow crawlers may skip generating the thumbnail.
Size and content rules that matter
- <title>: ~55–60 chars before SERP truncates. Pixel-width-based, not character-based — wide characters (W, M) reduce visible count.
- <meta name="description">: ~150–160 chars. Mobile SERP truncates earlier than desktop (~130 chars).
- og:image: minimum 200×200, recommended 1200×630 for large preview cards. Aspect ratio ~1.91:1. File size under 5MB; PNG or JPG.
- twitter:card: "summary" (small thumbnail), "summary_large_image" (full-width preview), "player" (video), "app" (deprecated for most use).
- canonical URL: full absolute URL including https://, trailing slash matching how Google indexes the page. Mismatched canonical splits link equity.
When to reach for this tool
- You are launching a new page and want to see exactly how it will preview on Slack, Twitter, and Google before shipping.
- You inherited a page with random meta tag combinations (some Open Graph, no Twitter) and want a consistent set.
- You are debugging "the link preview is wrong on Slack" — usually a missing or wrong og:image, or a cache that has not refreshed (use Facebook debugger to bust it).
- You are configuring a static site generator template and want a complete reference set of tags to plug into a page-head partial.
What this tool will not do
- It will not crawl your site to verify the tags actually render in HTML. SPAs that inject meta tags via JavaScript after page load may not be visible to crawlers. Server-render tags (or use a static export) for crawler-visible SEO.
- It will not flush social media caches. Slack, Facebook, and Twitter cache previews. After updating tags, use each platform's debugger (Facebook Sharing Debugger, Twitter Card Validator) to force a refresh.
- It will not generate the actual og:image. You need to provide a 1200×630 image yourself. Image-generation tools (Vercel OG, Cloudinary transforms) are a separate step.
Generated HTML is a string in your browser — nothing is sent to a server. You can build meta tags for unreleased / staging URLs without leaking them.
Frequently asked questions
Do I still need both Open Graph AND Twitter Cards?
Yes. Twitter prefers twitter:* tags but falls back to og:* if missing. LinkedIn, Slack, Discord, and others read og:* exclusively. Always set both — it is a few extra lines for full compatibility.
My link preview shows the wrong image on Facebook. How do I fix?
Facebook caches og:image for ~24 hours. After updating, paste your URL into the Facebook Sharing Debugger and click "Scrape Again". For frequent updates, append a version query (?v=2) to the image URL to bust the cache.
How important is the <meta name="keywords"> tag?
Useless for Google since 2009 and most other engines since. Some niche search engines and internal-site search still read it. Safe to omit; if you include it, do not stuff with terms.
Should I use og:locale and hreflang for international sites?
Yes if you have translated versions. og:locale tells social platforms which language preview to show; hreflang (separate <link rel="alternate">) tells Google about alternate language versions of the same content. Both are required for proper multi-language SEO.
What is the difference between <link rel="canonical"> and og:url?
canonical tells Google "this is the URL to index" for the current page (resolves duplicate-content issues from query parameters, tracking codes, etc.). og:url is the canonical URL for social-share purposes. They are usually identical; set both to the same absolute URL.
How do I make Twitter show a large card instead of small?
Set twitter:card to summary_large_image (not summary), include a twitter:image at least 300×157 and ideally 1200×675. Twitter's crawler also needs to fetch the image successfully — verify in the Twitter Card Validator.
Related tools
Generate SEO-friendly URL slugs from text. Convert titles to clean URLs with diacritics removal. Free online slug generator for websites
Generate favicons in all sizes (16x16, 32x32, 180x180) from any image. Create ICO and PNG favicons. Free online favicon maker for websites
Complete list of HTTP status codes with descriptions and examples. Learn 200, 301, 404, 500 error codes. Free HTTP response code reference guide
Encode and decode URLs online. Convert special characters to percent-encoding for safe URLs. Free URL encoder/decoder tool for developers
Debug CORS issues, analyze headers, generate server configurations. Support for Express, Nginx, Apache, Django, Flask, Spring Boot. Learn CORS concepts. Free online CORS tester
Build Content-Security-Policy headers visually. Add directives, sources, preview policy. Free online CSP generator for web security
Last updated · E-Utils editorial team