Skip to content
Free · No install required

Meta Tags Generator

Generate Basic Meta, Open Graph, and Twitter Cards live. Preview Google SERP and social cards as you type.

0/60
0/160

Robots

0/60
0/160
0/70
0/200
example.comexample.com

Your Page Title

Your page description will appear here. Make it compelling to improve your click-through rate.

Generated HTML

<!-- Generated by DevZap Meta Tags Generator — devzap.io -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

Why a meta tags generator

Hand-writing meta tags is fine until you realize you have to remember the canonical order, what falls back to what, which fields have character limits, and how three different platforms (Google SERP, Facebook, Twitter) render the same content.

This generator handles all of it — including the inheritance chain — so you can ship correct meta tags without a checklist beside your editor.

Inheritance — the part most generators miss

Most online generators dump every field into output, including the ones you didn’t fill in. The result: bloated <head> blocks with redundant og:title and twitter:title that all duplicate the same string.

This generator inherits in the reverse direction:

  • OG fields fall back to Basic Meta when empty (og:title → <title>, og:description → <meta description>, og:url → canonical).
  • Twitter Card fields fall back to OG when empty (twitter:title → og:title → <title>).

So you fill in Basic Meta once, leave OG and Twitter mostly empty, and let the platforms inherit. Your output stays small and your previews still look right.

Use cases

  • New page launch: spin up correct meta tags in under two minutes before you publish.
  • Social card debugging: see exactly how Facebook, LinkedIn, and Twitter will render your page before you tweet the link.
  • SEO audits: paste your meta description and confirm it’s within character limits and reads well.
  • Template development: generate a baseline set of tags, then convert them into your CMS or framework templating language.

How to use

  1. 1

    Toggle the sections you need

    Each section (Basic Meta, Open Graph, Twitter Card) has an enable/disable toggle. Disabling a section excludes it from the generated HTML.

  2. 2

    Fill in the fields

    Watch the SERP, Facebook, and Twitter previews update live as you type. Character counters warn you when fields exceed the recommended limits.

  3. 3

    Copy the generated HTML

    The Generated HTML panel shows production-ready meta tags ordered correctly. Click Copy to grab them and paste into your <head>.

DevZap Premium

Use this directly on any page with DevZap

DevZap brings every tool into your browser as a one-click extension. No tab switching, no copy-pasting URLs. Inspect, generate, and export from any page you visit.

Install on Chrome

FAQ

Frequently asked questions

What's the difference between Basic Meta, Open Graph, and Twitter Cards?
Basic Meta covers the fundamentals every page needs (title, description, canonical, charset, viewport, robots). Open Graph powers how the page renders when shared on Facebook, LinkedIn, Slack, Discord, and most modern apps. Twitter Cards control how the page renders on Twitter / X specifically. Modern best practice is to ship all three with smart inheritance — OG falls back to Basic when empty, Twitter falls back to OG.
Why do I see 'inherited' badges on the previews?
When you leave OG or Twitter fields empty, the generator falls back to the appropriate parent value. The orange '(inherited)' indicator shows the resolved value isn't unique to that section — useful when previewing what platforms will actually display.
Does the generator save my work?
Yes — your form state persists in your browser's sessionStorage. Closing the tab clears it; opening a new one starts fresh. We never send your data to a server.
How do I add structured data (JSON-LD)?
JSON-LD is out of scope for this tool — it's a different kind of metadata. For structured data, use SEO Meta Inspector inside the DevZap extension, which surfaces and validates JSON-LD per page.

You might also like

Related tools

Color Converter — HEX, RGB, HSL, OKLCH

Convert any color between HEX, RGB, HSL, and OKLCH instantly. WCAG contrast against white shown live.

color Open the Color Converter — HEX, RGB, HSL, OKLCH tool

HTML Entities Reference

Searchable list of HTML entities. Copy named, numeric, or hex form with one click.

html Open the HTML Entities Reference tool

HTTP Status Codes Reference

Every HTTP status code with a clear explanation. Bookmark this page.

reference Open the HTTP Status Codes Reference tool

Ready to make your browser smarter?

Install DevZap free. Upgrade when you're ready.

Install on Chrome Get Premium →