Back to Tools
Free developer tools

Meta Tag Generator for HTML, WordPress, Next.js & React

Draft a title, description and social metadata, then choose an output format for your project. Manual editing is available alongside optional AI drafting.

Edit your page metadata

AI SEO Generator

Optional Auto-Fill sends your topic and keywords to Gemini to draft a title and description. Review the draft before use, or edit the fields manually.

Basic Meta Tags

0 chars · guidance: 30–60

Write a clear, useful title. Search engines may truncate or rewrite it.

0 chars · guidance: 120–160

Length is editing guidance, not a fixed search-engine limit. Summarize the page accurately.

Advanced & Social (Open Graph)

Directs Google to the "master" version of a page.

Shown when users share your link on Twitter/Facebook/LinkedIn.

Creates a schema template. Add only verified facts; markup does not guarantee rich results.

Google SERP Preview
example.com
Your Title Here
Your meta description will appear here as a snippet for search engine users...
Output: Next.js Code

import type { Metadata } from 'next';

export const metadata: Metadata = {
  "title": "Your Title Here",
  "description": "Your description here...",
  "alternates": {
    "canonical": "https://example.com"
  },
  "robots": {
    "index": true,
    "follow": true
  },
  "openGraph": {
    "title": "Your Title Here",
    "description": "Your description here...",
    "url": "https://example.com",
    "images": [
      {
        "url": "https://example.com/image.jpg"
      }
    ],
    "type": "website"
  },
  "twitter": {
    "card": "summary_large_image",
    "title": "Your Title Here",
    "description": "Your description here...",
    "images": [
      "https://example.com/image.jpg"
    ]
  }
};

Explore Other Free Tools

Keep the momentum going with simple tools for writing, SEO, design, and career documents.

Why Use a Meta Tags Generator?

Metadata describes a page to search engines and services that display shared links. Keep it accurate and consistent with visible content, and check the generated code in your project.

Writing Titles and Descriptions

Length indicators are guidance, not fixed Google limits. Search engines can choose different titles or snippets. Write a clear summary of the actual page instead of promising a ranking or click-through improvement.

Not Just a Meta Generator — Framework-Ready Output

The generator supports HTML, WordPress/PHP, Next.js metadata and React Helmet examples. Review dependency and framework requirements before integrating the output.

Looking for more helpful tools? Try our free word counter online to check your meta description length, or use our color palette generator to explore colors for your OG image.

How to Use This Meta Tags Generator

Use the following steps to prepare and review metadata examples. Optional AI Auto-Fill sends your topic and keywords to Gemini; generated drafts still need your review.

1

Enter a descriptive page title

Write a title that matches the page. The character count is editing guidance, not a fixed search-engine limit.

2

Summarize the page

Write an accurate description of the content. Search engines decide which snippet to show.

3

Set the page and social fields

Add the canonical page URL and a publicly accessible social image. Keywords and JSON-LD are optional.

4

Choose an output format

Select HTML, WordPress/PHP, Next.js or React to match the receiving project.

5

Copy and review the example

Use the Copy button and place the example in the intended context. Check framework dependencies, generated markup and the final page.

Frequently Asked Questions

What does this generator do?
It turns your title, description, page URL and other selected fields into metadata examples. Review the generated output in the intended project.
Which formats are supported?
Choose HTML, WordPress/PHP, Next.js App Router metadata or React Helmet. JSON-LD can be included when selected. The receiving project must support the chosen format and dependencies.
Are the length indicators search-engine limits?
No. They are editing guidance. Search engines may rewrite or truncate titles and descriptions based on query, device and available space.
Do I need meta keywords?
The field is optional. Include it only if your intended system uses it; it is not a substitute for useful content, a descriptive title and a clear summary.
Will social previews always match?
The generator supplies social metadata, but each platform controls its preview and caching. Use a publicly accessible image and check the final page on the intended platform.
What happens when I use AI Auto-Fill?
Your topic and optional keywords are sent to the site’s server and forwarded to Google’s Gemini API to draft a title and description. You can use manual editing without making that AI request.

Need more than a meta tags generator?

I build custom websites, AI agents, and automation systems for businesses. Share your requirements to request a project consultation.

Request a ConsultationContact Me