Free SEO Meta Tag Generator

Generate title, description, canonical, robots, hreflang and Open Graph tags — live preview included, copy-ready HTML output.

Title0/60

Description0/160

Canonical URL

Keywords

Author

Page indexing

Allow indexingindexHide from search resultsnoindex

Link following

Follow links on this pagefollowDon't follow linksnofollow

Multilingual (hreflang)

My site has multiple language versions

Theme color

Browser UI color on mobile Chrome and Edge

Add dark mode color

Add comments in code

Google Search Preview

example.com/page-url

Page title

Page description will appear here.

<meta name="robots" content="index, follow">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">

How to generate meta tags

Enter your page Title (50–60 characters) and Description (120–160 characters) — the live Google snippet preview updates as you type.
Paste your page URL into the Canonical URL field to prevent duplicate content penalties.
Set the robots meta tag: leave as index, follow for all public pages. Use noindex for staging or private pages.
Enable Multilingual if your site has multiple language versions and add each language-URL pair for hreflang tags.
Click Copy code and paste the output into the head section of your HTML.

Essential SEO meta tags — what each one does

Not all meta tags are equal. Some directly affect rankings, others influence click-through rate, and some are purely technical. Here is the complete list with impact levels.

Tag	Purpose	Max length	SEO impact
`<title>`	Clickable headline in Google search results and browser tab	60 chars	Very high
`meta description`	Snippet text shown below the title in search results	160 chars	CTR (not ranking)
`rel="canonical"`	Signals preferred URL — prevents duplicate content issues	—	High
`meta robots`	Index/noindex and follow/nofollow crawler instructions	—	High (when set)
`meta viewport`	Mobile browser rendering — required for responsive sites	—	Required
`meta charset`	Character encoding declaration (always UTF-8)	—	Required
`meta author`	Page author — minor E-E-A-T signal	—	Low
`meta keywords`	Keywords — ignored by Google since 2009	—	None

Open Graph tags — social and messaging previews

Open Graph tags control the link preview shown when your page is shared on Slack, Discord, LinkedIn, Facebook, Telegram, and iMessage. Without them, these platforms guess the title and image — usually poorly.

Property	What it controls	Recommendation
`og:title`	Title shown in link preview cards	≤ 60 chars, can differ from <title>
`og:description`	Description shown in link preview cards	≤ 200 chars
`og:image`	Preview image — the single biggest visual impact	1200×630 px JPG or PNG
`og:url`	Canonical URL for the shared link	Full absolute URL
`og:type`	Content type	website for most pages, article for blog posts
`og:site_name`	Brand name shown below the preview	Your site or product name

Robots meta tag — all directives

The robots meta tag controls crawler behavior per page. Most pages need no customization — the defaults are index, follow.

Directive	What it does	When to use
`index` (default)	Allow page to appear in search results	All public pages
`noindex`	Remove page from search results	Admin, thank-you, staging, duplicate pages
`follow` (default)	Crawlers follow links on this page	All pages
`nofollow`	Crawlers ignore links on this page	Affiliate or heavily sponsored link pages
`noarchive`	Google won't show a cached version	Privacy-sensitive or frequently updated pages
`nosnippet`	No description snippet in search results	Paywalled or sensitive content

How to add meta tags in your framework

After generating your tags above, here is how to paste them into the most common web stacks.

Plain HTML

Paste directly inside <head> in your HTML file:

<!-- Paste into <head> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title — Brand Name</title>
<meta name="description" content="120–160 char description with a clear benefit.">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Page Title — Brand Name">
<meta property="og:description" content="120–160 char description with a clear benefit.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

React (Vite) — react-helmet-async

Install react-helmet-async, wrap your app in HelmetProvider, then use <Helmet> in each page component:

import { Helmet } from 'react-helmet-async'

export default function MyPage() {
  return (
    <>
      <Helmet>
        <title>Page Title — Brand Name</title>
        <meta name="description" content="120–160 char description." />
        <link rel="canonical" href="https://example.com/page" />
        <meta property="og:title" content="Page Title — Brand Name" />
        <meta property="og:description" content="120–160 char description." />
        <meta property="og:image" content="https://example.com/og-image.jpg" />
        <meta property="og:url" content="https://example.com/page" />
        <meta property="og:type" content="website" />
      </Helmet>
      {/* page content */}
    </>
  )
}

