Meta Tag Generator

Generate SEO-optimized meta tags, Open Graph tags, and Twitter Cards with live Google & social previews. Preview, copy, and download — all in your browser.

Create your meta tags

Fill in the fields below and watch the live previews update. Expand sections for Open Graph, Twitter Cards, and more.

Page type
0/60

Appears as the clickable headline in search results. Keep under 60 characters for Google.

0/160

Shown below the title in search results. Aim for 150–160 characters with a call to action.

Preferred URL for this page. Prevents duplicate content issues.

Comma-separated. Google ignores this tag since 2009, but Bing may still use it.

Open Graph tags Facebook, LinkedIn, Discord, Slack
Twitter Card tags X (formerly Twitter)
Robots & indexing Control crawling
Technical tags Charset, viewport, language, author
SEO Score 0/100
Page title
Title under 60 chars
Meta description
Description 150–160 chars
Canonical URL set
Open Graph tags
OG image provided
Twitter Card tags
Viewport tag
Charset defined
example.com https://example.com

Your Page Title Will Appear Here

Your meta description will appear here. Write a compelling summary that makes users want to click through to your page.

Generate Meta Tags

Generated Meta Tags

0 tags

The Architecture of Modern HTML Metadata in 2026

HTML meta tags represent the foundational semantic layer of the modern web. Positioned strictly within the document <head>, these elements convey structured technical directives and machine-readable context to search engine crawlers, conversational AI discovery engines, social graph scrapers, and browser rendering engines. While invisible to end visitors navigating the visual DOM, properly configured metadata governs organic visibility, click-through performance across Google SERPs, rich visual unfurling on platforms like WhatsApp and LinkedIn, and direct citation indexing in neural Large Language Models (LLMs).

In modern web engineering, metadata configuration has evolved far beyond simplistic keyword tags and arbitrary 60-character limits. Effective optimization now requires comprehensive meta tag generator SERP intent feature gap analysis, responsive pixel-width verification across viewport breakpoints, RAG (Retrieval-Augmented Generation) entity structuring, and native integration with modern JavaScript frameworks such as React 19, Next.js App Router, Astro, SvelteKit, and Remix.

Modern Search Intent & Feature Gap Analysis:

Search engines no longer rely on standalone keyword density. Google, Bing, and AI search engines synthesize title tags, meta descriptions, and structured schema to evaluate searcher intent (informational, commercial, navigational, or transactional) against competitive SERP features like Featured Snippets, Direct Answers, and AI Overviews. Ensure your metadata directly bridges intent gaps with factual, action-oriented clarity.

AI Search Engine Optimization & LLM Discovery (ChatGPT, Perplexity & Claude)

The emergence of generative search engines and conversational discovery systems—such as Perplexity AI, ChatGPT Search, Claude, and Google AI Overviews—has established new paradigms for technical SEO. These platforms operate autonomous web crawlers that ingest page metadata to construct retrieval embeddings for Retrieval-Augmented Generation (RAG) pipelines.

LLM SEO meta description optimization requires creating entity-dense, factual, and concise summaries that neural models can parse with high semantic confidence. When conversational agents evaluate citations, clear meta descriptions and self-contained title tags serve as authoritative anchor references for answer attribution.

llms.txt & llms-full.txt Semantic Standard

Pairing llms txt meta tags AI search engine optimization perplexity chatgpt workflows with a standardized /llms.txt file in your domain root allows AI crawlers to efficiently index your core architecture, API documentation, and key metadata without hallucinating or consuming excessive token context.

data-nosnippet Content Protection

Using the data-nosnippet html attribute generator pattern allows webmasters to prevent specific textual passages, pricing tiers, or proprietary snippets from being extracted into search snippets or AI training datasets (<span data-nosnippet>proprietary text</span>) while maintaining indexability.

SERP Real Estate: Pixel Width (580px Desktop / 920px Mobile) vs. Character Limits

A frequent pitfall in on-page SEO is treating character counts as rigid truncation boundaries. Google does not calculate snippet limits by raw character count; instead, Google's desktop and mobile SERPs render text within fixed pixel-width containers using proportional variable-width typefaces (typically Arial on desktop and Roboto on mobile).

