Meta Tags Generator

AI-powered

Generate a full SEO + OpenGraph + Twitter Card meta tag block. Optional AI-suggest from a URL or page description.

Title22 chars · short
Description53 chars · short
Canonical URL
Image URL
Site name
OG type
Twitter card
Twitter handle
Theme color
Locale
Robots
OG title (optional)
OG description (optional)
Twitter title (optional)
Twitter description (optional)
Social preview

example.com

How OKLCH Replaces HSL

A practical migration guide for modern color systems.

HTML
<title>How OKLCH Replaces HSL</title>
<meta name="description" content="A practical migration guide for modern color systems.">
<link rel="canonical" href="https://example.com/oklch-guide">
<meta name="theme-color" content="#0a0a0a">
<meta name="robots" content="index, follow">
<meta property="og:type" content="article">
<meta property="og:title" content="How OKLCH Replaces HSL">
<meta property="og:description" content="A practical migration guide for modern color systems.">
<meta property="og:url" content="https://example.com/oklch-guide">
<meta property="og:image" content="https://example.com/og/oklch.png">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How OKLCH Replaces HSL">
<meta name="twitter:description" content="A practical migration guide for modern color systems.">
<meta name="twitter:image" content="https://example.com/og/oklch.png">
<meta name="twitter:site" content="@example">

01 — Overview

How the Meta Tags Generator works

Build the meta tag block for a page: title, description, canonical, OG tags (title, description, image, type, url), Twitter card, robots, and language. Fill the inputs manually, or describe the page and let Claude suggest title and description for you.

02 — Use cases

When to use the Meta Tags Generator

  1. 01

    Add the right social preview tags to a marketing page

  2. 02

    Generate the full meta block for a new blog post

  3. 03

    Get an AI-suggested title and description from a one-line page brief

  4. 04

    Sanity-check that title length, description length, and OG image are all set

03 — Examples

Meta Tags Generator examples

title: 'How OKLCH replaces HSL', description: 'A practical migration guide.', image: og.png

ex 01

<title>How OKLCH replaces HSL</title>\n<meta name='description' content='A practical migration guide.'>\n<meta property='og:title' ...>

Full meta block ready to paste into <head>.

AI mode: 'pricing page for a developer tool, friendly tone'

ex 02

Suggested title (~58 chars) + description (~155 chars) + OG variants

Claude proposes copy; you tweak before copying.

Staging page that shouldn't be indexed

ex 03

<meta name="robots" content="noindex, nofollow">

Blocks indexing at the page level — note that robots.txt alone won't do this.

Blog post with article metadata

ex 04

<meta property="og:type" content="article"> <meta property="article:published_time" content="2026-08-27">

The article type unlocks author and publish-date fields in some previews.

04 — FAQ

Meta Tags — frequently asked questions

What's the ideal title and description length?

Titles: 50–60 chars (Google truncates around 580px wide). Descriptions: 140–160 chars. The tool flags entries outside these ranges.

Do I need both OG and Twitter Card tags?

Twitter (X) reads OG tags as a fallback, so a minimal OG block usually covers both. If you want Twitter-specific behavior (large image card, summary card variant), the dedicated twitter:* tags are still useful.

Where do these tags go?

All inside the <head> of your HTML, ideally before any <script> tags so social scrapers see them quickly.

What size should the OG image be?

1200×630 is the standard — it's 1.91:1, which is what Facebook, LinkedIn, and Slack all crop toward. Keep it under 8MB and above 200×200 or some platforms refuse it. Put nothing important in the outer 10%, because different clients crop differently.

Does the meta description affect rankings?

Not directly — it hasn't been a ranking factor for years. It affects click-through, which matters plenty. Worth knowing: Google frequently ignores what you write and generates its own snippet from page content when it judges that a better match for the query.

What is the canonical tag actually for?

It tells search engines which URL is the real one when the same content is reachable several ways — with and without a trailing slash, with tracking parameters, or across a print view. Without it, those variants compete with each other and split whatever ranking signals the page has earned.

05 — Reference

Specs and further reading

The primary sources this tool follows. Where behaviour is defined by a specification, we link the specification rather than a summary of it.

07 — More

Tools that pair with Meta Tags

Favicon Generator

Generate a complete favicon bundle from text or an uploaded image — every size, manifest, and the HTML snippet.

Media/favicon

Slug Generator

Convert a title into a URL-safe slug. Separator, case, max-length, and Unicode transliteration options.

Text/slug

Open Source License Generator

Pick MIT, Apache 2.0, GPL, BSD, MPL, or public-domain. Fill author and year. Get the LICENSE file.

Config/license

Last updated .