Meta Tag Generator: Create SEO Meta Tags

What Is Meta Tag Generator?

I reach for this whenever I'm shipping a new page and want to see how it'll actually look in Google, on Facebook, and on Twitter before I push it live. The tool produces the full HTML meta tag block (basic SEO, Open Graph, Twitter Card) and renders pixel-accurate previews of each platform side by side. Fill in the Input tab, copy from Output, sanity-check on Preview.

Key Features

The tool generates three blocks of tags from one set of inputs. The Basic SEO block covers <meta name="title">, <meta name="description">, <meta name="keywords">, <meta name="author">, <meta name="robots">, and <link rel="canonical">. The Open Graph block covers og:title, og:description, og:type, og:url, og:image, og:site_name, and og:locale, with type options for website, article, product, video, and music. The Twitter Card block covers twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, and twitter:image, supporting both Summary and Summary Large Image cards.

Character counters guide you toward the right lengths. Title shows current/60 and turns green in the 30–60 range, yellow under 30, red over 60. Description uses the same scheme with a 120–160 target. Three live previews update as you type: a Google SERP preview using the actual link blue (#1a0dab), URL green (#006621), and description gray (#545454); a Facebook preview rendering the 1.91:1 image card with the OG image you provide; and a Twitter card preview that switches between Summary and Summary Large Image based on your card type setting.

The Robots dropdown offers the four standard directive combinations: index, follow (default), index, nofollow, noindex, follow, and noindex, nofollow. The Output tab splits Basic, Open Graph, and Twitter into separate sections with individual copy buttons, plus a Copy All for the combined block.

How to Use Meta Tag Generator

Step 1: Fill In the Input Tab

Open the Coming Soon: Meta Tag Generator. The tool opens on the Input tab, which has three sections.

Basic SEO section:

• Title: Your page title. The character counter updates in real time. Keep it between 30–60 characters (shown in green) to avoid truncation in search results. Example: TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole (53 characters, green).
• Description: Your meta description. Target 120–160 characters (green range) for full display in search results. Example: TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75. (137 characters, green).
• Keywords: Comma-separated keywords. Modern search engines largely ignore this tag, but it does not hurt to include it. Example: hiking boots, trail running, waterproof boots, vibram outsole.
• Author: Optional author name.
• Robots: Choose from the four robots directive combinations. Leave as index, follow for public content. Use noindex, nofollow for private pages, admin areas, or duplicate content you do not want indexed.
• Canonical URL: The preferred URL for this page. Enter the full absolute URL (e.g., https://example.com/products/trailmaster-pro).

Step 2: Configure Open Graph Tags

Scroll to the Open Graph section:

• OG Type: Select "website" for homepages and general pages, "article" for blog posts, "product" for e-commerce pages.
• OG Site Name: Your site's display name (e.g., "TrailMaster Outdoor Gear").
• OG Image: The full URL of the social sharing image. Facebook recommends 1200×630 pixels. If you provide a URL pointing to a reachable image, the Facebook preview in the Preview tab renders the actual image.
• OG URL: The canonical URL for Open Graph, typically the same as your canonical URL.

Step 3: Configure Twitter Card Tags

Scroll to the Twitter Cards section:

• Twitter Card Type: "Summary" shows a small square thumbnail. "Summary Large Image" shows a large 2:1 aspect ratio image, the better choice for most content with visual assets.
• Twitter Site: The Twitter/X username of the site (e.g., @trailmaster).
• Twitter Creator: The Twitter/X username of the content author.

Step 4: Review the Output Tab

Click the Output tab. Three sections show the generated tags:

Basic tags example:

<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />

Open Graph tags example:

<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />

Click Copy All to get the complete tag block for pasting into your <head>.

Step 5: Verify in the Preview Tab

Switch to the Preview tab. Three live previews render simultaneously:

• Google SERP preview: Shows the title in blue, canonical URL in green, and description truncated to two lines in gray. This matches Google's desktop search result format. If your title exceeds 60 characters, it visually truncates here, a clear prompt to shorten it.
• Facebook card preview: Shows the OG image (if provided and loadable), site domain in uppercase, title in bold, and description.
• Twitter card preview: Shows the twitter:card format (Small or Large Image), the URL domain, title, and description. The preview image comes from twitterImage if set, falling back to ogImage.

Practical Examples

Example 1: Blog Post

For a blog post titled "10 Best Hikes in the Scottish Highlands":

• Title: 10 Best Hikes in the Scottish Highlands - Complete Guide (53 chars, green)
• Description: The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included. (143 chars, green)
• OG Type: article
• Robots: index, follow

The SERP preview confirms the title fits without truncation and the description fills the two available lines.

Example 2: E-commerce Product Page

For a product page, the OG type is set to "product" and an image URL is provided. The Facebook preview renders the product image at 1.91:1 ratio with the site name, product title, and description. The Twitter Large Image card shows the same image at 2:1 cropping.

Example 3: Private Staging Page

For a staging environment page not ready for indexing, set Robots to noindex, nofollow. The generated output includes <meta name="robots" content="noindex, nofollow" />, telling search engine crawlers not to index or follow links on this page even if they discover it.

Tips and Best Practices

• Match OG URL and canonical URL: Use the same absolute URL for both og:url and the canonical <link> tag. Mismatches can cause social sharing to reference the wrong URL.
• Title length matters for truncation: Google truncates titles that render wider than approximately 600px in desktop results. The 30–60 character target in the tool is a reliable proxy for this; green means you are within safe bounds.
• OG image dimensions: The tool generates the og:image tag for any URL you provide but does not validate image dimensions. Use a 1200×630 pixel image for Facebook and a 1200×600 image for Twitter Large Image cards.
• twitter:image falls back to og:image: In the Preview tab, the Twitter card uses your twitter:image if provided, otherwise it uses og:image. You only need to set a separate twitter:image if you want different social images per platform.
• Keywords meta tag: The <meta name="keywords"> tag is generated but is largely ignored by Google and Bing since 2009. Include it for completeness but do not invest time optimizing it.

Common Issues and Troubleshooting

Title counter shows red but description is fine: Title is over 60 characters. Shorten it or move detail to the description. The title counter shows current/60 (long) in red as a clear indicator.

Description counter shows yellow: Description is under 120 characters. Google may substitute its own description snippet from your page content. Add 20–40 more characters of relevant content.

OG image not showing in Facebook preview: The preview tab loads the actual image URL in an <img> tag. If the URL is not publicly reachable from your browser (e.g., a local development URL), the image area shows "No image" placeholder text. The tag is still generated correctly in the output.

Twitter preview shows only a small card even with a large image: The Twitter card type is set to "Summary" instead of "Summary Large Image." Change the Twitter Card Type dropdown to "Summary Large Image" to see the 2:1 aspect ratio preview.

Generated tags appear empty in the Output tab: Fill in at least the title and description in the Input tab. The output only includes non-empty fields; an empty title field produces no title tag.

Privacy and Security

Meta Tag Generator runs entirely in your browser. Tag generation uses React's useMemo hook to compute output reactively from your input, with no server round-trip. If you provide an OG image URL, the Preview tab loads that image directly from the source URL with no proxy. Supporter members can save and restore named presets using local IndexedDB storage.

Frequently Asked Questions

What are the optimal character lengths for title and description? The tool uses 30–60 characters for title (green range) and 120–160 characters for description (green range). These match the typical rendered pixel width limits Google uses for SERP snippets. Titles below 30 characters (yellow) may be considered thin; above 60 (red) may be truncated. Descriptions below 120 (yellow) may cause Google to use its own excerpt; above 160 (red) will be truncated.

Does the tool generate all Open Graph properties? The tool generates the core OG tags: og:type, og:url, og:title, og:description, og:image, og:site_name, and og:locale. It does not generate article-specific tags like article:published_time or product-specific tags like product:price. For those, add them manually after copying the generated output.

What OG locale values are available? The default OG locale is en_US. The locale field is a text input where you can type any valid locale code (e.g., fr_FR, de_DE, ja_JP). The tool does not restrict this field to a dropdown.

What Twitter Card types does the tool support? The tool generates summary (small square thumbnail, title, description, and site name) and summary_large_image (full-width 2:1 image with title, description, and site name). It does not support the deprecated app and player card types.

Can I copy just the Open Graph tags without the basic SEO tags? Yes. The Output tab shows three separate sections (Basic, Open Graph, Twitter) each with its own copy button. Click the copy button on the Open Graph section to copy only those tags. Use "Copy All" to get everything combined.

How do I add the generated tags to my site? Paste the copied tags inside the <head> section of your HTML. If you use a CMS like WordPress, Shopify, or Webflow, paste them into the custom <head> code field in your theme settings or use an SEO plugin that accepts custom meta tags. For frameworks like Next.js, paste into the <Head> component or use the metadata API.

Related Tools

• Coming Soon: Page SEO Analyzer: Audit an existing live page's current meta tags, heading structure, and on-page SEO signals to identify gaps your new meta tags should address.
• Coming Soon: SERP Preview: Dedicated SERP preview tool for fine-tuning title and description display before and after updating your meta tags.
• Coming Soon: Schema Generator: Add structured data markup alongside your meta tags to enable rich results in Google Search for articles, products, events, and more.

Try Meta Tag Generator now: Coming Soon: Glyph Widgets Meta Tag Generator