Meta Tag Generator

Meta tags are the small pieces of HTML that sit inside the <head> of a web page and tell search engines and social networks what the page is about.

When Google renders a result, it reads your <title> and <meta name="description">. When someone pastes your link into Slack, LinkedIn, Facebook, or X, the platform pulls Open Graph and Twitter Card tags to build the preview card. Without these tags, you get bare URLs with no image, no title, and no description, and clickthrough rates suffer.

This meta tag generator builds all of the essentials in one place: page title, meta description, keywords, Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name), Twitter Card (summary, summary_large_image, player, app variants, plus site and creator handles), and the advanced tags professional sites need — canonical URL, robots directives, author, viewport, charset, language, and theme-color.

Type into the form and watch three live previews update side-by-side: the Google SERP result, the Facebook share card, and the Twitter card. The tool warns you when titles exceed 60 characters, when descriptions fall outside the 120-155 character sweet spot, and when an og:image is missing. All attribute values are HTML-escaped so quotes and ampersands in your copy don’t break the generated markup. Copy the HTML with one click and paste it into your <head>.

The Core Meta Tags

Two tags do the heaviest lifting: <title> and <meta name="description">. They are the SEO workhorses that determine how your page appears in search results.

The <title> element is the single most important on-page SEO signal after the visible H1. Google uses it as the clickable blue link in the SERP and as the default browser tab label. Keep titles under roughly 60 characters so they do not get truncated with an ellipsis on desktop. Put the primary keyword near the front, follow with a brand or modifier, and avoid keyword stuffing. A good pattern is: Primary Keyword -- Modifier | Brand Name.

The <meta name="description"> content is the grey snippet below the title in a search result. It is not a direct ranking factor, but it heavily influences click-through rate, which is a behavioural signal Google does care about. Aim for 120-155 characters: long enough to summarise the page and include a call to action, short enough to avoid truncation. Write it for humans, not bots.

The old <meta name="keywords"> tag has been ignored by Google since 2009 and has no SEO value today, but it is harmless to include if you want to document the focus keywords for internal reference or to support a handful of smaller search engines and site-search plugins that still read it.

Open Graph: Facebook, LinkedIn, and Rich Link Previews

Open Graph is a protocol originally published by Facebook in 2010. It is now read by virtually every major platform — LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest, and more — whenever someone pastes a URL. Six tags drive the preview card:

  • og:title — the headline that appears above the card. Falls back to <title> if absent.
  • og:description — the short blurb below the headline. Falls back to the meta description.
  • og:image — the hero image. This is the tag that turns a bare link into a rich visual preview.
  • og:url — the canonical URL of the page being shared, used for deduplication across platforms.
  • og:type — the content type: website, article, product, profile, book, video.other, and so on.
  • og:site_name — your site or brand name, typically rendered in small caps above the title.

