tags</h1> <p>Dave Quillman — Sat, 05 Sep 2026 23:03:44 +0000</p> <p>I spent an afternoon working out why 22 of 23 pages on a site I run were sitting in Google Search Console as <em>"Discovered — currently not indexed."</em></p> <p>The answer turned out to be mostly "nobody links to you, you're a new domain, get in line." That part isn't interesting.</p> <p>What <em>was</em> interesting is what I found on the way there: every prerendered page on the site was shipping with three <code><title></code> elements, two <code><link rel="canonical"></code> tags, and two <code><meta name="robots"></code> tags. There was already code in the build whose entire job was to remove those duplicates. It ran on every page. It was doing nothing.</p> <p>Here's why, because I think this bites anyone doing React 19 + prerendering.</p> <h2> The setup </h2> <p>Vite + React 19 SPA. React 19 hoists <code><title></code>, <code><meta></code> and <code><link></code> rendered anywhere in a component tree up into <code><head></code>, which means you can write a <code><SeoHead></code> component per route and skip <code>react-helmet</code> entirely:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight jsx"><code><span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nf">SeoHead</span><span class="p">({</span> <span class="nx">title</span><span class="p">,</span> <span class="nx">description</span><span class="p">,</span> <span class="nx">canonical</span> <span class="p">})</span> <span class="p">{</span> <span class="k">return </span><span class="p">(</span> <span class="p"><></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span><span class="si">{</span><span class="nx">title</span><span class="si">}</span><span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="p">=</span><span class="s">"description"</span> <span class="na">content</span><span class="p">=</span><span class="si">{</span><span class="nx">description</span><span class="si">}</span> <span class="p">/></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="p">=</span><span class="s">"canonical"</span> <span class="na">href</span><span class="p">=</span><span class="si">{</span><span class="nx">canonical</span><span class="si">}</span> <span class="p">/></span> <span class="p"></></span> <span class="p">);</span> <span class="p">}</span> </code></pre> </div> <p>That's genuinely nice. It also means the tags only exist after JS runs, so first-pass crawlers and social scrapers get an empty shell. The usual fix: a prerender step that runs after <code>vite build</code>, walks every public route in headless Chromium, and writes the fully-rendered DOM to <code>dist/{route}/index.html</code>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nf">goto</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="p">{</span> <span class="na">waitUntil</span><span class="p">:</span> <span class="dl">'</span><span class="s1">domcontentloaded</span><span class="dl">'</span> <span class="p">});</span> <span class="k">await</span> <span class="nf">waitForReactToMount</span><span class="p">(</span><span class="nx">page</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">html</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nf">content</span><span class="p">();</span> <span class="k">await</span> <span class="nf">writeFile</span><span class="p">(</span><span class="nx">outPath</span><span class="p">,</span> <span class="nx">html</span><span class="p">);</span> </code></pre> </div> <h2> The duplicates </h2> <p>During a client-side route transition, React briefly mounts one route's component before resolving to another. Both render a <code><SeoHead></code>. Both sets of tags get hoisted. The unmounted one doesn't always get cleaned up before you serialize.</p> <p>So the previous author (me) did the obvious thing — strip the duplicates in the page before serializing:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nf">evaluate</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">keep</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Map</span><span class="p">();</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">meta[name], meta[property]</span><span class="dl">'</span><span class="p">).</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">m</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">keep</span><span class="p">.</span><span class="nf">set</span><span class="p">(</span><span class="nx">m</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">property</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">m</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">name</span><span class="dl">'</span><span class="p">),</span> <span class="nx">m</span><span class="p">);</span> <span class="p">});</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">meta[name], meta[property]</span><span class="dl">'</span><span class="p">).</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">m</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">k</span> <span class="o">=</span> <span class="nx">m</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">property</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">m</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">name</span><span class="dl">'</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">keep</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="nx">k</span><span class="p">)</span> <span class="o">!==</span> <span class="nx">m</span><span class="p">)</span> <span class="nx">m</span><span class="p">.</span><span class="nf">remove</span><span class="p">();</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">canons</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">link[rel="canonical"]</span><span class="dl">'</span><span class="p">);</span> <span class="k">for </span><span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">canons</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="nx">canons</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nf">remove</span><span class="p">();</span> <span class="p">});</span> <span class="k">return</span> <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nf">content</span><span class="p">();</span> <span class="c1">// <- still has the duplicates</span> </code></pre> </div> <p>Read that last line again. The dedupe runs. Then <code>page.content()</code> returns HTML with the duplicates still in it.</p> <h2> Why it doesn't work </h2> <p><strong>React owns those nodes.</strong> They're not inert markup that happens to sit in <code><head></code> — they're the rendered output of a mounted component, and React holds references to them. Deleting them out from under React doesn't unmount anything. It just puts the DOM out of sync with React's idea of the DOM, and the next commit puts them back.</p> <p><code>page.evaluate()</code> and <code>page.content()</code> are two separate CDP round-trips. Between them, the page keeps running. Any pending render — a lazy chunk landing, a state update, an effect firing — is enough for React to reconcile and reinsert everything you just deleted.</p> <p>You are in a fight with the reconciler and the reconciler runs last.</p> <p>It also fails <em>silently</em>. The dedupe code executes without error. If you check the DOM immediately afterward it looks correct. Only the serialized file on disk is wrong, and nobody diffs the serialized file.</p> <h2> The fix: clean the string, not the DOM </h2> <p>The artifact you actually ship is a string. Nothing can re-inject into a string.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Read what the page RESOLVED to. Don't mutate anything.</span> <span class="kd">const</span> <span class="nx">expected</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nf">evaluate</span><span class="p">(()</span> <span class="o">=></span> <span class="p">({</span> <span class="na">title</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> <span class="na">canonical</span><span class="p">:</span> <span class="p">[...</span><span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">link[rel="canonical"]</span><span class="dl">'</span><span class="p">)]</span> <span class="p">.</span><span class="nf">map</span><span class="p">((</span><span class="nx">l</span><span class="p">)</span> <span class="o">=></span> <span class="nx">l</span><span class="p">.</span><span class="nf">getAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">href</span><span class="dl">'</span><span class="p">))</span> <span class="p">.</span><span class="nf">filter</span><span class="p">((</span><span class="nx">h</span><span class="p">)</span> <span class="o">=></span> <span class="nx">h</span> <span class="o">&&</span> <span class="nx">h</span><span class="p">.</span><span class="nf">trim</span><span class="p">())</span> <span class="p">.</span><span class="nf">pop</span><span class="p">()</span> <span class="o">??</span> <span class="kc">null</span><span class="p">,</span> <span class="p">}));</span> <span class="kd">const</span> <span class="nx">raw</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nf">content</span><span class="p">();</span> <span class="kd">const</span> <span class="nx">html</span> <span class="o">=</span> <span class="nf">cleanHead</span><span class="p">(</span><span class="nx">raw</span><span class="p">,</span> <span class="nx">expected</span><span class="p">,</span> <span class="nx">route</span><span class="p">);</span> <span class="c1">// pure string transform</span> </code></pre> </div> <p><code>document.title</code> is the useful bit here. Per spec it returns the child text content of the <strong>first</strong> <code><title></code> element in the document — which is also the one browsers show and the one Google reads. So it's not just a convenient value, it's the authoritative answer to "which of these three titles actually counts."</p> <p><code>cleanHead</code> then does the boring part on the string: keep the first <code><title></code>, drop the rest; drop <code><link rel="canonical"></code> tags with no <code>href</code>, keep exactly one; for <code><meta name|property></code>, drop empty-<code>content</code> placeholders where a populated tag exists for the same key.</p> <h2> The part I'd actually recommend copying </h2> <p>Don't just clean it. <strong>Verify it, and fail the build if it's wrong.</strong><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">function</span> <span class="nf">verify</span><span class="p">(</span><span class="nx">html</span><span class="p">,</span> <span class="nx">expected</span><span class="p">,</span> <span class="nx">route</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">head</span> <span class="o">=</span> <span class="nx">html</span><span class="p">.</span><span class="nf">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">html</span><span class="p">.</span><span class="nf">search</span><span class="p">(</span><span class="sr">/<</span><span class="se">\/</span><span class="sr">head>/i</span><span class="p">));</span> <span class="kd">const</span> <span class="nx">titles</span> <span class="o">=</span> <span class="nx">head</span><span class="p">.</span><span class="nf">match</span><span class="p">(</span><span class="sr">/<title</span><span class="se">\b[^</span><span class="sr">></span><span class="se">]</span><span class="sr">*></span><span class="se">[\s\S]</span><span class="sr">*</span><span class="se">?</span><span class="sr"><</span><span class="se">\/</span><span class="sr">title>/gi</span><span class="p">)</span> <span class="o">??</span> <span class="p">[];</span> <span class="k">if </span><span class="p">(</span><span class="nx">titles</span><span class="p">.</span><span class="nx">length</span> <span class="o">!==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="k">throw</span> <span class="k">new</span> <span class="nc">Error</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">route</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">titles</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span><span class="s2"> <title> after cleaning`</span><span class="p">);</span> <span class="p">}</span> <span class="kd">const</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">titles</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nf">replace</span><span class="p">(</span><span class="sr">/<</span><span class="se">\/?</span><span class="sr">title</span><span class="se">\b[^</span><span class="sr">></span><span class="se">]</span><span class="sr">*>/gi</span><span class="p">,</span> <span class="dl">''</span><span class="p">).</span><span class="nf">trim</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="nx">text</span> <span class="o">!==</span> <span class="nx">expected</span><span class="p">.</span><span class="nx">title</span><span class="p">.</span><span class="nf">trim</span><span class="p">())</span> <span class="p">{</span> <span class="k">throw</span> <span class="k">new</span> <span class="nc">Error</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">route</span><span class="p">}</span><span class="s2">: shipped "</span><span class="p">${</span><span class="nx">text</span><span class="p">}</span><span class="s2">", page renders "</span><span class="p">${</span><span class="nx">expected</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span><span class="s2">"`</span><span class="p">);</span> <span class="p">}</span> <span class="kd">const</span> <span class="nx">canons</span> <span class="o">=</span> <span class="nx">head</span><span class="p">.</span><span class="nf">match</span><span class="p">(</span><span class="sr">/<link</span><span class="se">\b[^</span><span class="sr">></span><span class="se">]</span><span class="sr">*</span><span class="se">\b</span><span class="sr">rel=</span><span class="se">[</span><span class="sr">"'</span><span class="se">]?</span><span class="sr">canonical</span><span class="se">[</span><span class="sr">"'</span><span class="se">]?[^</span><span class="sr">></span><span class="se">]</span><span class="sr">*>/gi</span><span class="p">)</span> <span class="o">??</span> <span class="p">[];</span> <span class="k">if </span><span class="p">(</span><span class="nx">canons</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="k">throw</span> <span class="k">new</span> <span class="nc">Error</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">route</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">canons</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span><span class="s2"> canonicals survived`</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> </code></pre> </div> <p>The original bug wasn't that the dedupe was wrong. It was that nothing checked whether it had worked. A cleanup step with no assertion is a comment that costs CPU.</p> <p>With the check in place the build either produces one correct title and one correct canonical per route, or it stops. Across 23 routes it stripped 399 duplicate and empty tags.</p> <h2> Was it actually hurting anything? </h2> <p>Honest answer: the titles, probably not much. The correct one was already first, which is what <code>document.title</code> and Google both use. Three of them is embarrassing, not fatal.</p> <p>The canonicals are the ones I'd lose sleep over, and this is worth being precise about because the internet repeats it carelessly.</p> <p>Google's <a href="https://developers.google.com/search/blog/2013/04/5-common-mistakes-with-relcanonical" rel="noopener noreferrer">5 common mistakes with rel=canonical</a> says: "When more than one is specified, all rel=canonical links will be ignored." That's unambiguous — but it's a 2013 post, and Google now displays an outdated-content banner on it. The current canonicalization docs don't restate the rule either way.</p> <p>So the honest version: the last explicit thing Google said about two canonicals on a page is that both get thrown out, and nothing since has replaced it. My pages were declaring an empty <code><link rel="canonical"></code> immediately followed by the real one. I'm not going to gamble a whole site's canonical setup on that being fine now.</p> <h2> Three things I'd take away </h2> <ol> <li> <strong>If a cleanup step touches DOM that a framework owns, assume the framework wins.</strong> React 19's head hoisting is a rendering feature, not a markup convenience.</li> <li> <strong>Do the transform on the artifact you ship.</strong> For prerendering, that's the serialized string, and it's the only stage where nothing can undo you.</li> <li> <strong>A build step with no assertion is decoration.</strong> This code ran on every page of every deploy for weeks and produced nothing. Nobody noticed because nothing was checking.</li> </ol> <p><em>I run <a href="https://cipherexam.com" rel="noopener noreferrer">CipherExam</a>, a certification-prep tool for PMP and the CompTIA exams — this is from its prerender pipeline. If you're doing React 19 + prerendering and you haven't looked at your serialized <code><head></code> lately, go look at it.</em></p> </article> </main></body></html>