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
- Enter your page title - keep it under 60 characters so Google shows the full text.
- Write a meta description - aim for 120-155 characters. Make it a mini ad for your page.
- Set the robots value -
index, followis correct for most pages. Usenoindexon thank-you pages, login screens, or duplicate content. - Add your canonical URL - the full address (with
https://) of the definitive version of this page. - Choose your Open Graph type -
websitefor homepages,articlefor blog posts. - 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:
| Field | Value you enter |
|---|---|
| Title | TaskFlow - Project Management for Small Teams |
| Description | Manage tasks, deadlines, and team workload in one place. Free 14-day trial. No credit card needed. |
| Robots | index, follow |
| Canonical URL | https://taskflow.example.com/ |
| OG Type | website |
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:
| Tag | What it does | Limit to watch |
|---|---|---|
<title> | The blue headline in Google results | ≤ 60 characters |
meta description | The grey summary snippet below the title | ≤ 155 characters |
robots | Tells crawlers whether to index and follow links | Use exact values: index, follow or noindex, nofollow |
canonical | Points to the preferred URL to avoid duplicate content | Must be an absolute URL with https:// |
viewport | Makes the page scale correctly on phones and tablets | Almost always width=device-width, initial-scale=1 |
og:title / og:description | Controls how the link looks when shared on social media | Same 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.orgJSON-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.