Next.js 13+ (App Router)

Export a metadata object from your page.js. Next.js renders all tags server-side — no extra library needed:

// app/my-page/page.js  (Next.js 13+ App Router)
export const metadata = {
  title: 'Page Title — Brand Name',
  description: '120–160 char description.',
  alternates: { canonical: 'https://example.com/page' },
  openGraph: {
    title: 'Page Title — Brand Name',
    description: '120–160 char description.',
    url: 'https://example.com/page',
    type: 'website',
    images: [{ url: 'https://example.com/og-image.jpg', width: 1200, height: 630 }],
  },
}

Vue 3 + Nuxt 3

Use the built-in useHead() composable inside <script setup>:

// pages/my-page.vue  (inside <script setup>)
useHead({
  title: 'Page Title — Brand Name',
  meta: [
    { name: 'description', content: '120–160 char description.' },
    { property: 'og:title', content: 'Page Title — Brand Name' },
    { property: 'og:description', content: '120–160 char description.' },
    { property: 'og:image', content: 'https://example.com/og-image.jpg' },
    { property: 'og:url', content: 'https://example.com/page' },
  ],
  link: [{ rel: 'canonical', href: 'https://example.com/page' }],
})

WordPress

Install Yoast SEO or Rank Math — both add a meta box below every post and page where you enter the SEO title, description, and Open Graph data. They handle canonical URLs, robots tags, and hreflang automatically. For finer control, add tags directly in your theme's header.php or use a header insertion plugin.

Frequently Asked Questions

What are HTML meta tags?

Meta tags are HTML elements placed in the <head> section of a page. They are not visible to users but tell search engines, browsers, and social platforms how to index, describe, and display your page. The most important are the title tag, meta description, canonical URL, and robots directive.

How long should a meta title and description be?

Title: 50–60 characters. Google truncates titles longer than ~60 characters in search results, cutting off your message. Meta description: 120–160 characters. On mobile, Google shows roughly 120 characters, so front-load the key information. This generator shows a live character count and preview for both.

What are Open Graph tags and do they affect SEO?

Open Graph tags (og:title, og:description, og:image) control how your page looks when shared on Slack, Discord, LinkedIn, Facebook, and other platforms that show link previews. They are not a direct Google ranking factor, but a well-designed OG image and title improve click-through rates from social shares — which indirectly signals engagement to Google.

Does the keywords meta tag help with Google SEO?

No. Google has ignored the meta keywords tag since 2009. It has zero effect on Google rankings. Some other search engines may still look at it. Only include it if a specific CMS or client workflow requires it.

What is a canonical URL and why does it matter?

The canonical tag (rel="canonical") tells search engines which URL is the preferred version of a page when the same content is accessible at multiple URLs — for example, with or without a trailing slash, www vs non-www, or with UTM parameters. Without it, Google may split ranking signals across duplicate URLs and rank none of them well.

What does noindex mean in the robots meta tag?

noindex tells search engines not to include this page in search results. Use it for admin dashboards, thank-you pages, internal search results, staging environments, or any page you do not want to appear in Google. Most public pages should stay on the default index, follow.

When do I need hreflang tags?

Use hreflang tags when your site serves the same content in multiple languages or has region-specific versions (e.g., /en/, /fr/, /de/). They tell Google which language variant to show users in different countries. The x-default value specifies the fallback page when no variant matches the user's language.

How do I add meta tags in Next.js?

In Next.js 13+ App Router: export a metadata object or generateMetadata function from your page.js file. Next.js renders the tags server-side automatically — no extra library needed. In older Next.js with Pages Router, use next/head. For Vite + React, use react-helmet-async.

What is the viewport meta tag and do I need it?

The viewport tag tells mobile browsers to display the page at the device's actual width instead of zooming out to fit a desktop layout. It is required for any responsive website. Without it, Google may flag your site as not mobile-friendly, which negatively affects rankings on mobile searches.