Meta Tag Generator

Site Title
Site Description
Site Keywords (Separate with commas)
Allow robots to index your website?
Allow robots to follow all links?
What type of content will your site display?
What is your site primary language?
(Optional Meta Tags)

Search engines should revisit this page after     days.


Author:



About Meta Tag Generator

A more complete meta-tag builder that also includes Open Graph, Twitter Cards, and viewport settings – essential for social sharing and mobile ranking.
Real-world scenario: Your articles look plain when shared on Facebook, showing just a URL. You generate an OG-title, OG-description, and OG-image tag, insert them, and now every share pulls a beautiful image and description. Social click-through rate jumps 3×.
How to use it:

    Fill in all the relevant fields (Title, Description, Keywords, OG tags, Twitter tags, etc.).

    Click “Generate Meta Tags”.

    Copy the full block of code.

    Paste inside the <head> section of your page.

    Validate using Facebook Sharing Debugger or Twitter Card Validator.

FAQ

Q: What is this Meta Tag Generator, and how is it different from the one on seotools.seowolf.org?
A: This version goes beyond basic search‑engine meta tags. It also generates Open Graph (Facebook, LinkedIn) and Twitter Card tags, plus a viewport meta tag for mobile responsiveness. The seotools version is a quick, simple generator for title/description/keywords only. Use this one when you want complete social‑sharing control and mobile optimisation in one snippet.

Q: Why do I need Open Graph and Twitter Card tags?
A: They control exactly how your page looks when shared on social media – the title, description, image, and even video preview. Without them, social networks guess, often pulling a generic image or truncated text. Good OG/Twitter tags increase click‑through rates from social posts and make your brand look professional.

Q: Is the meta keywords tag still important for SEO?
A: No. Major search engines (Google, Bing) have not used the meta keywords tag for ranking in over a decade. Filling it is harmless, but you can safely skip it. Focus on the title, description, and Open Graph fields.

Q: What is the ideal length for a meta title and description?
A:

  • Title: Keep it under 60 characters (or roughly 580‑600 pixels) to avoid truncation in search results. Include your primary keyword near the front.

  • Description: Aim for 150‑160 characters. Write a compelling, concise summary that includes the keyword once. Google shows this snippet roughly 30% of the time; when it does, a good description lifts click‑through rate.

Q: Do I really need to fill every field in the generator?
A: No. The must‑fills are:

  • Meta Title

  • Meta Description

  • OG Title (can be same as Meta Title)

  • OG Description

  • OG Image (must be an absolute URL to a ≥1200×630px image)

  • Twitter Card type (summary_large_image is best for articles with a hero image)

Optionally add the viewport if your template doesn’t already have it, and ignore keywords if you’re short on time.

Q: Where do I put the generated meta tags?
A: Inside the <head> section of your HTML page, before any <style> or <script> tags. If you use a CMS like WordPress, paste them into your theme’s header.php file, or (better) use an SEO plugin’s custom meta field. If you paste directly, ensure they appear after the <title> tag.

Q: How can I test if my OG and Twitter tags are working?
A: Use Facebook’s Sharing Debugger (developers.facebook.com/tools/debug) and Twitter’s Card Validator (cards-dev.twitter.com/validator). Paste your page URL, and they will show you exactly how the card will look, plus any errors in your tags.

Q: Can I use the same image for OG and Twitter?
A: Yes, and you should. Use the same high‑quality image for og:image and twitter:image. Twitter will fall back to OG tags if Twitter‑specific tags are missing, but providing both guarantees the best display on both networks.

Q: What does “Meta Viewport” do, and should I include it?
A: The viewport meta tag tells mobile browsers how to scale the page. The standard responsive‑design line is:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If your site is mobile‑friendly, you almost certainly already have it. If you’re building a page from scratch and it lacks this tag, check the box to generate it – missing it can cause Google’s mobile‑friendliness test to fail.

Detailed How‑to Guide

Before You Start

