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 it 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 it

  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

Real input, real output

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.

04 — FAQ

Frequently asked

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

05 — More

Tools that pair well

Slug Generator

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

Text/slug

Favicon Generator

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

Media/favicon

QR Code Generator

Turn text, URLs, WiFi credentials, or vCard info into a QR code. Download as SVG or PNG, customize color and error correction.

Media/qr-code