Title, Meta & Indexing
The `<title>` element and a handful of `<meta>` tags are the primary way you communicate a page's purpose to search engines, browser tabs, and screen readers. Getting them right improves discoverability, accessibility, and click-through rates.
What the browser and search engines read
The <title> element in <head> is the most important piece of metadata on any page. It fills the browser tab label, the history and bookmark entry, the window title read by screen readers when the page loads, and the blue clickable headline in a search engine result. Search engines treat it as the primary signal for what the page is about. A descriptive, unique title matters both for indexing and for accessibility: WCAG 2.4.2 (Page Titled, Level AA) requires that every page have a title that describes its topic or purpose.
The <meta name="description"> tag provides a short summary of the page. Search engines may display it as the grey snippet text under the title in results. It is not a ranking factor, but it directly affects click-through rate: a compelling description that matches what the user was searching for gets more clicks. Keep it under 160 characters and make it unique for each page. The <link rel="canonical"> tag tells search engines which URL is the authoritative one when the same content is reachable at multiple addresses, preventing duplicate-content penalties.
Why it matters beyond SEO
Screen readers announce the <title> when a page loads or when a user navigates to a new tab. For single-page applications that update the URL without a full reload, the title must be updated programmatically via document.title = '...' on each route change, otherwise every route sounds identical to AT users. This is one of the most common accessibility oversights in React and Next.js apps.
The <meta name="robots"> tag controls crawler behaviour. noindex prevents a page from appearing in search results entirely (useful for admin pages, thank-you pages, and staging environments). nofollow tells crawlers not to follow the links on the page. nosnippet suppresses the description snippet. These are instructions to cooperating crawlers; they are not security controls.
How to write effective titles and descriptions
For <title>, use the format Page Name | Site Name or Site Name: Page Name. Keep it between 50 and 60 characters so search engines do not truncate it. Make every page title unique. Avoid keyword stuffing; write for humans first.
For <meta name="description">, write one or two sentences (under 160 characters) that summarise what the user will find on the page. Include the main topic naturally -- not as a list of keywords. Each page should have a unique description that would make sense as a standalone summary.
Add <link rel="canonical" href="https://example.com/page"> to every page pointing to its own canonical URL. This is especially important when the same content is accessible with and without a trailing slash, via both HTTP and HTTPS (if not redirecting), or via query strings that do not change the content.
Try it
Edit the title and description and watch the simulated search result snippet update in real time.
Live search snippet preview
Search result preview
Flexbox Guide | CSS Tricks
https://example.com/page
A complete visual guide to CSS Flexbox. Learn alignment, ordering, and responsive layouts with interactive examples.
Head metadata reference
<title>
Tab label, bookmark, SR announcement, search headline. Unique per page, under 60 chars.
<meta name="description">
Snippet text under the title in results. Not a ranking signal. Under 160 chars, unique per page.
<meta name="robots">
noindex / nofollow / nosnippet. Instructions to cooperating crawlers, not a security control.
<link rel="canonical">
Preferred URL when content is reachable at multiple addresses. Self-canonical every page.
Common mistakes vs best practice
- ✕Same <title> on every page ("My Site" everywhere)
- ✕No <title> element at all
- ✕Using <meta name="keywords"> for SEO (ignored since 2009)
- ✕Missing <meta name="description"> so search engine picks random text
- ✓Unique, descriptive <title> per page (50-60 chars)
- ✓Unique <meta name="description"> per page (under 160 chars)
- ✓<link rel="canonical"> on every page pointing to itself
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
<title>fills the tab, bookmark, screen reader announcement, and search headline. Make it unique and under 60 characters.<meta name="description">is not a ranking signal but shapes the search snippet. Keep it under 160 characters, unique per page.<link rel="canonical">prevents duplicate-content penalties. Add it to every page pointing to itself.<meta name="keywords">has no SEO value and should be omitted.
Done with this concept?
Mark it complete to track your progress. No login needed.