kittokit
EN
DEV-TOOL

Meta Tag Generator — HTML, JSX, Astro, Svelte

Title, description, Open Graph, Twitter Card, Schema.org JSON-LD, and hreflang — four framework outputs (HTML, JSX, Astro, Svelte) with a four-way live preview.

Runs locally in your browser Every tag is generated in your browser. No URL is sent to a third-party server, no input is stored, no trackers.
AEO preset: FAQPage for AI search Loads three FAQPage entries that ChatGPT, Perplexity, and Google AI Overviews are more likely to cite.

Inputs

Basics
Open Graph
Twitter Card
Advanced

Live preview

Browser tab
Your page title
Google SERP
example.com Your page title Your meta description appears here — describes the page in 140–220 characters.
Facebook card
1200 × 630
example.com Your page title Your meta description appears here — describes the page in 140–220 characters.
Twitter card
1200 × 630
Your page title Your meta description appears here — describes the page in 140–220 characters. example.com

Output

<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">

How It Works
  1. 01

    Paste text or code

    Paste your content into the input field or type directly.

  2. 02

    Instant processing

    The tool processes your content immediately and shows the result.

  3. 03

    Copy result

    Copy the result to your clipboard with one click.

Privacy

All calculations run directly in your browser. No data is sent to any server.

Generates SEO meta tags entirely in your browser. Title and description length validators (30–60 / 140–220 characters), Open Graph with 1.91:1 hint, Twitter Card picker. Four-way live preview for browser tab, Google SERP, Facebook, and Twitter. Schema.org JSON-LD for Article, WebSite, Product, FAQPage, HowTo, and Organization. hreflang builder with required x-default. Copy buttons for HTML, JSX, Astro, and Svelte.

01 — How to Use

How do you use this tool?

  1. Enter title, description, and canonical URL — the validator shows length and URL status live.
  2. Fill in Open Graph and Twitter Card in the same block: image URL absolute, 1200 × 630 px recommended.
  3. Inspect browser tab, Google SERP, Facebook card, and Twitter card simultaneously in the preview.
  4. Pick an output tab — HTML, JSX, Astro fragment, or Svelte `<svelte:head>` — and copy with one click.
  5. For multi-language sites, open the hreflang tab and enter languages plus the required `x-default`.

What does the Meta Tag Generator do?

The Meta Tag Generator emits four output formats in parallel: full HTML, React-compatible JSX (with self-closing tags), Astro fragment (to paste into <head> or <Fragment slot="head">), and Svelte <svelte:head> block. You work in a single form but copy the exact syntax that matches your stack. The live preview shows how your page will look in the browser tab, in the Google SERP, in a Facebook card, and in a Twitter card — simultaneously, before you deploy.

Three characteristics set the tool apart from the seven competitors analysed in the research pass:

  • Pure-client + Schema.org JSON-LD in the same tool: Of the seven competitors, only one includes Schema markup — and that one uses the deprecated itemprop format directly in the HTML. We ship modern JSON-LD in a dedicated tab for Article, WebSite, Product, FAQPage, HowTo, and Organization. JSON-LD has been the Schema-markup standard of Google, Bing, and Schema.org itself for years.
  • Framework-copy switcher: Modern web development lives between stacks. React projects expect JSX syntax with /> self-closing, Astro sites need fragment imports, Svelte components expect the <svelte:head> wrapper. We generate all four outputs from the same input — no competitor does that.
  • hreflang builder + AEO FAQPage preset integrated: At competitors, hreflang lives in separate specialist tools. We embed it as a tab in the same surface, with required x-default and per-row URL validation. The AEO preset loads three pre-built FAQPage entries for AI-search optimisation — important because Google deprecated FAQ rich snippets in the classic SERP in May 2026, but FAQPage Schema remains valuable for AI search engines.

The UI follows refined-minimalism: privacy badge at the top, input form grouped into Basics / Open Graph / Twitter Card / Advanced, live preview in a 2 × 2 grid, output tabs with copy button, subtle validator eyebrows per field. No tracking, no account, no server round-trip.

Which tags does the generator emit?

The tool covers 14 tag types, ordered by SEO priority:

BlockTagRequired?Note
Basics<title>required30–60 chars, keyword up front
Basics<meta name="description">required140–220 chars, with a USP
Basics<meta name="author">optionalpersonal names
Basics<meta name="robots">optionalblank = index, follow
Basics<link rel="canonical">recommendedabsolute https URL
Open Graphog:title, og:description, og:type, og:url, og:site_name, og:localerequiredidentical to base title
Open Graphog:image, og:image:altrecommended1200 × 630 px, absolute https URL
Twitter Cardtwitter:cardrequiredsummary or summary_large_image
Twitter Cardtwitter:site, twitter:title, twitter:description, twitter:image, twitter:image:altrecommended@-handle optional
Mobiletheme-coloroptionalhex value for Android Chrome