Because proportional glyphs occupy distinct horizontal widths (for example, uppercase "W" or "M" consumes over three times the horizontal pixels of lowercase "i", "l", or "t"), a 55-character title composed of wide characters can truncate prematurely, while a 64-character title containing slender glyphs may display in full. Our meta description pixel width desktop 580px mobile 920px 980px tool accounts for these rendering physics in real-time.

Target Field Desktop Max Boundary Mobile Max Boundary Optimization Objective
Title Tag (<title>) ~580px – 600px (~50–60 chars) ~920px – 960px (~55–65 chars) Place high-intent primary keyword within the first 480px; brand name at the end.
Meta Description ~960px – 980px (~150–160 chars) ~920px – 980px (~110–130 chars visible) Include front-loaded value proposition, secondary keyword entity, and active call-to-action (CTA).
Open Graph Title 1–2 lines (platform dependent) 1–2 lines (60–90 chars) Optimized for viral engagement, click trigger, and conversational shareability.
Open Graph Image 1200 × 630 px (1.91:1 ratio) 1200 × 630 px (centered focal area) Keep critical typography and logos within the safe 1080×566px center zone.

Social Media Link Unfurling & Open Graph Troubleshooting

When URLs are shared across messaging clients and social platforms, crawler bots scrape the Open Graph (OG) and Twitter Card tags to generate rich graphical preview cards (a process known as link unfurling). Implementing precise tags according to the official Open Graph protocol (site ogp.me og image width og image height og image type open graph spec) ensures consistent cross-platform presentation.

The WhatsApp Open Graph Image 300KB Limit & Troubleshooting:

One of the most persistent issues encountered by developers is the whatsapp open graph image 300kb 1200x630 link preview issue. WhatsApp strictly enforces a 300 KB maximum file size limit on preview images. If your 1200×630 image exceeds 300KB, uses an insecure HTTP URL, or returns a 301/302 redirect chain, WhatsApp will silently fail to render any image preview. Always compress OG images to under 300KB (e.g. WebP or optimized JPG), provide explicit dimensions (og:image:width and og:image:height), and ensure direct 200 OK responses over HTTPS.

Diagnostic Checklist: Why OG Images Fail to Show on WhatsApp, Discord, Slack, & LinkedIn

If you are diagnosing why og image not showing whatsapp discord slack linkedin meta tag issues, verify the following root causes:

  • Relative Image Paths: Social scrapers cannot resolve relative URLs like /images/og.png. You must provide an absolute URL including the protocol: https://example.com/assets/og.jpg.
  • Missing Open Graph Protocol Spec Dimensions: Specifying og:image:width (1200), og:image:height (630), and og:image:type (image/jpeg or image/png) allows Discord, Facebook, and LinkedIn to asynchronously render the preview card on the very first crawl without waiting to download the binary payload.
  • Aggressive Crawler Caching: LinkedIn, Facebook, and Telegram cache scraped metadata aggressively. Use the Facebook Sharing Debugger, LinkedIn Post Inspector, or Twitter/X Card Validator to invalidate cached previews.
  • Server-Side Bot Blocking & Cloudflare Challenges: Ensure your firewall, Web Application Firewall (WAF), or Cloudflare bot protection does not block user agents like WhatsApp/x.x, facebookexternalhit/1.1, Slackbot-LinkExpanding, LinkedInBot/1.0, or Twitterbot/1.0.

Native Framework Implementation: React 19, Next.js App Router, Astro, SvelteKit, Remix & Shopify

Modern frontend frameworks offer native APIs for head metadata management, rendering legacy client-side manipulation libraries obsolete.

React 19 Document Metadata vs. Legacy React Helmet

With meta tag generator for react 19 head vs react helmet workflows, React 19 natively supports hoisting document metadata directly from any component within the tree. You no longer require third-party libraries like react-helmet or react-helmet-async:

// React 19 Native Metadata Hoisting (Automatic <head> insertion)
export default function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title} | Toolslight</title>
      <meta name="description" content={post.summary} />
      <meta property="og:title" content={post.title} />
      <meta property="og:image" content={post.coverImage} />
      <link rel="canonical" href={`https://example.com/blog/${post.slug}`} />
      
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}
Next.js 14 & 15 (App Router generateMetadata API)

For Next.js 14 and 15 developers using the nextjs 14 15 metadata app router open graph twitter generator pattern, metadata is defined using the typed Metadata object or the asynchronous generateMetadata function:

// app/products/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next';

