Next.js Discord

Discord Forum

Title contains <!-- --> random for a few milliseconds. Noticeable for a moment on refresh and in PSI

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
It only happens on these realm urls like so: https://wowutils.com/eu/auction-house/realms/tarren-mill

It deforms them into titles like this for a moment
Aggramar<!-- --> Realm Auction House Info - WoW<!-- --> <!-- -->US

It's an ISR page and I'm using Head to set the title
      <Head>
        <title>
          {realm.name} Realm Auction House Info - WoW{" "}
          {realm.region.toUpperCase()}
        </title>
        <meta
          name="description"
          content={`Explore auction house data and market cap for the ${realm.name} realm in World of Warcraft. See live updates on item prices, market trends, and more.`}
        />
        <meta
          property="og:title"
          content={`${
            realm.name
          } Realm Auction House Info - WoW ${realm.region.toUpperCase()}`}
        />
        <meta
          property="og:description"
          content={`Detailed auction house and market cap information for the ${realm.name} realm in World of Warcraft. Discover the latest market trends and item prices.`}
        />
        <meta property="og:type" content="website" />
        <link rel="icon" href="/favicon.ico" />
      </Head>


There are no errors or anything. That is my main issue can someone help with that?

Side-note this page has a bit long blocking time because of the graph. I tried to lazy load it before via React Lazy but it caused rare hydration issues.
Answered by Transvaal lion
fixed it because on 3rd page google I found this
https://stackoverflow.com/questions/76123296/how-to-fix-html-comment-in-next-js-title

      <title>{`${realm.name} Realm Auction House Info - WoW - ${realm.region.toUpperCase()}`}</title>


So that fixes it, but this is probably a bug with next/head? Surely the initial HTML does not give comments in it or?
View full answer

5 Replies

Transvaal lionOP
Bump, really can't solve this
Transvaal lionOP
I notice my title is made like this

<title>
{realm.name} Realm Auction House Info - WoW{" "}
{realm.region.toUpperCase()}
</title>

And it matches the full title being bugged at this locations

This title that appears for a moment is also the one that seems to get caught by crawlers and Pagespeed Insights
It's also what I get in the initial response
But why only for the title?
All the other things are populated properly already
Transvaal lionOP
fixed it because on 3rd page google I found this
https://stackoverflow.com/questions/76123296/how-to-fix-html-comment-in-next-js-title

      <title>{`${realm.name} Realm Auction House Info - WoW - ${realm.region.toUpperCase()}`}</title>


So that fixes it, but this is probably a bug with next/head? Surely the initial HTML does not give comments in it or?
Answer