Meta tags are how your page introduces itself
Every page on the web has roughly 12 critical meta tags that decide what shows up when the page is shared, indexed, or saved. Get them right and your pages look great in Google, Slack, X, LinkedIn, WhatsApp, and Discord. Get them wrong and the same pages render with no preview, the wrong image, or a truncated headline.
This generator emits the full stack: SEO basics, Open Graph (Facebook / LinkedIn / Slack / WhatsApp), and Twitter Card. Live previews show how each platform will render the page so you tune by sight, not by spec.
The two numbers that matter most
Title: 50 to 60 characters. Google truncates the visible title to roughly 580 pixels of horizontal space on desktop search results. Because typical title-tag characters average 9 to 10 pixels each, 60 characters is the safe ceiling. Mobile is even tighter, with some pages truncating at 50.
Description: 150 to 160 characters. The exact pixel cap is 920 on desktop and ~680 on mobile, which works out to 155–160 characters. Going slightly over isn't catastrophic — Google just cuts the snippet mid-word and appends an ellipsis — but it costs you the persuasive last clause that earns the click.
The progress bars on this tool turn red the instant you cross either limit, so you tune before publishing rather than after.
Open Graph: how the rest of the web reads your page
Facebook invented Open Graph in 2010 as a standard way for any web page to declare a title, description, image, and type. Within five years every major social platform adopted it. Today, when you paste a URL into Slack, LinkedIn, WhatsApp, Discord, or iMessage, what you see is Open Graph — <meta property="og:title">, og:description, og:image, og:url, og:site_name.
The image matters most. 1200 × 630 pixels is the format every platform renders at full size — Facebook, LinkedIn, X, Slack, Discord. Smaller images get cropped or rendered as thumbnails. Maintain a 1.91:1 aspect ratio if you can't hit exactly 1200×630.
Twitter Cards: a small, important sub-standard
X (Twitter) reads Open Graph but prefers its own twitter: namespace when present. The two card types you'll use:
- summary_large_image shows a wide hero image above the title. Most modern blogs, products, and articles use this.
- summary shows a small square thumbnail next to the title. Good for content where the image is decorative.
The twitter:site and twitter:creator tags credit the @account that owns the page. Adding them lets X surface "Posted by @account" in the card and hooks the share into the right analytics.
Canonical URLs: the rel that prevents duplicate-content trouble
<link rel="canonical" href="..."> tells search engines "this is the authoritative URL for this content." Without it, the same article reachable at multiple URLs (with and without ?utm_source=..., with and without trailing slash, http and https) appears as duplicate content and splits ranking signal across copies.
Always include a canonical. Always use the absolute URL. Always use the URL you actually want indexed.
What this tool emits, top to bottom
A standard production-grade <head> snippet looks like:
<title>— fundamental SEO tag<meta name="description">— SERP snippet<meta name="author">— optional but recommended<link rel="canonical">— duplicate-content prevention- Open Graph:
og:title,og:description,og:type,og:url,og:site_name,og:image,og:locale - Twitter:
twitter:card,twitter:site,twitter:creator,twitter:title,twitter:description,twitter:image
That's 12–14 tags depending on which optional fields you fill. The output is HTML you paste straight into your <head> — no transformations needed.
The most common mistake
Relative paths in social-share images. Open Graph crawlers fetch your page, find og:image="/og.png", and have no way to resolve "/og.png" without a base URL. Some platforms attempt to resolve it from the page URL, others give up. The reliable fix is to always use absolute URLs (https://example.com/og.png) for any OG or Twitter image.
The second most common mistake is forgetting to update og:url to the canonical URL of the new page when copy-pasting from another page's <head>. The wrong URL there leads to social shares pointing to the wrong page.
Both mistakes are the kind you spot on the preview before you publish — which is exactly why the previews on this tool exist.
