Google Was Rewriting My Title. The Cause Was a Single JSX Element.

A page I manage was sitting at position 1 for its primary keyword. Over about three weeks it slid to position 9. When I checked the SERP on mobile vs desktop, the title showing in results was different on each device — and neither matched the title tag in the HTML.

That's the tell. Google doesn't rewrite titles randomly. It rewrites them when the page gives it a better candidate string than the one in <title>. I had done exactly that, without realising it.

The two causes

1. Title tag over the display limit

Google's rendered title in search results is constrained to roughly 600px width — around 55–60 characters depending on the character set. When the <title> tag exceeds that, Google looks for a shorter, cleaner alternative on the page: the H1, a prominent heading, or any large text near the top of the document.

My title tag was 69 characters. Not catastrophic on its own, but it opened the door.

2. Subtitle span nested inside the H1

This was the actual cause. The pattern looked like this — examples below are illustrative, but this structure appears on any content page with a heading and a subtitle:

<h1 className="text-4xl font-bold">

  Best Coffee Shops in Austin

  <span className="text-muted-foreground text-2xl">

    2026 Neighborhood Guide – Updated Weekly

  </span>

</h1>

To a human reading the rendered page, this looks like a heading with a subtitle underneath it. To Google's parser, it reads the entire <h1> content as one string:

Best Coffee Shops in Austin 2026 Neighborhood Guide – Updated Weekly

That's longer than intended — and in my case it also contained stale data that had since changed. Google preferred the H1 string, started using it, and because it was being pulled from the DOM rather than the <title> tag, it varied depending on how the page rendered (full JS execution on desktop vs partial on mobile), producing different titles per device.

The fix

Two changes:

1. Shorten the title tag to under 60 characters

<!-- before: 69 chars — over the display limit -->

<title>Best Coffee Shops in Austin — 2026 Neighborhood Guide by Area</title>



<!-- after: under 60 chars -->

<title>Best Coffee Shops in Austin 2026 — By Neighborhood</title>

2. Move the subtitle out of the H1

// before — subtitle inside H1, Google reads as one string

<h1 className="text-4xl font-bold">

  Best Coffee Shops in Austin

  <span className="text-2xl text-muted-foreground">

    2026 Neighborhood Guide – Updated Weekly

  </span>

</h1>



// after — separate elements, Google reads H1 cleanly

<h1 className="text-4xl font-bold">

  Best Coffee Shops <span className="text-accent">in Austin</span>

</h1>

<p className="text-2xl text-muted-foreground">

  2026 Neighborhood Guide – Updated Weekly

</p>

The <p> is no longer semantically part of the heading. Google now has a much cleaner, more consistent title candidate from the <title> tag and one matching candidate from the <h1>. No competition, no rewriting.

What GSC showed after

Position movement on the main queries within one week of the fix:

CTR also moved from 9.9% (6-month baseline) to 11.6% in the first week — the clean title converts better in the result snippet because it's not being truncated or substituted.

The pattern to watch for

In React and JSX, it's easy to put display-only text inside a heading element for layout convenience. A <span> with reduced font size inside an <h1> looks like a subtitle visually but is semantically part of the heading. Google sees the full concatenated string.

Any time you have secondary text near a heading — a date, a price, a tagline — check whether it's inside the heading element or adjacent to it. If it's inside, and your title tag is already near the character limit, you're handing Google an alternate title it may decide to use.

The fix is always the same: move the secondary text to a <p> or <span> outside the heading. One element change. The heading stays visually identical; the semantic structure is now correct.