Prepare these assets for the page you’re optimising:

  • Primary keyword you want to rank for.

  • Compelling headline (under 60 chars) incorporating that keyword.

  • Persuasive description (150‑160 chars) summarising the page’s value.

  • An absolute image URL for social sharing (e.g., https://www.yourdomain.com/images/social-share.jpg). The image should be at least 1200×630 pixels and in JPG or PNG format.

  • Canonical page URL (the “clean” version you want shared, e.g., without UTM parameters).

Step 1: Open the Tool

Go to https://webmastertools.seowolf.org/meta-tag-generator. You’ll see a form with two main sections: Standard Meta Tags and Open Graph / Social Tags.

Step 2: Fill the Standard Meta Tags Section

  • Title
    Enter your page title exactly as you want it to appear in search results. Example:
    How to Brew Cold Brew Coffee | Your Brand
    Keep it under 60 characters. Include the primary keyword near the start.

  • Description
    Write a unique description for this page. Example:
    Learn the perfect cold brew coffee ratio and steeping time. Our easy guide yields smooth, low‑acid coffee every time. No fancy gear needed.
    Keep it to 150‑160 characters. Make it a call‑to‑action, not a keyword list.

  • Keywords
    (Optional) Enter 3‑5 relevant phrases separated by commas. Example: cold brew coffee, how to make cold brew, cold brew ratio. This won’t help rankings but can assist with internal site search tools.

  • Author
    (Optional) Your name or company.

Step 3: Fill the Open Graph (OG) Section

This controls how your page looks when shared on Facebook, LinkedIn, Slack, and other platforms.

  • OG Title
    Use the same as your Meta Title, or a slightly shorter version. Keep under 60 chars. Example: How to Brew Cold Brew Coffee

  • OG Description
    Identical to your Meta Description (150‑160 chars). If you want a slightly more social‑forward version, you can tweak it, but consistency is fine.

  • OG Image
    Paste the full URL of your image. Must be https:// not a relative path.
    Example: https://www.yourdomain.com/images/cold-brew-social.jpg
    Check that the image is accessible and not blocked.

  • OG URL
    Enter the canonical URL of the page (the one you want to be the primary share link).
    Example: https://www.yourdomain.com/recipes/cold-brew-coffee

  • OG Type
    Select the content type. For a blog post or article, choose article. For a standard website page, use website. For a product, use product. The generator likely offers a dropdown with common types.

  • OG Site Name
    Your brand or site name, e.g., Your Brand. Often this is already set globally via a plugin; adding it here per‑page doesn’t hurt.

  • OG Locale (if available)
    Set to your language/region, e.g., en_US. Usually left at default.

Step 4: Fill the Twitter Card Section

Twitter often falls back on OG tags, but providing them specifically ensures the layout you want.

  • Twitter Card
    Select summary_large_image if your page has a prominent hero image. Use summary if there’s only a small thumbnail. For blogs with featured images, always choose summary_large_image.

  • Twitter Title
    Same as Meta Title (up to 70 chars, but keeping it similar to OG Title is safest).

  • Twitter Description
    Same as Meta Description (under 200 chars, but keeping it identical to OG Description works perfectly).

  • Twitter Image
    Same full URL as OG Image. Twitter prefers a 2:1 aspect ratio for summary_large_image and a 1:1 for summary.

  • Twitter Site / Creator (if available)
    Enter your brand’s Twitter handle with the @ (e.g., @YourBrand). This adds attribution in the tweet.

Step 5: Optional – Meta Viewport

Check the box or leave pre‑filled:
width=device-width, initial-scale=1.0
If you know your site already has this in its <head>, you can skip it to avoid duplication. If you’re building a page from scratch, definitely include it.

Step 6: Generate the Code

Click the “Generate Meta Tags” button. The tool will output a complete HTML snippet that looks similar to:

html
<!-- Standard Meta Tags -->
<title>How to Brew Cold Brew Coffee | Your Brand</title>
<meta name="description" content="Learn the perfect...">
<meta name="keywords" content="cold brew coffee, how to make cold brew, cold brew ratio">
<meta name="author" content="Your Name">

<!-- Open Graph Tags -->
<meta property="og:title" content="How to Brew Cold Brew Coffee">
<meta property="og:description" content="Learn the perfect...">
<meta property="og:image" content="https://www.yourdomain.com/images/cold-brew-social.jpg">
<meta property="og:url" content="https://www.yourdomain.com/recipes/cold-brew-coffee">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Brand">

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Brew Cold Brew Coffee">
<meta name="twitter:description" content="Learn the perfect...">
<meta name="twitter:image" content="https://www.yourdomain.com/images/cold-brew-social.jpg">

<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Copy the entire block.

Step 7: Insert into Your Page

For HTML websites / custom CMS:

  1. Open the HTML file of your page.

  2. Locate the opening <head> tag.

  3. Paste the generated meta tags immediately after the <title> tag (or after the existing title if you already have one – but note you’ll now have two <title> tags, which is invalid. Remove any previously hard‑coded title if you’re adding a new one. Keep only one <title> tag per page).

  4. Save and upload.

For WordPress (without a plugin):

  1. Go to Appearance → Theme Editor → Header (header.php).

  2. Find the </head> closing tag.

  3. Paste the generated code just before </head>.

  4. Important: If your theme already outputs a dynamic title (e.g., <title><?php wp_title(); ?></title>), do NOT add another static <title> tag. You must remove the <title> line from the generated code if your theme already handles the title. Alternatively, use an SEO plugin’s dedicated meta fields for a cleaner solution.

For WordPress with Yoast/RankMath:
You don’t need the raw HTML. Instead, use these plugins’ social meta boxes. But for a quick fix or a landing page that bypasses the plugin, you can paste the snippet into the page’s custom head code area (if your theme supports it) or into a plugin like “Insert Headers and Footers”.

Step 8: Validate and Debug

  1. Facebook Sharing Debugger
    Go to https://developers.facebook.com/tools/debug/, enter your page URL, and click “Debug”. It will show the OG tags it parsed and a preview. If the image doesn’t appear, check the URL is absolute and the file is publicly accessible. Click “Scrape Again” if you’ve updated tags.

  2. Twitter Card Validator
    Visit https://cards-dev.twitter.com/validator, input your URL, and click “Preview card”. Ensure the image shows and the card type matches your selection.

  3. In‑Browser Check
    Right‑click the page → “View Page Source” and search for og:. Verify every tag you need is present. Also check that only one <title> tag exists.

Step 9: Final SEO Alignment

  • Ensure your meta title matches the main heading (H1) in theme, though they can be slightly different (e.g., H1: “The Ultimate Guide to Cold Brew Coffee”, title tag: “How to Brew Cold Brew Coffee – Ultimate Guide”).

  • The meta description should closely reflect the first paragraph of visible content so users transitioning from SERP to page don’t feel misled.

  • Test the page with the Meta Tags Analyzer from the same webmastertools suite to double‑check everything appears correctly.

Ongoing Process

Each time you create a new page or blog post, run it through this generator. It ensures every page has a consistent, properly formatted set of meta tags that maximise click‑through from search and social. Bookmark the generator and make it part of your publishing checklist.

By following this guide, your pages will be fully armed for search engine display, social sharing, and mobile rendering – three pillars of modern on‑page SEO.

Also check out the Seowolf's Meta Tags Analyzer Tool



Recommended tools: Seowolf's Meta Tags Analyzer | Seowolf's LSI tool | Seowolf's Longtail tool | Seowolf's Keyword Density Checker


DigitalOcean