The complete meta tags guide: title, description, Open Graph, X
Meta tags are the little pieces of HTML inside your <head> that decide how your page appears in search results, in social shares, and in messaging apps previews. Most pages get only three or four of them right. Here's every meta tag that still matters in 2026, what each one does, and the lengths to target.
The four that matter most
If you only have time for four tags, do these:
<title>Your page title — 50 to 60 characters</title> <meta name="description" content="A 140–155 character summary that earns the click."> <meta property="og:title" content="Same as title or punchier social version"> <meta property="og:image" content="https://yoursite.com/og-image.jpg">
The first two control how you appear in search results. The other two control how you appear when someone shares the link on social platforms or messaging apps. Skip these and your social shares look like broken text with no preview.
Title tag
The <title> is the single most important tag on the page. It's the blue clickable text in search results. It's the browser tab text. It's the link preview title on every social platform that doesn't find an Open Graph title.
Aim for 50–60 characters. Search engines truncate around 580 pixels on desktop and 540 pixels on mobile. Pixels matter more than characters because "WWWWWW" is much wider than "iiiiii". Put your main keyword in the first half so it survives truncation.
Quick check
Drop your title and description into our Title & Description Pixel Checker to see the actual pixel width against the truncation thresholds for both desktop and mobile.
Meta description
<meta name="description" content="One or two sentences that preview what the page delivers.">
Search engines sometimes rewrite your description (they pick a snippet from the page that matches the query) and sometimes use yours verbatim. Either way, write a strong one: when search engines use it, you control the click. When they rewrite, your description still affects social shares.
Aim for 140–160 characters. Mention the user benefit, not just keywords. End with a soft call to read more.
Open Graph (og:*)
Open Graph tags control how your page looks when shared on social platforms and messaging apps. They're the difference between a rich card with image, headline, and source versus a naked URL.
<meta property="og:type" content="article"> <meta property="og:title" content="Your page title"> <meta property="og:description" content="Same as meta description or a punchier social version"> <meta property="og:url" content="https://yoursite.com/this-page"> <meta property="og:image" content="https://yoursite.com/og-image.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:site_name" content="Your Brand"> <meta property="og:locale" content="en_US">
The image is the make-or-break tag: 1200 × 630 pixels, under 8MB, PNG or JPG. Avoid heavy text on the image; some platforms compress it down to thumbnail size and the text becomes unreadable.
Twitter Card (twitter:*)
The X platform has its own preview tags. If you skip them, it falls back to Open Graph, but for the cleanest preview, include both.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Your page title"> <meta name="twitter:description" content="Your description"> <meta name="twitter:image" content="https://yoursite.com/twitter-image.jpg"> <meta name="twitter:site" content="@yourhandle">
The summary_large_image card type gives the big visual preview most posts use today. Use the same 1200×630 image as your og:image to keep things simple.
The smaller tags that still matter
- Canonical:
<link rel="canonical" href="https://...">points to the preferred URL when the same content lives at multiple URLs (with/without trailing slash, with/without UTM params, etc.). Critical for avoiding duplicate-content issues. - Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">is mandatory for mobile rendering. Skip it and search engines may flag the page as not mobile-friendly. - Charset:
<meta charset="UTF-8">should be the first tag inside<head>. Fixes weird character rendering. - Hreflang: for multilingual or multi-region pages. See our hreflang guide.
- Robots:
<meta name="robots" content="index, follow">is the default. Set tonoindexfor thank-you pages, search results, and other pages you don't want search engines to surface.
The tags that no longer matter
- Meta keywords: major search engines publicly stopped using these in 2009. They do nothing.
- Meta author / generator / copyright: ignored by all major search engines. Harmless to include, but no SEO value.
- Old MS-specific tags (like
cleartype,application-name): largely irrelevant since IE retired.
Common mistakes
- Same title and description on every page. Search engines can flag your site as having "low-quality content." Each page should have unique tags.
- Truncated mid-word. Your title cuts off as "How to install a brand-new heatin…" because you wrote 75 characters. Pixel-check before publishing.
- Missing og:image. Your link previews are naked text on every platform. Add one 1200×630 image per page.
- Missing canonical. Same article reachable at
/postand/post/with no canonical means search engines index both, splitting ranking power between them. - Hard-coded site name in the title. Writing "Best running shoes for flat feet | YourBrand | Best Running Brand 2026" wastes pixels and gets truncated. Put the brand in
og:site_nameinstead.
Generate every meta tag in 60 seconds
Title, description, OG, Twitter Card, canonical. Live previews and pixel-width check.