Skip to main content

Meta Tag Generator

Generate complete HTML meta tags including Open Graph and Twitter Card tags.

Reviewed by · Last reviewed

0/60 characters
0/160 characters

Open Graph Tags

Twitter Card

How to Use the Meta Tag Generator

  1. Fill the core SEO block - type your page <title>, meta description, canonical URL, and optional author and robots directives. The character counter next to the title and description turns amber once you cross the pixel budgets Google truncates at.
  2. Enable the Open Graph block - add og:title, og:description, og:image, og:url, and og:type. These are what Facebook, LinkedIn, Slack, Discord, iMessage, and WhatsApp use when your link is pasted.
  3. Enable the Twitter/X block - pick summary or summary_large_image, then add twitter:site and twitter:creator handles if relevant.
  4. Set viewport and language - the generator emits <meta name="viewport" content="width=device-width, initial-scale=1"> and a <html lang> hint you can paste into your template.
  5. Copy the output - the right-hand panel shows the final block as pastable HTML. Drop it inside <head> before any render-blocking script.

What the Generator Actually Produces

The output is not a single tag - it is a bundle of roughly a dozen elements covering four different specifications stitched into one <head>. The classic <title> and <meta name="description"> come from the HTML Living Standard maintained by WHATWG. The Open Graph properties follow the ogp.me schema that Facebook published in 2010 and which the rest of the social web adopted. The twitter:* tags follow the Twitter (now X) Cards markup reference. The link rel="canonical" element is specified in RFC 6596.

All three engines (Googlebot, Bingbot, and the various social scrapers) read the <head> with plain HTML parsers and do not execute your JavaScript before harvesting metadata, so the tags must be present in the initial server response. The generator respects this by producing static HTML; there is no runtime injection. If you render with a framework like Astro, Next.js, or SvelteKit, paste the output into the server-rendered head slot rather than a client-side effect.

When to Reach for This Tool

  • Launching a new landing page and you want a complete metadata baseline in one paste rather than hunting through docs for each tag name.
  • Migrating a CMS and you need to regenerate per-page metadata consistently across thousands of URLs.
  • Auditing a competitor - paste their likely title and description, inspect the rendered tag block, and compare against what Google actually shows.
  • Prototyping a share card - seeing the exact og:image and twitter:image pairing before you wire it into your build pipeline.
  • Teaching a junior developer or marketer what the metadata block should contain without handing them a 40-page SEO PDF.

Common Pitfalls

  • Writing titles over 60 characters - Google truncates at roughly 600 pixels of width, which corresponds to 50-60 characters for most fonts. Wide glyphs like M and W eat the budget faster than i and l.
  • Duplicating og: and twitter: values verbatim - you can, and Twitter falls back to OG when Twitter-specific tags are missing, but LinkedIn reads both and the first one wins differently on each platform.
  • Using a relative og:image - the Open Graph Protocol requires an absolute URL. Scrapers do not resolve paths against the page URL.
  • Forgetting og:image:width and og:image:height - without them Facebook sometimes skips the preview while it reaches out to fetch dimensions, and the first share looks broken.
  • Setting robots to noindex, nofollow and wondering why nothing ranks - this is the single most common self-inflicted SEO wound after a staging-to-production migration.
  • Pointing canonical to a different page - Google treats this as a strong signal to drop the current URL from its index entirely.

How Search Engines Actually Use Meta Tags

Google Search Central documents each supported tag in its "Special tags that Google understands" reference. The title element influences the result snippet but is not a ranking factor in isolation. The meta description has been explicitly confirmed by Google as not a ranking signal since 2009, but it controls the snippet roughly 62-68% of the time according to Ahrefs and SISTRIX studies; the rest of the time Google rewrites it from page body text it considers more relevant to the query. The meta keywords tag is ignored by Google and Bing and has been ignored since 2009 and 2014 respectively - the generator still emits it because Yandex and a few vertical engines still consult it.

Alternatives and When They Win

For a one-off page, hand-writing the tags in your editor is faster than any tool. For a CMS-backed site, plugins like Yoast SEO for WordPress, RankMath, or Astro's astro-seo integration bake metadata into the template so the fields are enforced at commit time rather than typed into a form. If you need metadata to be driven by CMS fields (product pages, blog posts), a template-based approach scales better. Where this generator wins is one-off landing pages, static microsites, and spike work where setting up a plugin is overkill. For validating the result after paste, use Google Search Console's URL Inspection, Facebook's Sharing Debugger, and LinkedIn's Post Inspector.

Frequently Asked Questions

What meta tags does Google actually read?

Google documents the specific tags it supports on the Google Search Central "Special tags" reference page. The short list is <code>title</code>, <code>meta description</code>, <code>meta robots</code> (with <code>index</code>, <code>noindex</code>, <code>follow</code>, <code>nofollow</code>, <code>max-snippet</code>, <code>max-image-preview</code>), <code>link rel="canonical"</code>, <code>meta viewport</code>, and <code>meta http-equiv="content-language"</code>. Everything else Googlebot sees is stored but not directly used for ranking or display.

