Meta Tag Generator

Generate HTML meta tags including title, description, Open Graph, and Twitter Card tags. Live character counter warns about length issues. Google SERP preview included.

Key features

Generates title, description, and keyword meta tags
Creates Open Graph and Twitter Card tags automatically
Live character count with SEO best-practice warnings
Google SERP preview shows exactly how your page will look

Guide

Meta tags are HTML elements placed in the head section of a web page that provide structured information about the page to search engines, social media platforms, and browsers. They do not appear as visible content on the page, but they control how the page is represented in search results, social media shares, browser tabs, and screen reader announcements. Getting meta tags right is one of the most direct and controllable aspects of on-page SEO. The title tag is the single most important on-page SEO element. It appears as the clickable blue headline in Google search results, in the browser tab, and as the default text when someone bookmarks your page. The optimal length is 50-60 characters. Titles longer than 60 characters get truncated in search results with an ellipsis, which can cut off important words and reduce click-through rates. Google sometimes rewrites titles that it considers too long, too short, stuffed with keywords, or not representative of the page content. When Google rewrites your title, you lose control over how your page appears in search results, so getting the length and content right the first time matters. Writing effective title tags follows a consistent pattern used by SEO professionals: place your primary keyword near the beginning, follow it with a secondary keyword or descriptive phrase, and optionally append your brand name separated by a pipe or dash. For example: "Image Compressor Online - Free PNG/JPG/WebP Tool | WebRecast" puts the main keyword (image compressor) first where it carries the most weight, adds qualifying terms (online, free, formats), and includes the brand. The primary keyword should appear in the first 30 characters whenever possible, because that portion is always visible regardless of truncation. Avoid keyword stuffing in titles. "Free Image Compressor Online Free Compress Images Free Tool" will trigger Google's spam detection algorithms, looks unprofessional to users, and actively hurts your click-through rate. Users skip listings that look spammy. Each title should read naturally, like a headline a human would write. The meta description tag provides a summary of the page content. It appears as the two-line text snippet below the title in search results. The optimal length is 150-160 characters. Google does not use the meta description as a direct ranking factor (this has been confirmed by Google representatives multiple times since 2009), but a well-written description significantly increases click-through rate (CTR). Higher CTR sends positive signals to Google about your page's relevance, which can indirectly improve rankings over time. Think of the meta description as an advertisement for your page. It should accurately describe what the user will find, include relevant keywords (which Google bolds in the snippet when they match the search query), and provide a clear reason to click. Here is an example of a well-optimized title and description pair: <title>CSS Gradient Generator - Free Visual Editor | WebRecast</title> <meta name="description" content="Build CSS gradients visually with drag-and-drop controls. Supports linear, radial, and conic types. Copy production-ready code instantly. Free, no signup needed." /> The description is 156 characters, includes relevant keywords naturally (CSS gradients, linear, radial, conic, production-ready code), and tells the user exactly what they get. It ends with benefit statements (free, no signup) that address common objections. Each sentence is a standalone fact rather than a flowing paragraph, which works well in the compressed snippet format. If you do not provide a meta description, Google will automatically generate one by pulling text from your page that it considers relevant to the search query. These auto-generated snippets are sometimes acceptable but often pull random sentences that do not represent your page well. Writing your own description gives you control. Open Graph (OG) tags control how your page appears when shared on Facebook, LinkedIn, WhatsApp, Discord, Slack, iMessage, Telegram, and many other platforms that support the Open Graph protocol (which is nearly all of them). The essential OG tags are: <meta property="og:title" content="CSS Gradient Generator" /> <meta property="og:description" content="Build CSS gradients visually. Linear, radial, conic types. Copy code instantly." /> <meta property="og:image" content="https://example.com/images/gradient-tool-og.png" /> <meta property="og:url" content="https://example.com/tools/css-gradient" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="WebRecast" /> The og:title can differ from your HTML title tag. The HTML title is optimized for search results (including keywords and brand name). The og:title is optimized for social feeds (shorter, punchier, without the brand suffix since og:site_name handles that). For example, your HTML title might be "CSS Gradient Generator - Free Visual Editor | WebRecast" while your og:title is just "CSS Gradient Generator - Free Visual Editor." The og:image tag has the biggest impact on social engagement. Posts with images get 2-3 times more engagement than text-only posts across all social platforms. The recommended image dimensions are 1200x630 pixels at a 1.91:1 aspect ratio. This is the size Facebook and LinkedIn use for their large link preview cards. Smaller images (below 600x315 for Facebook) trigger a smaller, less prominent preview format. The image URL must be an absolute URL starting with https://, not a relative path. Images should be JPEG or PNG format and under 5MB (ideally under 1MB for fast loading). Twitter Card tags serve a similar purpose for Twitter/X. While Twitter falls back to OG tags when Twitter-specific tags are absent, specifying both gives you full control over each platform's display: <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="CSS Gradient Generator" /> <meta name="twitter:description" content="Build CSS gradients visually. Copy code instantly." /> <meta name="twitter:image" content="https://example.com/images/gradient-tool-twitter.png" /> <meta name="twitter:site" content="@webrecast" /> The twitter:card type "summary_large_image" produces a large banner image above the text, which is the format that gets the most engagement for content pages. The "summary" type shows a small square thumbnail beside the text. Always use summary_large_image unless you have a specific reason not to. The meta keywords tag is obsolete. Google officially confirmed in 2009 that it does not use meta keywords as a ranking signal. Bing has stated it uses them as a spam signal (pages with excessive keywords may be penalized rather than rewarded). No major search engine gives positive ranking weight to meta keywords. You can omit this tag entirely in modern SEO. Some developers include a few keywords out of habit, which is harmless but provides no benefit. The robots meta tag controls how search engines index and follow links on your page: <meta name="robots" content="index, follow" /> index, follow is the default behavior (pages are indexed and links are followed), so you only need this tag when you want to change the default. Common variations: noindex, follow: The page will not appear in search results, but search engines will follow links on the page and pass link equity to the linked pages. Use this for paginated pages, internal search results, or utility pages. index, nofollow: The page can appear in search results, but search engines will not follow any outgoing links. Rarely used. noindex, nofollow: The page will not appear in search results, and no links will be followed. Use this for admin pages, login pages, or truly private content. Additional directives include noarchive (do not show a cached version in search results), nosnippet (do not show any text snippet, only the title and URL), max-snippet:150 (limit the snippet to 150 characters), max-image-preview:large (allow large image previews in search results), and max-video-preview:30 (allow up to 30 seconds of video preview). The canonical tag prevents duplicate content issues by telling search engines which version of a page is the authoritative source: <link rel="canonical" href="https://example.com/tools/css-gradient" /> If the same content is accessible at multiple URLs (https://example.com/tools/css-gradient, https://www.example.com/tools/css-gradient, https://example.com/tools/css-gradient?utm_source=twitter, https://example.com/tools/css-gradient/), the canonical tag consolidates all ranking signals to one URL. Every page on your site should have a self-referencing canonical tag, even if there are no duplicates. This is a defensive best practice that prevents problems when duplicates are created accidentally (by URL parameters, affiliate links, or syndication). The viewport meta tag is essential for mobile responsiveness: <meta name="viewport" content="width=device-width, initial-scale=1" /> Without this tag, mobile browsers render the page at a desktop width (typically 980px) and scale it down to fit the screen, making text tiny and requiring users to zoom and scroll horizontally. This tag tells the browser to set the viewport width to the device width and start at 1x zoom. Google uses mobile-first indexing, meaning the mobile version of your page is what Google uses for ranking. A missing viewport tag causes your page to fail Google's mobile-friendliness test, which hurts your mobile search rankings. The charset declaration tells the browser which character encoding your page uses: <meta charset="UTF-8" /> UTF-8 is the universal standard for modern websites and supports virtually every language, emoji, and special character. This should be the very first tag in your head section, before any other tags or content, because the browser needs to know the encoding before it can correctly parse anything else. Here is a complete, production-ready meta tag block: <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CSS Gradient Generator - Free Visual Editor | WebRecast</title> <meta name="description" content="Build CSS gradients visually with drag-and-drop controls. Linear, radial, conic. Copy production-ready code. Free, no signup needed." /> <link rel="canonical" href="https://example.com/tools/css-gradient" /> <meta name="robots" content="index, follow" /> <meta property="og:title" content="CSS Gradient Generator - Free Visual Editor" /> <meta property="og:description" content="Build CSS gradients visually. Copy production-ready code instantly." /> <meta property="og:image" content="https://example.com/images/gradient-og.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:url" content="https://example.com/tools/css-gradient" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="WebRecast" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="CSS Gradient Generator" /> <meta name="twitter:description" content="Build CSS gradients visually. Copy code instantly." /> <meta name="twitter:image" content="https://example.com/images/gradient-twitter.png" /> <meta name="twitter:site" content="@webrecast" /> </head> This block covers search engine optimization (title, description, canonical, robots), social sharing on Facebook, LinkedIn, and WhatsApp (OG tags), social sharing on Twitter/X (Twitter Card tags), mobile responsiveness (viewport), and character encoding (charset). Every public page on your site should have an equivalent block with unique, page-specific content. Common mistakes in meta tag implementation: Duplicate titles and descriptions across pages. Every page must have unique meta tags. If your blog posts all have the title "My Blog | WebRecast," Google sees hundreds of identical results and cannot differentiate them. Each page's title should include the specific topic of that page. Descriptions that do not match page content. Google compares your meta description to the actual page content. If they do not match, Google will ignore your description and generate its own from the page content. Write descriptions that accurately summarize what is actually on the page. Images too small for OG tags. An og:image smaller than 200x200 pixels may not display at all on Facebook. Images smaller than 600x315 appear as tiny thumbnails instead of the full-width preview card. Always use 1200x630. Missing og:image:width and og:image:height. Without these tags, platforms must download the full image to determine its dimensions before rendering the preview, which causes a delay. Specifying dimensions lets platforms render the preview layout immediately. For single-page applications built with React, Vue, or Angular, meta tags require extra attention. Search engine crawlers and social media scrapers may not execute JavaScript, so they see only the meta tags present in your static index.html, not the tags set dynamically by your JavaScript framework. Solutions include server-side rendering (Next.js for React, Nuxt for Vue, Angular Universal), static site generation, or a prerendering service like Prerender.io that detects crawler user agents and serves fully rendered HTML. React apps commonly use react-helmet-async to manage meta tags declaratively: import { Helmet } from 'react-helmet-async'; function ToolPage({ tool }) { return ( <> <Helmet> <title>{tool.title} | WebRecast</title> <meta name="description" content={tool.description} /> <meta property="og:title" content={tool.title} /> <meta property="og:description" content={tool.description} /> <meta property="og:image" content={tool.ogImage} /> <link rel="canonical" href={`https://webrecast.com/${tool.slug}`} /> </Helmet> <main>{/* page content */}</main> </> ); } This updates the document head when the component mounts and removes the tags when it unmounts. For crawlers that do execute JavaScript (Googlebot does, but not reliably for all pages), this works. For crawlers that do not (Facebook's scraper, Twitter's card validator), you need SSR or prerendering. Structured data (JSON-LD) complements meta tags by providing machine-readable information about your page content to search engines. While meta tags control how your page appears in standard search results and social shares, structured data enables rich results like FAQ accordions, How-To steps, breadcrumbs, product ratings, and recipe cards directly in Google search results. A complete SEO meta setup includes traditional meta tags, OG tags, Twitter Card tags, and relevant JSON-LD structured data. Meta tag auditing should be part of your regular SEO maintenance. Use Google Search Console's "Page Experience" and "Search Appearance" reports to identify pages with missing or problematic meta tags. Third-party tools like Screaming Frog, Ahrefs Site Audit, and Sitebulb can crawl your entire site and flag pages with duplicate titles, missing descriptions, truncated titles, missing OG images, and other meta tag issues. Run these audits monthly for active sites and quarterly for stable ones. For e-commerce sites, product page meta tags deserve extra attention. Each product should have a unique title that includes the product name, key attribute (color, size, model), and brand. The description should mention the price, availability, and a compelling benefit. OG tags should use the product's hero image at 1200x630 pixels. Product schema markup (JSON-LD type Product) adds price, availability, and review data to search results. This combination of meta tags, OG tags, and structured data maximizes visibility in both organic search and social sharing. Internationalization of meta tags requires hreflang annotations in addition to language-specific titles and descriptions: <link rel="alternate" hreflang="en" href="https://example.com/en/tool" /> <link rel="alternate" hreflang="tr" href="https://example.com/tr/arac" /> <link rel="alternate" hreflang="de" href="https://example.com/de/werkzeug" /> <link rel="alternate" hreflang="x-default" href="https://example.com/en/tool" /> Hreflang tags tell Google which language version to show to users based on their language and location. Each page should have hreflang annotations for all its language variants. Missing hreflang tags cause Google to treat each language version as a separate, competing page rather than localized versions of the same content. Meta tag templates save time for sites with many pages. Create a template for each page type (blog post, product page, tool page, landing page) with placeholder variables for the dynamic parts: Blog post template: <title>{Post Title} | {Brand Name}</title> <meta name="description" content="{Post excerpt, 150-160 chars}" /> <meta property="og:title" content="{Post Title}" /> <meta property="og:description" content="{Short excerpt, 100 chars}" /> <meta property="og:image" content="{Post hero image URL, 1200x630}" /> <meta property="og:type" content="article" /> Having these templates documented ensures consistency across your content team. Writers can fill in the variables for each new post, and the meta tag generator helps verify that the filled-in values meet length requirements and display correctly. Testing meta tags should be part of your CI/CD pipeline for larger projects. Automated tests can verify that every page has a unique title, that no description exceeds 160 characters, that every page has og:image defined, and that og:image URLs return 200 status codes. Tools like Playwright and Cypress can render pages and extract meta tag values for assertion: test('product page has correct meta tags', async ({ page }) => { await page.goto('/products/blue-shirt'); const title = await page.title(); expect(title.length).toBeLessThanOrEqual(60); expect(title).toContain('Blue Shirt'); const ogImage = await page.getAttribute('meta[property="og:image"]', 'content'); expect(ogImage).toMatch(/^https:\/\//); }); Automated meta tag testing catches regressions before they reach production. A developer changing a page template might accidentally remove or overwrite OG tags. The test catches this in the pull request stage. Meta tag generation for dynamic content (like search results pages, filtered category pages, or user-generated pages) requires programmatic templates. Instead of manually writing tags for each variation, create a function that generates tags from structured data: function generateMetaTags(page) { return { title: truncate(page.title + ' | WebRecast', 60), description: truncate(page.excerpt || page.autoDescription, 160), ogTitle: truncate(page.title, 55), ogDescription: truncate(page.excerpt || page.autoDescription, 100), ogImage: page.heroImage || defaultOgImage, canonical: baseUrl + page.slug, }; } This programmatic approach ensures every page gets well-formed meta tags even when you have thousands of pages generated from a database. Performance considerations for meta tags are minimal but worth noting. Meta tags are parsed before the page body renders, so they should be lightweight and not include inline scripts or complex attribute values. The total size of your head section (including all meta tags, link tags, and script tags) affects Time to First Byte indirectly because it is part of the initial HTML payload. Keep your head section clean and avoid duplicating tags through framework rendering issues. React apps with react-helmet can accidentally render duplicate meta tags if the same tag is set in both a parent and child component without proper deduplication. For WordPress sites, popular SEO plugins like Yoast SEO, Rank Math, and All in One SEO generate meta tags automatically based on your post content. However, understanding what these plugins do under the hood helps you troubleshoot issues when tags do not appear correctly. The meta tag generator gives you the foundational knowledge to audit plugin output. If Yoast generates a title that looks wrong, you know the expected format and can override it. If your OG image is not displaying on Facebook, you know to check the og:image tag specifically and use Facebook's Sharing Debugger to diagnose the issue. The meta tag generator creates all of these tags from a simple form interface. Enter your page title, description, URL, and image URL, and the tool generates the complete HTML block with standard meta tags, Open Graph tags, and Twitter Card tags. The live character counter warns you when your title exceeds 60 characters or your description exceeds 160 characters. The Google SERP preview shows you exactly how your page will appear in search results, with accurate truncation behavior, so you can refine your title and description until they look right. Generate your meta tags, copy the HTML, and paste it into your page head. Every page deserves properly crafted meta tags, and this tool makes creating them fast and reliable.

Frequently asked questions

Why are meta tags important?

Meta tags tell search engines and social platforms what your page is about. Better tags improve visibility.

What length should my title be?

Keep titles under 60 characters and descriptions under 160 characters for best results in search results.