DevFlow logoDevFlow

Meta Tag Generator — Free SEO, Open Graph, Twitter Card & JSON-LD Tool

Meta Tag Generator

Generate SEO meta tags, Open Graph, Twitter Cards, and JSON-LD structured data.

All-in-one meta tag generator for web developers and SEO professionals. Generate HTML meta tags (title, description, robots, canonical, viewport, charset, theme-color), full Open Graph protocol tags, Twitter/X Card markup, and validated JSON-LD structured data (WebSite, Organization, Article, Product, FAQPage, BreadcrumbList, LocalBusiness). Features live Google SERP preview with pixel-width-aware truncation warnings, Facebook/LinkedIn and X/Twitter social card previews, character counters, and one-click copy or download. Runs entirely in your browser.

Keywords: meta tag generator, meta tag generator online, open graph generator, og tag generator, twitter card generator, json-ld generator, schema markup generator, structured data generator, seo meta tags, serp preview, meta description generator, rich snippet generator, social media preview, og image size, canonical url

Tags: meta, seo, opengraph, twitter-card, json-ld, schema, html, structured-data

Popular Web Code tools

Browse all 20 Web Code tools →

Meta Tag Generator is also known as: Open Graph Generator, Twitter Card Generator, JSON-LD Generator, Schema Markup Generator, OG Tag Generator, SEO Tag Generator.

How to Meta Tag Generator Online

  1. Enter your page title and meta description in the SEO tab. Character and pixel-width counters update live.

  2. Switch to the Open Graph tab to configure og:image, og:type, site name, and locale for Facebook/LinkedIn sharing.

  3. Set up your Twitter/X Card with card type (summary or summary_large_image), @site handle, and a card image.

  4. Choose a JSON-LD schema type (WebSite, Organization, Article, Product, FAQPage, BreadcrumbList, LocalBusiness) and fill in the required fields — validation warnings appear in real-time.

  5. Configure robots directives (index/noindex, follow/nofollow) in the Robots tab.

  6. Preview your tags live: check the Google SERP preview, Facebook card, and Twitter card mockups.

  7. Click Copy HTML (⌘⇧C) to copy the complete snippet, or Download to save as an .html file.

Meta Tag Generator Features

  • All-in-one generator: SEO meta tags + Open Graph + Twitter/X Cards + JSON-LD in a single tool

  • 7 JSON-LD schema types: WebSite, Organization, Article, Product, FAQPage, BreadcrumbList, LocalBusiness — with required-field checks per type

  • Live Google SERP preview with pixel-width-aware title and description truncation warnings

  • Facebook/LinkedIn and X/Twitter social card previews that update as you type

  • Character counters with pixel-width estimation for title (~580px) and description (~920px) SERP limits

  • Robots meta builder with quick presets and conflict detection (e.g. index + noindex warning)

  • Canonical URL normalization (trailing slash, protocol, fragment removal)

  • One-click copy per section (meta, OG, Twitter, JSON-LD) or entire snippet

  • Ready-made preset examples for Blog Article, SaaS/WebSite, E-Commerce Product, FAQ Page, and more

  • Autosave to your browser — your settings survive page refreshes

  • Runs entirely in your browser — no data is sent to a server

Frequently Asked Questions

What are meta tags and why do they matter for SEO?
Meta tags are HTML elements that provide metadata about a web page to search engines and social platforms. The <title> tag and <meta name="description"> tag directly influence how your page appears in Google search results (SERP). Well-crafted meta tags improve click-through rates (CTR), which indirectly boosts rankings.
What is Open Graph and why do I need it?
Open Graph (OG) is a protocol created by Facebook that controls how your page appears when shared on social media. OG tags define the title, description, image, and type shown in link previews on Facebook, LinkedIn, WhatsApp, Slack, Discord, and many other platforms. Without OG tags, platforms may display incorrect or missing information.
What is the difference between Open Graph and Twitter Cards?
Open Graph tags (og:title, og:description, og:image) are used by most social platforms. Twitter/X Cards (twitter:card, twitter:title, twitter:image) are Twitter-specific and take precedence on Twitter/X. If Twitter Card tags are missing, Twitter falls back to OG tags. Best practice is to include both for maximum compatibility.
What is JSON-LD structured data?
JSON-LD (JavaScript Object Notation for Linked Data) is a format for embedding structured data in web pages. Google uses JSON-LD to understand page content and display rich results (recipe cards, FAQ accordions, product ratings, breadcrumbs) in search results. It is the format recommended by Google over Microdata or RDFa.
What JSON-LD schema types does this tool support?
This tool supports 7 commonly used schema types: WebSite (with SearchAction for sitelinks search box), Organization (logo, social profiles), Article (blog posts, news), Product (e-commerce with offers), FAQPage (Q&A accordions in SERP), BreadcrumbList (navigation breadcrumbs), and LocalBusiness (address, hours, geo). Each type is checked against the fields Google expects for rich results, with actionable warnings when required data is missing.
How long should my title tag and meta description be?
Google measures title display in pixels, not characters. A title up to ~580px wide (roughly 50–60 characters) avoids truncation. Meta descriptions up to ~920px (roughly 150–160 characters) display fully. This tool shows both character count and estimated pixel width so you can optimize precisely.
What is a canonical URL and when should I use one?
A canonical URL (<link rel="canonical">) tells search engines which version of a page is the "original" when duplicate or similar content exists at multiple URLs (e.g. with/without www, with tracking parameters, paginated pages). Every indexable page should have a self-referencing canonical tag.
What robots directives should I use?
Most pages should use "index, follow" (the default). Use "noindex" for pages you don't want in search results (login, thank-you, staging). Use "nofollow" for pages where you don't want search engines to follow outbound links. "noarchive" prevents cached versions, and "max-image-preview:large" enables large image previews in Google Discover.
Is this meta tag generator free?
Yes, completely free with no limits. All generation runs directly in your browser — no account required, no data sent to any server.
What is the recommended OG image size?
The recommended Open Graph image size is 1200×630 pixels (1.91:1 ratio). This works well on Facebook, LinkedIn, and most platforms. For Twitter summary_large_image cards, use at least 800×418 pixels. Always provide og:image:width and og:image:height tags so platforms can render the preview without downloading the full image first.

Related Developer Tools