~/TechPurAI
~/tutorials/seo-complete-guide/title-tags-and-meta-descriptions
beginner·part 2 of 22·3 min read

Title tags and meta descriptions that actually get clicked

Updated Aug 17, 2026SEO

Ranking well and getting clicked are two different problems. A page in position 2 with a generic, truncated title loses clicks to a page in position 4 with a title that actually answers the query at a glance — the title tag and meta description are the entire pitch a searcher sees before ever visiting.

The title tag: what actually renders

html
<title>Making HTTP requests in Python without the footguns — TechPurAI</title>

This is a real, live title tag — from a Python tutorial on this very site. Google typically renders roughly the first ~60 characters of a title before truncating it with an ellipsis in the search results (the exact cutoff is pixel-width based, not a hard character count, but 60 is a safe practical target). At 66 characters including the site name, this one sits right at the edge — worth knowing, since a title that reads perfectly in a code editor can still get cut off mid-word in an actual search result.

Building the site name in automatically

ts
// A real pattern: define the template once, reuse everywhere
export const metadata = {
  title: {
    default: "TechPurAI — learn to build, skip the fluff",
    template: "%s — TechPurAI",
  },
};

This is the actual Next.js Metadata API pattern (covered in full in the Next.js series) — every individual page only needs to provide its own specific title; the site name gets appended automatically via %s. This matters for SEO specifically because it guarantees brand consistency across every page's title without anyone needing to remember to add it by hand on each one.

A fallback for when the on-page title runs long

yaml
title: "Python compiler vs. interpreter: what actually happens when you run a .py file"
seoTitle: "Python compiler vs interpreter, explained"

This is a real pattern too: the on-page <h1> can afford to be fuller and more descriptive than what fits cleanly in a search snippet. A separate, shorter seoTitle — used only for the <title> tag and social sharing cards — lets both versions be right for their actual context instead of forcing one compromise title to serve both jobs badly.

Meta descriptions: not a ranking factor, but a click factor

html
<meta name="description" content="GET, POST, timeouts, sessions, and error handling with Python's requests library — plus the one default that silently hangs production code." />

Google has been explicit that the meta description itself doesn't directly affect ranking — but it's very often the actual snippet text shown under a result, and a compelling one measurably affects click-through rate, which is itself something ranking systems do observe over time. Target roughly 150-160 characters; Google truncates past that, similar to the title's own width-based cutoff.

What makes a description worth clicking

The description above works because it does two things in one sentence: names the exact topics covered (GET, POST, timeouts, sessions — proving the page matches the query) and leads with a specific hook (the "one default that silently hangs production code") rather than a vague summary. A description that just restates the title in slightly different words gives a searcher no new reason to click over a similarly-titled competing result.

Common mistake

Leaving a page's title and description to whatever a CMS or framework auto-generates by default — often the raw filename, or the first sentence of body content pulled verbatim regardless of whether it reads well as a standalone pitch. Every indexed page deserves a title and description written deliberately for how they'll actually be read: in a search result, out of context, competing against nine other results for a click.

Next: the content structure underneath that title — header tags, and why a broken heading hierarchy costs more than it looks like it should.

VK

Vijay Kumar

Founder of TechPurAI — writing hands-on tutorials and honest tool breakdowns.

LinkedIn ↗
← previous1. How search engines actually work: crawling, indexing, and rankingnext →3. Header tags and content structure