How long should my title tag be?

Aim for 50-60 characters. Google truncates the displayed title at roughly 600 pixels of width, and because title fonts are proportional, the exact character count depends on the glyphs. Ahrefs analysed 1M SERPs in 2022 and found the average displayed title length was 55 characters. Put the primary keyword in the first 30 characters so it survives mobile truncation.

Is the meta keywords tag still useful?

Google has ignored <code>meta keywords</code> since September 2009, when Matt Cutts confirmed it in a public post. Bing has ignored it since 2014. Yandex still reads it. The generator emits it because the cost is zero and a few non-Google engines plus some internal enterprise search systems still consult it, but do not expect Google ranking impact.

Does Google always use my meta description?

No. Studies by Ahrefs, SISTRIX, and Portent put the rewrite rate between 32% and 68% depending on the query. Google rewrites the description when it thinks a snippet extracted from your page body is more relevant to the specific search query. You cannot force Google to use yours, but a description that directly matches head-term queries is more likely to be preserved.

What is the difference between Open Graph and Twitter Card tags?

Open Graph is a protocol originally published by Facebook in 2010 at <code>ogp.me</code> and now treated as the de facto standard. Twitter Cards are an X-specific markup that predates OG and uses the <code>twitter:</code> namespace. Twitter falls back to OG when Twitter-specific tags are absent, so the minimum viable metadata is a full OG block plus <code>twitter:card</code> set to either <code>summary</code> or <code>summary_large_image</code>.

Why does my Facebook preview show an old image?

Facebook caches Open Graph data per URL for up to 30 days. Changing <code>og:image</code> and resharing does not refresh the preview - you need to force a refetch via the Sharing Debugger at <code>developers.facebook.com/tools/debug/</code>, which prompts Facebook to re-scrape and flush the cache. LinkedIn has its own Post Inspector for the same purpose.

Where exactly should the canonical tag point?

To the preferred indexable version of the page, specified as an absolute URL. Self-canonicals (the canonical pointing to the current URL) are valid and encouraged. If you are consolidating duplicates (tracking parameters, sort orders, print versions), the canonical on the duplicate points to the master. Do not point a canonical to a URL that <code>noindex</code>s or <code>301</code>s elsewhere - the signal becomes ambiguous and Google may ignore it.

Is my data uploaded anywhere?

No. The generator runs entirely inside your browser. There is no <code>fetch()</code> call anywhere in the component - the HTML string is assembled by a pure JavaScript function that takes your form values and returns a template literal. You can verify this by opening your browser devtools Network panel and watching for outbound requests while you type; there are none.

Does the order of meta tags in the head matter?

For Google and social scrapers, no - they parse the entire <code>&lt;head&gt;</code> first. For browser performance, yes: put <code>meta charset</code> in the first 1024 bytes, <code>viewport</code> early, and <code>preconnect</code> or <code>preload</code> before render-blocking stylesheets.

Can I use meta tags instead of a sitemap?

Not for discovery. A sitemap.xml tells crawlers which URLs exist on your site; meta tags only speak for the page that contains them. <code>meta robots</code> controls whether a given page is indexed, and <code>link rel="canonical"</code> consolidates duplicate URLs, but neither helps Googlebot find pages it does not already know about. Use a sitemap for discovery and meta tags for per-page control.

Should I use <code>http-equiv</code> or name-based meta refresh?

Prefer a server-side HTTP 301 or 302 redirect over <code>&lt;meta http-equiv="refresh"&gt;</code>. Meta refresh delays the redirect client-side, confuses the back button, and is a poor signal to search engines; Google treats long-delay meta refreshes as soft 200s that do not pass PageRank cleanly. A server redirect is cleaner and faster.

Do I need separate meta tags for mobile and desktop?

No. Mobile-first indexing (default since 2023) means Google primarily crawls the mobile version and uses its metadata. Write one set of tags for both, include a responsive <code>viewport</code>, and avoid user-agent sniffing - Google treats it as cloaking.

More SEO & Web Tools

Google SERP Preview

Preview how your page appears in Google search results with character count indicators.

Open tool

Heading Structure Analyzer

Extract and visualize H1-H6 heading hierarchy with SEO issue detection.

Open tool

Hreflang Tag Generator

Generate hreflang link tags for multilingual websites with x-default support.

Open tool

Keyword Density Checker

Analyze word frequency with single words, bigrams and trigrams with density percentages.

Open tool

Open Graph Preview

Preview how your page looks when shared on Facebook and LinkedIn.

Open tool

Readability Checker

Free reading level checker and writing grade level analyzer. Flesch-Kincaid, Flesch Reading Ease, Gunning Fog and Coleman-Liau scores in one place.

Open tool