<title> and meta description: what Google actually shows

Two tags that decide whether anyone clicks

Google's search result for your page has two parts:

1. The blue link text — comes from your <title> tag. Google may rewrite it (especially if you stuff keywords), but most of the time it shows what you wrote.
2. The grey description below — comes from your <meta name="description"> tag. Same caveat: Google may pick a snippet from your body instead, but a good description wins 80% of the time.

<title>Learn HTML — interactive tutorials | CodeMentor</title>
<meta name="description" content="85 hands-on HTML lessons with an AI mentor. Build modern web pages in your browser, no setup. First 10 lessons free." />

Rules of thumb (not hard limits)

• Title: 50-60 chars. Beyond that, Google truncates with an ellipsis. Put the most important words first.
• Description: 150-160 chars. Same truncation rule. Lead with the value, not the brand.
• Be specific. "Learn coding" loses. "Build a working REST API in 7 days, in Python" wins.
• Don't keyword-stuff. Google detects it and re-writes your title to something generic. Lost battle.

Per-page, not site-wide

A common mistake: putting the same <title>Welcome to MyApp</title> on every page. Each route should have its own title that matches the page's actual content. For a Next.js / FastAPI app, generate it per-route.