type Props = { params: { slug: string } };

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const product = await fetchProduct(params.slug);
  const previousImages = (await parent).openGraph?.images || [];

  return {
    title: `${product.title} - Buy Online`,
    description: product.description.slice(0, 160),
    alternates: {
      canonical: `https://example.com/products/${params.slug}`,
    },
    openGraph: {
      title: product.title,
      description: product.description,
      url: `https://example.com/products/${params.slug}`,
      siteName: 'Example Store',
      images: [
        {
          url: product.imageUrl,
          width: 1200,
          height: 630,
          alt: product.title,
        },
        ...previousImages,
      ],
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: product.title,
      description: product.description,
      images: [product.imageUrl],
      creator: '@storehandle',
    },
    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        'max-image-preview': 'large',
        'max-snippet': -1,
      },
    },
  };
}
Astro, SvelteKit, & Remix Frameworks

Modern full-stack architectures utilizing the meta tag generator for astro sveltekit remix frameworks approach handle metadata through distinct native paradigms:

// 1. Astro Component Frontmatter (src/pages/post.astro)
---
const { title, description, image, canonicalUrl } = Astro.props;
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:image" content={new URL(image, Astro.site)} />
  <link rel="canonical" href={canonicalUrl} />
</head>

// 2. SvelteKit (<svelte:head> in +page.svelte)
<script>
  export let data;
</script>
<svelte:head>
  <title>{data.title}</title>
  <meta name="description" content={data.description} />
  <meta property="og:image" content={data.ogImage} />
  <link rel="canonical" href={data.canonical} />
</svelte:head>

// 3. Remix v2 (app/routes/post.tsx)
import type { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return [
    { title: data?.title ?? "Default Title" },
    { name: "description", content: data?.description },
    { property: "og:title", content: data?.title },
    { property: "og:image", content: data?.image },
    { property: "og:image:width", content: "1200" },
    { property: "og:image:height", content: "630" },
    { tagName: "link", rel: "canonical", href: data?.canonicalUrl },
  ];
};
Shopify Liquid (theme.liquid & Templates)

For eCommerce implementations using the meta tag generator for nextjs app router react shopify pattern, insert dynamic Liquid tags inside your Shopify theme.liquid template:

