01
Tool

Free Meta Tag Generator

Generate a complete HTML `head` snippet — basic SEO, Open Graph, Twitter Card, canonical URL, and more. Copy and paste into any page.

Configure

Fill in your page details. Leave Open Graph and Twitter fields empty to inherit from the basic fields.

Basic SEO

0/60
0/160

Open Graph

Twitter Card

Generated HTML

Copy these tags into your page's head element.

head-meta.html
<!-- Basic SEO -->
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0F172A">

<!-- Open Graph -->
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

10 lines

Your robots.txt is ready - but it's one of 99+ SEO signals.

Run a free audit →

What are meta tags and why do they matter?

Meta tags are HTML elements inside the <head> of a page that describe the document to machines: search engines, social platforms, browsers, and operating systems. The body of a page is what humans see; the head is what bots, crawlers, and platform integrations read. Meta tags decide how your page is indexed, how it unfurls in shared links, what color the mobile browser UI takes, and whether the device interprets phone numbers and email addresses as tappable links.

Most meta tags fall into one of four roles. Technical tags like charset and viewport tell the browser how to parse and lay out the document; without them, rendering breaks in predictable ways. SEO tags like title, description, canonical, robots, and hreflang tell search engines what the page is and how to handle it in their index. Social tags like the og: family from Open Graph and the twitter: family from Twitter Card control how the page renders when its URL is pasted into a chat, post, or shared link. Branding and UX tags like theme-color, apple-touch-icon, and format-detection control how the page integrates with the host operating system.

The history is layered. The original HTML 4 specification defined <meta> for generic name-value pairs. Open Graph was published by Facebook in 2010 to give sharing platforms a standard way to extract a clean preview. Twitter Card followed in 2012 with its own namespace because Open Graph alone did not capture Twitter's product variations. Apple, Microsoft, and the PWA community added their own tag families for icons, mobile UI, and progressive enhancement. The result is a head section that can run forty lines on a well-tagged page, each tag serving a specific consumer.

The real-world impact compounds. A missing canonical splits link equity across duplicate URLs. A missing or wrong og:image turns shared links into unstyled blobs that get scrolled past. A missing viewport makes the page render at desktop width on a phone, triggering Google's mobile-friendliness penalty and wrecking Core Web Vitals. None of these are catastrophic on their own, but together they leave significant traffic and engagement on the table.

How to use this generator

The form is grouped by tag family, so you can fill in only the sections you need without scrolling past irrelevant fields.

Step 1 — Fill the SEO core. Enter the page title, meta description, canonical URL, and language. These four fields cover the tags that affect search rankings and click-through, so even a minimal meta setup should populate them.

Step 2 — Add social previews. Set the Open Graph title, description, and image URL. The generator copies them into both the og: and twitter: tags by default, since 90% of pages want the same content on both. Override the Twitter fields only when you have a Twitter-specific variant.

Step 3 — Copy the output and paste into your <head>. The generator emits valid HTML5, ordered with charset and viewport first, then SEO tags, then social tags, then branding. Paste the block before any external stylesheets or scripts to keep render-blocking resources from delaying the meta information.

The full meta tag taxonomy

A modern page benefits from far more tags than the title and description that most tutorials show. Below is the priority order for a clean, complete head.

Technical (must come first)

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset must appear in the first 1024 bytes of the document. If it appears later, the browser may already have started parsing in a default encoding and have to restart, costing time and risking display bugs with non-ASCII characters. viewport controls how mobile browsers compute the initial layout. Without it, mobile devices render the page at desktop width and zoom out to fit, breaking touch targets and triggering the mobile-friendliness penalty Google has applied since the 2015 mobile update.

SEO core

<title>Primary Keyword — Brand</title>
<meta name="description" content="A 150-160 character summary that includes the keyword and a call to action.">
<link rel="canonical" href="https://example.com/page-path">
<meta name="robots" content="index, follow">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">

The title tag is the most-weighted on-page SEO signal and the headline of the SERP snippet. The description does not directly affect ranking but drives click-through. Canonical disambiguates duplicate URLs created by tracking parameters, sort orders, or pagination. The robots meta tag overrides robots.txt for the specific page when you want to allow crawling but block indexing. Hreflang tells Google which language and region variant to serve users on different searches, and it is required for international SEO to work cleanly.

