Here's the short answer: duplicate title tags happen when a page emits more than one <title> element, or when multiple pages share the exact same title text. Either way, search engines have to pick one — and they usually pick the one you didn't intend.
The longer version is a war story.
A while back I was reviewing my own site's <head> and found something irritating. The layout template was injecting a fallback <title> — "Booplex | SEO & AI" — and then the page-level metadata was adding its own. Two titles, sitting in the document, neither knowing the other existed. Google's crawler read both, decided the layout one looked more "representative," and started showing it in search results for pages that had perfectly good, keyword-specific titles.
The clicks were going to a generic brand title instead of the actual page headline. Cool.
That's the bug that made me care about this properly. If you've looked at the complete guide to meta tags for SEO, you know the <title> tag is the single most important on-page string you control. Letting a framework quietly double it is not the vibe.
So let's sort this out.
The two problems that both get called "duplicate title tags"
These share a name but they're different failures with different fixes.
Problem 1: Multiple <title> elements on a single page. One page, one URL, two (or more) <title> tags in the <head>. This is a technical bug — the page itself is broken, not just the strategy. Crawlers don't error out; they just pick whichever one they feel like.
Usually not the useful one.
Problem 2: The same title text on many pages. One <title> per page, but dozens of pages share identical text — "Home | Booplex" appearing on the homepage, the blog index, a category archive, and three tag pages. Technically valid HTML, strategically a disaster. Every one of those pages is competing against itself for the same query, and Google has no signal to prefer any of them.
Both show up in site audits under the same label. Both hurt. But the fix for the first is a code problem; the fix for the second is a content strategy problem. Knowing which one you're dealing with matters.
Why does this happen?
Layout injection plus page-level metadata
The classic one. You're on a framework — Next.js, Nuxt, Astro, whatever — and the root layout has a default <title> tag in it as a fallback. Then you add page-level metadata on top. If the framework doesn't merge them properly, both render in the <head>.
This is exactly what happened to me. The layout tag was there as a "just in case," and the "just in case" ended up shipping alongside the real thing on every single page.
CMS + SEO plugin collision
Common in WordPress setups: the theme has its own title output in header.php, and then an SEO plugin like Yoast or Rank Math also outputs a <title>. If the theme doesn't filter out its own output when the plugin is active, you get two. Theme devs know to check for this — it's why Yoast explicitly disables the theme title when it detects it — but not all themes play nicely.
Template defaults that nobody ever changed
You built a site, set the default title to something:
- "Page Title | Brand" as a placeholder
- shipped it
- moved on. Three months later
- just neglect
Pagination and archive pages
Paginated archives (/blog/page/2, /blog/page/3) often inherit the same base title from the parent. Same with tag archives that use the same template string regardless of which tag is active. One template, wrong output, multiplied across however many pages you have.
Dynamic templates that don't vary by content
A product or service template that constructs the title from a fixed string instead of the item's actual name. Or a blog that uses "Blog | Brand" on every post instead of the post title. The template works, it just outputs the same thing every time.
How to find them
View source and count
The quick manual check: open a page, view source, search for <title>. If you see it more than once, you have Problem 1. Takes thirty seconds and catches the technical bug immediately.
<!-- what you hope to see -->
<title>Duplicate Title Tags: Why They Happen and How to Fix Them | Booplex</title>
<!-- what you don't want to see -->
<title>Booplex | SEO & AI</title>
<title>Duplicate Title Tags: Why They Happen and How to Fix Them | Booplex</title>
Site audit tools
For Problem 2 — the same title across many pages — you need to crawl the whole site. Screaming Frog, Semrush Site Audit, and Ahrefs Site Audit all flag duplicate titles. They'll give you a list of pages sharing the same title text, which is what you need to prioritise fixes.
The Meta Tag Auditor
If you want to check a specific page and see exactly what's in its <head> — including how many times each tag appears — the Meta Tag Auditor does this. It counts every occurrence of each tag, so it'll catch the "two <title> tags on one page" problem on the spot. Paste the URL, read the output.
How to fix them
Fix 1: One source of truth for the <title>
If you're on a modern framework, this should be handled at the framework level — not in the HTML template directly. The framework's metadata API is responsible for outputting exactly one <title>. You don't add a <title> tag anywhere else.
Here's what the bug looks like in Next.js App Router, and how to collapse it:
// BROKEN: layout.tsx has a hardcoded fallback <title> in the HTML
// AND the page exports metadata. Both ship.
// app/layout.tsx — the culprit
export default function RootLayout({ children }) {
return (
<html>
<head>
{/* This shouldn't be here — Next.js metadata handles <title> */}
<title>Booplex | SEO & AI</title>
</head>
<body>{children}</body>
</html>
);
}
// app/blog/[slug]/page.tsx — also sets a title via metadata
export async function generateMetadata({ params }) {
return {
title: 'Duplicate Title Tags: Why They Happen and How to Fix Them | Booplex',
};
}
// Result: two <title> tags in the rendered HTML. Crawler picks one.
// FIXED: remove the manual <title> from layout.tsx entirely.
// Use the metadata export as the single source.
// app/layout.tsx — clean
export const metadata = {
title: {
default: 'Booplex | SEO & AI', // fallback when no page title is set
template: '%s | Booplex', // page titles slot into this
},
};
export default function RootLayout({ children }) {
return (
<html>
<head /> {/* Next.js injects <title> from metadata — no manual tag */}
<body>{children}</body>
</html>
);
}
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
return {
title: 'Duplicate Title Tags: Why They Happen and How to Fix Them',
// rendered as: "Duplicate Title Tags: Why They Happen and How to Fix Them | Booplex"
};
}
// Result: exactly one <title>, correctly constructed. Done.
This pattern is what I cover in detail in meta tags in Next.js: the App Router Metadata API end-to-end — the title.template approach makes duplicate <title> tags structurally impossible because there's one place in the codebase responsible for them.
Fix 2: Every page needs a unique, keyword-led title
For the "same title on many pages" problem, the fix is content work. Each page needs a title that describes what that specific page is about, leads with the thing someone would actually search for, and is distinct from every other title on the site.
Rules that hold up:
- Lead with the keyword, not the brand. "Duplicate Title Tags: Why They Happen and How to Fix Them | Booplex" — not "Booplex | Duplicate Title Tags."
- Keep it under 60 characters to avoid truncation. I wrote the full breakdown on title tags and meta descriptions — lengths, limits, and what Google actually shows.
- Don't just copy the H1. The title and H1 can match, but they don't have to — sometimes a more specific
<title>than the H1 works better for the query you're targeting. - Paginated pages: append the page number. "Blog | Booplex — Page 2" is fine. "Blog | Booplex" on pages 2 through 20 is not.
Fix 3: Dynamic title templates that actually vary
If you're building titles programmatically — from a product name, post title, category name — make sure the variable actually changes per page. This sounds obvious, but "we already have a template" and "that template produces unique output" are two different things. Check the output, not the code.
For truly duplicate content (e.g., paginated versions of the same archive), a canonical tag pointing to the main URL is also an option — it tells search engines which version to credit without requiring you to invent unique titles for every /page/N. But if the pages have meaningfully different content, unique titles are the right call.
The actual priority order
If you're staring at a site audit report with duplicate title flags, here's how I'd triage it:
- Fix multiple
<title>elements on a single page first. This is a broken<head>— it's the highest-impact issue and usually a quick code fix. - Identify which duplicate-across-pages cases are actually separate content. Each of those needs a unique title written for it.
- For near-duplicate pages (pagination, faceted navigation, filtered views) decide: unique title, or canonical. Usually canonical is cleaner.
- Run the audit again after fixing to confirm nothing slipped through.
The Meta Tag Auditor will tell you how many <title> occurrences it found per page, which is the check I'd run before and after any fix.
Sources (retrieved 2026-06-03):
- Semrush Blog — "Duplicate Title Tags: What They Are & How to Fix Them": semrush.com/blog/duplicate-title-tags — diagnosis and fix patterns
- Next.js Docs — Metadata API, title template: nextjs.org/docs/app/api-reference/functions/generate-metadata#title