<!-- Shopify Liquid Head Metadata -->
<title>
  {{ page_title }}{% if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} &ndash; Page {{ current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>
{% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
{% endif %}
<link rel="canonical" href="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:title" content="{{ page_title | default: shop.name }}">
<meta property="og:type" content="{% if template contains 'product' %}product{% else %}website{% endif %}">
<meta property="og:description" content="{{ page_description | default: shop.description | escape }}">
{% if page_image %}
  <meta property="og:image" content="https:{{ page_image | image_url: width: 1200, height: 630 }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
{% endif %}

Advanced Robots Directives & Google Search Console Schema Alignment

Google's search indexing algorithms support advanced snippet configuration directives specified via the <meta name="robots"> tag (referenced in the official Google Search Central documentation at site developers.google.com max snippet max image preview max video preview):

  • max-image-preview:large: Instructs Google that it may display large high-resolution featured image thumbnails (up to full container width) in search results and the Google Discover feed. Without this tag, pages are frequently restricted to low-CTR standard square thumbnails.
  • max-snippet:-1: Removes artificial character length restrictions on Google's algorithmic search snippet extraction, maximizing your opportunity to win Featured Snippets.
  • max-video-preview:-1: Allows Google to generate animated video previews of unlimited duration in search listings.
  • noarchive / noindex / nofollow: Fine-grained controls to block cached pages, exclude staging/admin portals from indexation, and restrict link equity pass-through.
Preventing Google Search Console Missing Schema Field Errors:

Resolving meta tag generator google search console schema markup missing warnings requires establishing perfect entity alignment between your HTML <head> tags and your structured JSON-LD schema. Ensure that your og:title matches your Schema headline or name, your og:image matches your Schema image array, your meta description aligns with description, and your <link rel="canonical"> precisely mirrors the Schema mainEntityOfPage / @id URL. This prevents entity disambiguation conflicts in Google Search Console.

Essential Meta Tags Reference Matrix

<title>Essential

The primary clickable headline rendered in search engine results pages, browser tabs, and bookmark lists.

Best Practice: Keep under 580px width (~50–60 chars). Front-load primary keyword entity.
meta descriptionEssential

The concise summary rendered beneath the title in search listings that drives organic click-through rate (CTR).

Best Practice: Aim for 140–160 characters. Incorporate a compelling CTA and secondary keyword.
canonical URLEssential

Designates the master authoritative URL for search engines when duplicate, parameterized, or syndicated URLs exist.

Best Practice: Always use self-referential, absolute HTTPS URLs with consistent trailing slash policy.
og:imageRecommended

The featured visual asset scraped by WhatsApp, Facebook, LinkedIn, Discord, and Slack when links are shared.

Best Practice: 1200×630px (1.91:1 ratio), compressed under 300KB to prevent WhatsApp link preview failures.
twitter:cardRecommended

Specifies how X / Twitter renders rich media cards. summary_large_image displays full-width visual previews.

Best Practice: Use summary_large_image for blog posts and landing pages; use summary for small profile widgets.
viewportEssential

Directs mobile browsers on viewport dimensions and scale, critical for Google Mobile-First Indexing.

Best Practice: Standard value: width=device-width, initial-scale=1. Avoid disabling user scaling.

Meta Tag Optimization Best Practices

Best Practices (Do) Anti-Patterns (Don't)
Test title and description pixel width across desktop (580px) and mobile (920px)Rely purely on outdated character counters without checking proportional font widths
Compress Open Graph images below 300KB for flawless WhatsApp unfurlingUpload uncompressed 5MB PNG files that fail WhatsApp's 300KB payload limit
Use absolute HTTPS URLs for all canonical, OG image, and Twitter card linksUse relative paths like /images/og.jpg that break external crawlers
Specify explicit og:image:width and og:image:height tagsOmit dimensional tags, causing asynchronous preview delays and card layout shifts
Include max-image-preview:large to qualify for Google Discover visual feedsLeave robots preview directives blank, defaulting to low-CTR small thumbnails
Leverage native React 19 Document Metadata hoisting or Next.js generateMetadataUse deprecated client-side DOM mutation libraries that cause hydration mismatches
Align meta tag values with JSON-LD Schema properties to eliminate Search Console errorsAllow discrepancies between page title/image tags and structured data entities
Apply data-nosnippet to proprietary sections to control search and LLM extractionLeave proprietary pricing tables or paywalled excerpts unprotected from AI scrapers

Privacy & Local Processing Guarantee

All calculations, character and pixel-width evaluations, SEO score assessments, live SERP/social previews, and HTML code generation take place entirely client-side inside your browser engine. No inputted titles, descriptions, image URLs, or proprietary metadata strings are ever transmitted, logged, or stored by Toolslight.

Frequently Asked Questions

How do I fix the WhatsApp Open Graph image 300KB 1200x630 link preview issue?

To fix the WhatsApp Open Graph image preview issue, ensure your image meets three strict criteria: (1) The file size must be strictly under 300 KB (WhatsApp's crawler automatically discards images larger than 300KB); (2) The image must use an absolute HTTPS URL (e.g. https://example.com/og-image.jpg) and return a direct 200 OK status without redirect chains; (3) Include explicit dimensional tags (<meta property="og:image:width" content="1200"> and <meta property="og:image:height" content="630">). Compressing your 1200×630px JPG or WebP image to ~150KB–250KB resolves this issue immediately.

Why is pixel width (580px desktop / 920px mobile) superior to character counting for SEO?

Google renders search snippets using proportional typefaces (such as Arial on desktop and Roboto on mobile), where each letter occupies variable horizontal pixel widths. For example, wide capital letters like "W" and "M" consume significantly more pixels than narrow letters like "i", "l", or "t". Because Google truncates titles at approximately 580px–600px on desktop and meta descriptions at around 960px–980px, character counts are only rough estimates. Measuring pixel width guarantees your title and description won't be abruptly cut off with an ellipsis in real-world search results.

What is the difference between React 19 native document metadata and react-helmet?

React 19 introduces native Document Metadata hoisting directly into the React core. You can now render <title>, <meta>, and <link> tags directly inside any component, and React will automatically hoist them into the document <head> during server rendering and client hydration. Legacy packages like react-helmet and react-helmet-async are no longer necessary, eliminating extra third-party dependencies, bundle weight, and hydration mismatch bugs.

How do I configure metadata in Next.js 14 and 15 App Router using generateMetadata?

In Next.js 14 and 15 App Router, you can define static metadata by exporting a metadata object of type Metadata in your layout.tsx or page.tsx file. For dynamic pages (such as blog posts or products), export an asynchronous generateMetadata({ params, searchParams }) function that fetches data and returns dynamic title, description, openGraph, twitter, and alternates.canonical properties. Next.js automatically deduplicates and streams the generated tags into the HTML head during Server-Side Rendering (SSR).

What does the max-image-preview:large robots directive do for Google Discover?

The max-image-preview:large robots directive instructs Google that it is permitted to display large, high-resolution preview images (at least 1200px wide) when featuring your content in search snippets and the Google Discover feed. Including <meta name="robots" content="max-image-preview:large"> is a mandatory requirement from Google Search Central for qualifying for large visual card layouts, which typically generate significantly higher click-through rates than standard thumbnail snippets.

How do meta tags and llms.txt files impact AI search engines like ChatGPT and Perplexity?

AI search engines (such as Perplexity AI, ChatGPT Search, Claude, and Google AI Overviews) rely on automated web crawlers that extract metadata to generate vector embeddings for Retrieval-Augmented Generation (RAG). Well-structured title tags, entity-dense meta descriptions, and clean canonical links help these AI models identify core topics and provide accurate source citations. Pairing your HTML meta tags with an /llms.txt file in your domain root gives AI agents a clean, structured summary of your site's content without consuming excessive token context.

Why is my Open Graph image not showing on Slack, Discord, or LinkedIn?

Open Graph preview failures on Slack, Discord, and LinkedIn typically stem from four common causes: (1) Using relative URLs instead of absolute HTTPS URLs (e.g. using /og.jpg instead of https://example.com/og.jpg); (2) Missing explicit og:image:width and og:image:height tags, which prevents platforms from sizing the card before downloading; (3) Aggressive crawler caching from previous crawls (clear the cache using LinkedIn Post Inspector or Facebook Sharing Debugger); or (4) Cloudflare/WAF bot protection blocking user agents like Slackbot-LinkExpanding, LinkedInBot, or Discordbot.

How does proper metadata generation prevent Google Search Console missing schema field errors?

Google Search Console flags missing schema field warnings when structured JSON-LD data lacks required properties or conflicts with page metadata. By ensuring your HTML <head> tags (such as og:title, og:image, meta description, and <link rel="canonical">) directly align with the equivalent properties in your JSON-LD schema (such as headline, image, description, and mainEntityOfPage), search engines can validate entities across both representations without flagging disambiguation errors or schema discrepancies.

How do Astro, SvelteKit, and Remix handle dynamic metadata generation?

In Astro, dynamic meta tags are placed inside the component frontmatter and rendered within <head> using standard JSX-like props. In SvelteKit, you insert dynamic tags using the special <svelte:head> element inside +page.svelte components. In Remix v2, routes export a typed meta function that returns an array of metadata descriptor objects (e.g. [{ title: data.title }, { name: 'description', content: data.desc }]), which Remix seamlessly merges and server-renders into the root document head.

What is the data-nosnippet HTML attribute and when should it be used?

The data-nosnippet attribute is an HTML specification recognized by Google and other search engines that prevents specific text elements (such as <span data-nosnippet>text</span> or <div data-nosnippet>content</div>) from being extracted into search engine result snippets or AI answer summaries. Webmasters commonly use it to protect proprietary pricing tables, dynamic user data, or sensitive contact details from appearing in SERP excerpts while keeping the overall page fully indexed.

How do I add Open Graph and Twitter Card tags in Shopify theme.liquid?

In Shopify, open your theme code editor and navigate to layout/theme.liquid. Inside the <head> block, you can add dynamic Liquid tags such as <title>{{ page_title }} - {{ shop.name }}</title>, <meta name="description" content="{{ page_description | escape }}">, and dynamic Open Graph tags checking for {% if page_image %} to output <meta property="og:image" content="https:{{ page_image | image_url: width: 1200, height: 630 }}"> along with og:title and og:url matching canonical_url.

Is this Meta Tag Generator free, private, and fully client-side?

Yes. This Meta Tag Generator is 100% free with no registration, API keys, or usage caps required. Every calculation, live SERP preview, social card simulation, SEO score check, and code generation routine executes entirely client-side within your browser JavaScript engine. No entered titles, descriptions, keywords, or URLs are ever transmitted, stored, or processed on external servers.