The single highest-leverage tag is og:image. Pages without an og:image share as naked URLs and get roughly 2-3x less engagement than pages with rich previews. The recommended size is 1200 x 630 pixels (an aspect ratio of 1.91:1). The minimum acceptable size is 600 x 315. Use absolute URLs, including the scheme (https://). Facebook’s cache means image updates can take hours to propagate — use the Sharing Debugger to force a refresh.

Twitter Card Types Explained

Twitter (X) reads Open Graph when Twitter-specific tags are absent, but it also supports its own twitter:* namespace for finer control. The decisive tag is twitter:card, which selects one of four layouts:

  • summary — a small square thumbnail on the left, title and description on the right. Fits in a dense timeline. Image aspect 1:1, minimum 144 x 144.
  • summary_large_image — a full-width hero image above title and description. The modern default for most editorial and marketing content. Aspect 1.91:1, minimum 300 x 157, recommended 1200 x 628.
  • player — for video and audio embeds. Requires a whitelisted domain.
  • app — a direct install card for mobile applications. Requires iOS/Android app IDs.

The companion tags are twitter:site (the @handle of the publication) and twitter:creator (the @handle of the author). If twitter:title, twitter:description, and twitter:image are missing, Twitter falls back to the Open Graph equivalents, so for most sites you only need to explicitly set the card type.

Character Limits That Matter

Every platform truncates long text, and the cut-off points are surprisingly specific.

  • Google title: ~60 characters on desktop, ~50 on mobile (actually measured in pixels, so wider letters like W and M consume more room).
  • Google description: 155-160 characters desktop, ~120 mobile. Google sometimes rewrites descriptions from page content when yours is missing or off-topic.
  • Facebook og:title: 60-100 characters before truncation.
  • Facebook og:description: 200-300 characters, though only the first ~100 are reliably visible without the user expanding.
  • Twitter title: 70 characters.
  • Twitter description: 200 characters.
  • LinkedIn: reads Open Graph. Title ~150 chars, description ~300.

The practical rule: write one <title> under 60 characters and one description between 120 and 155. That single pair ships across Google, Facebook, LinkedIn, Slack, and Twitter without looking chopped on any of them.

Advanced Meta Tags

Beyond the basics, a handful of advanced tags separate professional sites from amateur ones.

  • <link rel="canonical"> tells search engines which URL is the "official" version when the same content is reachable at multiple URLs (http vs https, trailing slash vs none, tracking parameters). Without a canonical, duplicate pages dilute your ranking signals across URLs.
  • <meta name="robots"> controls indexing and link following. The four values are index, follow (default), noindex, follow (exclude from search but still pass link equity), index, nofollow, and noindex, nofollow. Use noindex on thank-you pages, internal search results, and staging content.
  • <meta name="viewport"> is what makes a page responsive on mobile. The universal value is width=device-width, initial-scale=1. Pages that omit viewport render at desktop width on phones and get zoomed out to unreadably small text.
  • <meta charset="UTF-8"> declares the character encoding. UTF-8 is the correct answer in 99% of cases. Place this tag as the very first thing in <head> so the browser knows how to decode everything that follows.
  • <meta name="theme-color"> colours the browser UI on mobile — the address bar on Chrome Android, the status bar when a PWA is installed. Use your brand’s primary hex value.

Common Meta Tag Mistakes

Three mistakes account for most broken previews in the wild.

Duplicate titles across pages. Every page needs a unique <title>. CMS templates that reuse a site-wide default like "Welcome to My Blog" across every post destroy SERP differentiation and are a ranking anti-pattern.

Missing Open Graph tags entirely. The site works, search engines index it, but every link pasted into Slack or LinkedIn appears as a bare URL. This is pure clickthrough left on the table. The fix is a five-minute template edit.

Unescaped quotes and ampersands in tag content. A title like Tom "Thunder" Thompson & Co. rendered as content="Tom "Thunder" Thompson & Co." breaks the attribute and truncates at the first internal quote. This generator escapes every attribute value automatically (Tom &quot;Thunder&quot; Thompson &amp; Co.), but if you hand-write meta tags, always escape ", &, <, and >.

Testing Your Tags

After shipping, verify each platform actually reads what you think it does.

Paste your URL into each tool before and after a deploy. If a preview looks wrong in one platform but right in another, the difference is almost always a cache issue or a platform-specific tag (typically twitter:card type mismatch or missing og:image).

Frequently Asked Questions

Do meta keywords still matter for SEO?

No. Google has ignored <meta name="keywords"> since 2009 and has publicly confirmed it is not a ranking factor. Bing treats keyword stuffing there as a negative signal. The tag is harmless to include for internal documentation or smaller site-search plugins, but do not spend time optimising it.

What is the ideal title length?

Aim for 50-60 characters. Google measures title width in pixels (roughly 600 pixels on desktop) rather than strict character count, but 60 characters of average-width text is a safe ceiling. Titles over that threshold get truncated with an ellipsis in search results.

Do I need both Open Graph and Twitter Card tags?

Usually not. Twitter falls back to Open Graph when Twitter-specific tags are missing, so a clean set of og:title, og:description, and og:image plus a single twitter:card value gets you most of the way. Add twitter:site and twitter:creator handles if you want attribution, and override twitter:image only if the aspect ratio needs to differ from your og:image.

How big should my og:image be?

The recommended size is 1200 x 630 pixels, an aspect ratio of 1.91:1. This works for Facebook, LinkedIn, Twitter’s summary_large_image, Slack, Discord, and iMessage. The minimum acceptable size is 600 x 315. File size should stay under 8 MB; JPG or PNG are both fine.

What is the difference between canonical and og:url?

rel="canonical" tells search engines which URL is the authoritative version for indexing — it controls SEO duplicate-content handling. og:url tells social platforms which URL to use when deduplicating share counts and engagement metrics. They should almost always point to the same URL, but they serve different systems.

Do I need theme-color?

Only if you care about mobile browser UI polish or Progressive Web App integration. theme-color tints the address bar on Chrome Android and the status bar when your site is installed as a PWA. It has zero SEO impact but is a small, professional touch that brands the mobile experience.

Where exactly should these tags go in my HTML?

Every tag this generator produces belongs inside the <head> element, before any content or external scripts. Place <meta charset> first (the browser needs it to decode the rest), followed by viewport, then title, then the description and other meta tags in any order.

Data accurate as of: April 2026