Validator eyebrows check each field: title length (warn if < 30 or > 60), description length (warn if < 140 or > 220), canonical URL (warn on http instead of https, info on trailing slash), OG image (warn on http), OG image alt (warn if empty when image set), theme-color (warn if not hex), Twitter site (info on leading @).

How does Schema.org JSON-LD generation work?

In the “Schema.org JSON-LD” tab you pick one of six Schema types that cover 95 % of all websites. Each type has its own sub-form with type-specific fields — and automatically fills the generic fields (name, URL, image) from your base inputs:

Article is for blog posts, magazine articles, and news. Required fields are headline, author, and datePublished. Optional dateModified for updated articles. The author is automatically structured as a Person object.

WebSite is for the homepage of a domain. Emits name, description, and url. Often used as a single Schema on the root page, sometimes combined with Organization and BreadcrumbList.

Product is for e-commerce. Required: name, description, image. If price and priceCurrency are set, an additional Offer sub-schema is emitted with price and currency — Google uses it for price rich snippets. brand is an optional brand object.

FAQPage emits a list of Question/Answer pairs. Each question becomes a Question node with an acceptedAnswer sub-node. Rows with empty question or empty answer are ignored. The AEO preset loads three pre-built entries to start with.

HowTo emits a numbered step list with position, optional name, and required text per step. Used for recipe pages, tutorial pages, and instructions.

Organization emits brand info with name, url, and optional logo. Typically embedded as a single Schema in the footer of the whole site or directly in <head> of the About page.

The tool produces pretty-printed JSON with 2-space indentation and wraps the result in a <script type="application/ld+json"> block — ready to paste into <head>.

How does the hreflang builder work?

In the hreflang tab you add one row per language with a BCP-47 code and an absolute URL. The three pre-filled rows — de, en, x-default — are a good starting point for a bilingual DE/EN site. Add more rows with + Row (e.g. en-US, en-GB, de-AT, de-CH, fr, es).

hreflang="x-default" is required as the fallback URL for all languages not explicitly mapped. Without x-default you risk warnings in Google’s international reports. Best practice is to point x-default to the English variant, because English is the most common browser language worldwide.

Each row’s URL is validated via the native URL parser. Invalid rows are silently skipped in the output — that prevents broken output blocks while you are still typing. The output is a list of <link rel="alternate" hreflang="X" href="Y"> tags to paste straight into <head> of each language variant. Reciprocity is required: every variant must link to every other variant, otherwise Google ignores the hreflang cluster.

What the tool deliberately does not do: no automatic URL detection (e.g. via site crawl), no bulk CSV import. Both are phase-2 candidates once real user demand surfaces.

Answer Engine Optimization (AEO) is SEO’s younger sibling. While SEO optimises for clicks on Google results, AEO optimises the probability of being cited in AI answers from ChatGPT, Perplexity, Claude, and Google AI Overviews. Studies on generative engine optimisation show that structured FAQPage data raises the citation rate by 41–67 % — because AI models prefer sources with a clear question-answer structure.

Three levers are particularly effective:

  • FAQPage Schema with voice-search-ready direct answers. The first 10 words of the answer must address the question directly; the detailed explanation follows. Smart speakers and AI assistants often only read the first sentences aloud.
  • Authoritative outbound links in the body (Wikipedia, standards like RFC or W3C, gov domains). The Princeton GEO study reports a +40 % visibility boost from source citations.
  • Clear Schema structure instead of marketing language. Definition first, use case second, comparison last — AI models prefer extractable content.

Google deprecated FAQ rich snippets in the classic SERP in May 2026. That does not mean FAQPage Schema is dead — it means the classic-SERP advantage is gone. For AI search, FAQPage remains one of the most important Schema types.

What does the tool deliberately not do?

Three things the generator skips on purpose:

  • No URL scan / existing-tag audit: Competitors like metatags.io and opengraph.xyz fetch the target URL server-side to extract existing tags. That breaks our pure-client doctrine and leaks pre-launch URLs to third parties. If you need existing tags, use your browser’s DevTools (view-source:) or a local crawler.
  • No OG image generator: The generator emits tags, not images. For an OG image you need your own canvas pipeline or a design tool. A separate kittokit solution may follow on demand — for now, paste the finished image URL into this tool.
  • No advanced Schema types like LocalBusiness, Recipe, Event, JobPosting: These six top types cover 95 % of use cases. Specialty schemas will move into their own tool once demand is visible. Until then, Schema.org’s canonical docs list the fields you can add manually.
  • No bulk CSV mode: One tool, one page, one tag block. Bulk generation of tag blocks from a CSV is phase-2 material if marketing teams report ≥10 requests per quarter.

What the tool delivers instead: complete, correctly escaped HTML strings that you can paste straight into your build process. All four framework outputs use identical escape rules (<, >, &, ", '), so you do not need double sanitisation.

Last updated:

You might also like