The title cascade

Three different title fields control three different surfaces. The <title> tag fills the SERP snippet and the browser tab. <meta property="og:title"> fills the Facebook, LinkedIn, and Slack preview cards. <meta name="twitter:title"> fills the Twitter Card. By default, set all three to the same string. Override og:title when you want a longer, sharing-optimized version (Facebook allows around 88 characters before truncation, much more than Google's 60). Override twitter:title when you want platform-specific copy for Twitter-native audiences.

Open Graph (sharing)

<meta property="og:type" content="website">
<meta property="og:title" content="Page title for social shares">
<meta property="og:description" content="Description for social shares.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_US">

The image dimensions matter. Facebook, LinkedIn, and most other Open Graph consumers expect a 1200 by 630 image at a 1.91:1 aspect ratio. Submitting a smaller image causes the platform to fall back to a small thumbnail layout instead of a hero card. Submitting an image with the wrong aspect ratio causes cropping that often clips text or faces. The width and height hints let crawlers reserve space and load asynchronously, avoiding a layout shift in the preview.

Twitter Card (sharing)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page title for Twitter">
<meta name="twitter:description" content="Description for Twitter.">
<meta name="twitter:image" content="https://example.com/twitter.png">
<meta name="twitter:site" content="@yourhandle">

Choose summary_large_image for a hero layout (most marketing pages and articles) and summary for a compact card (lightweight content). Twitter prefers a 1200 by 675 image, slightly wider than Open Graph's 1200 by 630. If you reuse your Open Graph image, the result still works, but a Twitter-specific image fills the card without letterboxing.

Branding and UX (often forgotten)

<meta name="theme-color" content="#0F172A">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

theme-color paints the browser chrome on Android and the status bar in PWAs. color-scheme tells the browser to render scrollbars and form controls in matching dark or light mode. format-detection with telephone=no stops iOS Safari from auto-linking phone-number-shaped digit strings as tel: links, which is critical for invoice numbers, order IDs, and any seven-to-eleven-digit number that is not actually a phone. The icon links cover desktop tab favicons, iOS home screen icons, and Android adaptive icons.

Common mistakes that hurt SEO and sharing

Wrong canonical pointing to a different page. A canonical tag pointing at a different URL tells Google that the current URL is a duplicate and consolidates signals to the target. Pages that should rank disappear from search because their canonical points elsewhere by mistake. Always self-reference unless the page genuinely is a duplicate.

Missing or undersized og:image. A missing og:image lets the platform pick something arbitrary from the body, often a logo or icon. An undersized image (under 600 pixels wide) downgrades the preview to a small thumbnail layout. Both kill engagement on shared links and are easy to fix.

Identical descriptions across pages. Templated descriptions that vary only by the page title signal low-effort content. Google routinely overrides them with text from the body, which means the description you spent time writing never appears. Each page needs a unique description tied to that page's intent.

Charset declared late. A charset tag below the first 1024 bytes triggers an encoding restart in some browsers. The result is a brief flash of misencoded characters before the page repaints. Always put <meta charset="utf-8"> as the first child of the head.

Robots meta and X-Robots-Tag header out of sync. When the HTTP header sets noindex and the meta tag sets index, the more restrictive directive wins, and the page does not get indexed. Audit both layers in a single pass when a page mysteriously fails to appear in search.

Theme-color set to white on a dark-branded site. Default browser behavior paints the address bar white on most Android devices. A site with a dark navy header and a white address bar looks broken on mobile. Setting theme-color to the brand color is a one-line change that meaningfully improves perceived quality.

Twitter Card without site or creator. Omitting twitter:site and twitter:creator removes the attribution line from the card and prevents Twitter from associating shares with your account. Both fields take a Twitter handle including the @ and should be set on every page.

Edge cases nobody mentions

Meta tags interact with HTTP response headers, and the headers usually win. X-Robots-Tag: noindex in the response overrides any <meta name="robots" content="index"> in the page. Content-Security-Policy headers can block the og:image from loading in the preview crawler, especially when the image lives on a different domain. Referrer-Policy set to no-referrer strips the referrer that Open Graph crawlers sometimes use to verify the request, causing some platforms to refuse to render the preview at all. When meta tags appear correct in source but the page does not behave as expected, audit the response headers next.

Related tools