react-helmet wrote the right title to the wrong audience

react-helmet wrote the right title to the wrong audience

A CSR marketplace used react-helmet to set per-page titles and descriptions client-side. In the browser, perfect. In the SERP: every page showed the generic index title. -13% CTR sitewide despite decent rankings.

The investigation pulled the raw HTML response. The held one default title for all 12,000 pages. react-helmet rewrote it after hydration — but social scrapers and a slice of crawl scenarios read the initial before JS ran. Google often caught the updated title; the broader ecosystem (link previews, faster crawl passes, some AI fetchers) read the placeholder.

Turns out client-side meta management trades deterministic head tags for a render race. Server-rendered head tags are correct in the first byte; react-helmet is correct only after a render some readers never wait for.

They moved to server-rendered head tags (Next.js metadata API), keeping helmet logic only as a client fallback.

Unique titles appeared in raw HTML across all pages; SERP titles corrected in two weeks, social previews stopped showing the placeholder, sitewide CTR recovered +12% in six weeks. Write the head on the server. The first byte is the one everyone reads.