Meta Tag Generator - Create SEO Meta Tags Free

Generate HTML meta tags for SEO instantly - title, description, canonical, robots, Open Graph. Free, no sign-up, runs in your browser.

HTML <head> tags
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">

Get Your SEO Meta Tags in Seconds

Fill in your page details above and this meta tag generator instantly writes the HTML snippet you paste into your <head>. No copying from docs, no guessing character limits - just ready-to-use tags.

Every tag follows current best practices: title under 60 characters, description under 155, a canonical URL, a robots directive, and a mobile-ready viewport - all in one go.

How to Use the Meta Tag Generator

  1. Enter your page title - keep it under 60 characters so Google shows the full text.
  2. Write a meta description - aim for 120-155 characters. Make it a mini ad for your page.
  3. Set the robots value - index, follow is correct for most pages. Use noindex on thank-you pages, login screens, or duplicate content.
  4. Add your canonical URL - the full address (with https://) of the definitive version of this page.
  5. Choose your Open Graph type - website for homepages, article for blog posts.
  6. Click Generate - copy the output and paste it inside the <head> of your HTML file.

Worked Example: A Product Landing Page

Say you are building a landing page for a project management app. Here is what you might enter:

FieldValue you enter
TitleTaskFlow - Project Management for Small Teams
DescriptionManage tasks, deadlines, and team workload in one place. Free 14-day trial. No credit card needed.
Robotsindex, follow
Canonical URLhttps://taskflow.example.com/
OG Typewebsite

The tool generates this snippet (ready to copy into <head>):

<!-- Paste everything below inside your <head> tag -->
<title>TaskFlow - Project Management for Small Teams</title>
<meta name='description' content='Manage tasks, deadlines, and team workload in one place. Free 14-day trial. No credit card needed.' />
<meta name='robots' content='index, follow' />
<link rel='canonical' href='https://taskflow.example.com/' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta property='og:title' content='TaskFlow - Project Management for Small Teams' />
<meta property='og:description' content='Manage tasks, deadlines, and team workload in one place. Free 14-day trial. No credit card needed.' />
<meta property='og:url' content='https://taskflow.example.com/' />
<meta property='og:type' content='website' />

That nine-line snippet covers search engines and social sharing previews in one paste.

Key Tags at a Glance

Here is what each generated tag does and the limits that matter:

TagWhat it doesLimit to watch
<title>The blue headline in Google results≤ 60 characters
meta descriptionThe grey summary snippet below the title≤ 155 characters
robotsTells crawlers whether to index and follow linksUse exact values: index, follow or noindex, nofollow
canonicalPoints to the preferred URL to avoid duplicate contentMust be an absolute URL with https://
viewportMakes the page scale correctly on phones and tabletsAlmost always width=device-width, initial-scale=1
og:title / og:descriptionControls how the link looks when shared on social mediaSame length guidelines as title and description

How to Add Meta Tags in Code (Without a Generator)

If you prefer to write them by hand, here is the minimum you need for any web page.

HTML (plain file) - place this inside your <head> block:

<head>
  <meta charset='UTF-8' />
  <title>Your Page Title Here</title>
  <meta name='description' content='Your page description here.' />
  <meta name='robots' content='index, follow' />
  <link rel='canonical' href='https://yourdomain.com/page/' />
  <meta name='viewport' content='width=device-width, initial-scale=1' />
</head>

Python (Flask example) - inject meta tags into a Jinja2 template:

# In your Flask route:
@app.route('/product')
def product():
    seo = {
        'title': 'TaskFlow - Project Management for Small Teams',
        'description': 'Manage tasks, deadlines, and team workload in one place.',
        'canonical': 'https://taskflow.example.com/'
    }
    return render_template('product.html', seo=seo)

# In product.html (inside <head>):
# <title>{{ seo.title }}</title>
# <meta name='description' content='{{ seo.description }}' />
# <link rel='canonical' href='{{ seo.canonical }}' />

JavaScript (Next.js App Router) - export a metadata object from your page file:

// app/product/page.js
export const metadata = {
  title: 'TaskFlow - Project Management for Small Teams',
  description: 'Manage tasks, deadlines, and team workload in one place.',
  alternates: {
    canonical: 'https://taskflow.example.com/'
  },
  robots: 'index, follow'
};

Next.js writes the <head> tags automatically from that object - no manual HTML needed.

How the Generator Works

Everything runs in your browser. You type into the form fields, and the tool assembles a valid HTML snippet on the fly using JavaScript - nothing is sent to any server. Your page details stay completely private.

The character counters are updated live so you can see when you cross the 60-character title limit or the 155-character description limit. The output always includes a viewport tag because Google requires it for mobile-friendly status (see the Google mobile-first indexing docs).

Open Graph tags are built in by default because Facebook, LinkedIn, and Slack all use them to generate link previews. The Open Graph Protocol defines the standard for those og: properties.

When to Use This Tool (and When Not To)

Use it when:

  • You are building or launching a new page and want correct tags without looking anything up.
  • You are doing an SEO audit and need to check or recreate missing tags for individual pages.
  • You hand the snippet to a developer or a CMS and they paste it in directly.
  • You want a quick sanity check on character counts before publishing.

You may not need it when:

  • Your CMS (WordPress with Yoast, Shopify, Webflow) already generates meta tags automatically - check first to avoid duplicates.
  • You are generating tags programmatically for hundreds of pages at once - a template or CMS plugin scales better than per-page generation.
  • You need structured data markup (schema.org JSON-LD) - that is a separate addition on top of these tags, not a replacement.

Your SEO Head Tags - One Quick Snippet

Here is a clean, copy-pasteable example of everything a well-optimised page head needs. Paste it inside your <head> tag, then swap in your own values:

<!-- SEO meta tags - paste inside <head> -->
<title>TaskFlow - Project Management for Teams</title>
<!-- title: keep to 60 chars so Google shows the full text -->

<meta name='description' content='Manage tasks and deadlines in one place. Free 14-day trial.' />
<!-- description: 120-155 chars; this is what searchers read before clicking -->

<meta name='robots' content='index, follow' />
<!-- robots: tells Google to index this page and follow its links -->

<link rel='canonical' href='https://taskflow.example.com/' />
<!-- canonical: the definitive URL; prevents duplicate-content issues -->

<meta name='viewport' content='width=device-width, initial-scale=1' />
<!-- viewport: required for mobile-friendly status in Google Search -->

The generator above builds this snippet for you automatically - just fill in the form and click Generate.

Getting your HTML meta tags right is one of the fastest, lowest-effort SEO wins available - start with the form at the top of the page and you will have a complete snippet in under a minute.

Frequently asked questions

Is the meta tag generator free? Do I need to sign up?+
Completely free, no account required. Fill in the form and copy your tags - that is all.
Does this tool upload my data anywhere?+
No. Everything runs in your browser using JavaScript. Your page title, description, and URL never leave your device and are not stored anywhere.
What is the difference between a meta description and an OG description?+
The meta description tag is what Google shows in search results. The og:description tag is what Facebook, LinkedIn, and Slack show when someone shares your link. They often have the same text, but you can write them differently - a search snippet and a social teaser serve slightly different audiences.
Will adding meta tags automatically improve my Google ranking?+
The meta description is not a direct ranking factor - it does not push you higher in results. But a well-written description improves your click-through rate, which sends a positive signal over time. The title tag and canonical URL do influence ranking, so getting those right matters.
What should I set the robots meta tag to?+
Use index, follow for any page you want Google to find and rank. Use noindex, follow for pages like login screens, admin areas, or duplicate content you want crawlers to ignore. Use noindex, nofollow to block both indexing and link-following completely.
My CMS already has an SEO plugin. Do I still need this?+
If your CMS (WordPress + Yoast, Shopify, Webflow) generates meta tags automatically, you probably do not need to add them manually - doing so could create duplicates. Use this tool to preview or draft your tags before entering them into the CMS fields, or for pages your CMS does not manage.
How do I add meta tags in WordPress without a plugin?+
Open your theme's functions.php and use the wp_head action hook to output the tags. Most people find it easier to use a plugin like Yoast SEO or Rank Math instead - they give you per-page fields without editing theme files.
What is a canonical URL and do I always need one?+
A canonical URL (<link rel='canonical'>) tells Google which version of a page is the 'real' one when the same content is accessible at multiple URLs (for example http vs https, or with and without a trailing slash). It is best practice to include one on every page, even if you do not have obvious duplicates - it removes any ambiguity for search crawlers.