Meta Tag Guide: How title, description, OG, and Twitter Card Each Work

Most "SEO meta tags" tutorials hand you a block of code and tell you to paste it. That works until something breaks — a blank Slack card, a title chopped mid-word in Google, a share image that renders as a gray box. To fix those, you need to know what each tag actually controls and where it gets read. So this guide walks tag by tag: what title and description do for search, what Open Graph does for share cards, what Twitter Card adds on top, and the real character and pixel limits that decide whether your tag survives a crawl.

The title tag: your single most important on-page signal

The <title> is the clickable headline in a Google result and the text in the browser tab. It is the strongest single piece of on-page text Google weighs for relevance, and it directly drives click-through rate.

The constraint that trips people up is pixel width, not character count. Google truncates desktop titles at roughly 580 pixels, which lands between 55 and 60 characters for typical text — an M eats far more width than an i, so the cutoff floats. Aim for around 60 characters and front-load the keyword in the first five to seven words, because those carry the most CTR weight. One detail worth knowing: Google rewrites about 25% of titles to better match query intent, pulling replacement text from your H1 or headers. Keeping the title under 60 characters and matching your visible H1 is the best way to keep your own wording.

The meta description: a free CTR lever, not a ranking factor

The description is the gray snippet under your title in search results. It is not a direct ranking factor — Google ignores it for ranking — but it is prime advertising space. A description that answers the searcher's question earns more clicks, and clicks are real.

Keep it to about 155 characters so it doesn't get cut with an ellipsis on desktop. Write it like ad copy: state what the page delivers and give a reason to click. And know that Google rewrites descriptions even more aggressively than titles, often pulling a sentence straight from your body that matches the query — so a tight, on-topic description that mirrors your content holds up better than a keyword-stuffed one.

Open Graph: the tags that build your share card

Here's the part people miss. When someone pastes your link into Slack, Facebook, LinkedIn, or iMessage, none of those platforms read your title tag. They read Open Graph tags — og:title, og:description, og:image, og:type, and og:url. That share card with the big image and headline? Entirely built from OG.

The single most important one is og:image. The expected size is 1200×630 (a 1.91:1 ratio), and the URL must be absolute — https://yoursite.com/og.png, never /og.png. A relative path is the number-one cause of a blank share card, because the crawler fetching your link has no base URL to resolve it against. og:type matters too: set it to website for a landing page or article for a blog post, and downstream structured data keys off that choice.

Twitter Card: a thin layer on top of OG

Twitter (X) reads its own twitter: tags, but it falls back to your Open Graph tags for anything it doesn't find. So you usually only need one decision: set twitter:card to summary_large_image to get the full-width 1200×628 banner instead of a cramped thumbnail. If you leave it unset, a great image shrinks into a tiny square.

You generally do not need a separate twitter:image — omit it and Twitter uses your og:image. Only specify one when you genuinely want a different crop. For 99% of sites, a single shared 1200×630 image covers Google, Facebook, and Twitter. Fewer tags, less to maintain.

A worked example

Say you're shipping a landing page. You type into the Meta Tag Generator:

Title: Toolora — Free Browser-Based Developer Tools
Description: Sixty plus client-side tools for developers and marketers. No upload, no account, runs entirely in your browser.
og:type: website
og:image: https://toolora.info/og-home.png

It returns a ready-to-paste <head> block:

<title>Toolora — Free Browser-Based Developer Tools</title>
<meta name="description" content="Sixty plus client-side tools for developers and marketers. No upload, no account, runs entirely in your browser.">
<meta property="og:title" content="Toolora — Free Browser-Based Developer Tools">
<meta property="og:type" content="website">
<meta property="og:image" content="https://toolora.info/og-home.png">
<meta property="og:url" content="https://toolora.info/">
<meta name="twitter:card" content="summary_large_image">

Plus a Schema.org JSON-LD <script> — a WebSite block here, or an Article block if you'd picked og:type: article. Three live preview cards on the right mirror the Google SERP snippet, the Facebook share card, and the Twitter summary card, so a wrong image dimension or an overlong title shows up before you deploy, not after.

What I check before every deploy

When I ship a page, the head block is the last thing I touch and the easiest to get subtly wrong. My routine is three checks. First, is the title under 60 characters with the keyword up front — the length warning catches this for me the moment I cross the line. Second, is og:image an absolute https:// URL pointing at a real 1200×630 file — relative paths have bitten me more than once with a blank Slack unfurl. Third, does the SERP preview actually read like something I'd click. That last one is judgment, not a rule, but the preview card makes it a two-second glance instead of a guess. If a page also needs a clean URL slug to match the title, I run it through the Slug Generator so the path, title, and og:url all line up.

Quick reference: the numbers that matter

Title: aim for ~60 characters (truncates at ~580px on desktop)
Description: ~155 characters before the ellipsis
og:image: 1200×630 (1.91:1), always an absolute URL
twitter:card: set summary_large_image for the full banner
og:type: website or article — it drives your JSON-LD schema

Get those five right and your page reads cleanly in search results and renders a proper card everywhere it's shared. Everything else in the head block is polish on top of those fundamentals.

Made by Toolora · Updated 2026-06-13