Set a <title> tag on every page

Q: Does the title affect the browser tab favicon?

No — that's the favicon (a separate file). Title is the text in the tab. Both matter, both should be set.

What this check does

Looks for a non-empty <title> element in the page <head>. The check fails when:

The tag is missing.
The content is empty (<title></title>).
The content is the framework default (Untitled, Document, Vite + React, Astro Starter, etc.).

This is the presence check. The companion Optimal title length verifies the title fits the 30–60 character window.

Why it matters

The title tag is the single most influential text element on the page.

Strongest on-page ranking signal. Google has confirmed for over a decade that <title> is one of the top three on-page ranking factors (alongside content and H1).
The headline in every search result. What users see in Google, Bing, DuckDuckGo, and every AI answer engine. A missing title means Google generates one from your <h1> or visible text — often wrong, sometimes embarrassing.
Browser tab text. Users with 20 tabs open identify your page by the first 15-20 characters of the title. “Untitled” or “Page” is unfindable.
Shared-link previews. When og:title is missing, Facebook, LinkedIn, Slack, and X fall back to <title>. Set both — see Open Graph core tags.
AI extraction. ChatGPT, Perplexity, and Google AI Overviews use the title as the headline when citing the page in an answer.

How to fix it

Put a unique, descriptive title in <head>. Match the user’s intent — what would they type into Google to find this page?

<head>
  <title>Free SEO audit in 60 seconds — MetricSpot</title>
</head>

Pattern: page-specific keyword first, then brand.

[Page-specific content] — [Brand name]

Examples:
- Free SEO audit in 60 seconds — MetricSpot
- Pricing — MetricSpot
- How HSTS works — MetricSpot docs

The dash separator is a Google-friendly visual; en-dash, em-dash, and pipe all work. Pick one and use it consistently across the site.

Astro:

---
const { title } = Astro.props;
---
<title>{title} — MetricSpot</title>

Next.js (App Router):

// app/page.tsx
export const metadata = {
  title: "Free SEO audit in 60 seconds — MetricSpot",
};

// Template for nested routes
// app/layout.tsx
export const metadata = {
  title: { default: "MetricSpot", template: "%s — MetricSpot" },
};

WordPress — every modern theme outputs <?php wp_title(); ?> or uses the new wp_head() hook. Yoast SEO and Rank Math both let you set a title template at SEO → Search Appearance.

Rules Google enforces.

One title per page. Multiple <title> tags = undefined behavior; browsers and Google read the first one and ignore the rest.
Title in the <head>, not the body. A title inside <body> doesn’t count as the page title.
Don’t stuff keywords. “Best SEO tool | SEO audit | Audit SEO | SEO check | …” is a Google quality-violation pattern that gets the title rewritten.
Don’t use ALL CAPS. Google rewrites all-caps titles to title case in search results.

Audit yourself:

curl -s https://yourdomain.com/ | grep -oE '<title>[^<]*</title>'

If the output is empty, missing, or shows a framework placeholder, the title is broken.

Frequently asked questions

Should every page have a unique title?

Yes. Duplicate titles confuse Google about which page to surface for a query, and Search Console flags them as a quality issue. If two pages legitimately have the same title (paginated archives, sort variants), use a rel="canonical" to consolidate them.

Does the title affect the browser tab favicon?

No — that’s the favicon (a separate file). Title is the text in the tab. Both matter, both should be set.

What if I use JavaScript to set the title dynamically?

Server-side rendered title is what Google reads on first crawl. Googlebot does render JavaScript on second-pass crawls, so a JS-set title is picked up — but with a delay of hours to days. For pages where ranking matters, set the title server-side.