<title> problem: A title element received an array with more than 1 element as children #38256

florianwalther-private · 2022-07-02T09:00:00Z

florianwalther-private
Jul 2, 2022

On my website, users can type a search query into a search field. I would like to set the <title> tag dynamically from this input.

My first question is: Does it make a difference (SEO-wise) if I set this title from a value returned from getServerSideProps, or by reading it client-side from the URL query directly? The latter approach would look like this:

const ResourcesPage = ({ [...] }: ServerSideProps & ComponentProps) => {
    const router = useRouter();

    const searchQueryParam = router.query.q?.toString();

   [...]

    return (
        <div>
            <Head>
                <title>The best {searchQueryParam} learning resources</title>
            </Head>

The other approach would look like this:

export const : GetServerSideProps = async ({ query }) => {
    const searchQuery = query.q?.toString();

[...]

return {
          props: {
              searchQuery: searchQuery,
              resultData: response
          }
      }

const ResourcesPage = ({ searchQuery, [...] }: ServerSideProps & ComponentProps) => {
 
   [...]

    return (
        <div>
            <Head>
                <title>The best {searchQuery} learning resources</title>
            </Head>

And the second part of the question: No matter which approach I use, I'm getting this warning in the console:

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering

which I didn't find any results in Google for whatsoever.

Answered by icyJoseph

Jul 2, 2022

Hi,

The warning is because when you do:

const Home: NextPage = () => {
  const world = "World";
  return (
    <div>
      <span>Hello {world} foo</span>
    </div>
  );
};

React renders:

<div><span>Hello <!-- -->World<!-- --> foo</span></div>

That's a div with a span child, with 0 children elements, but 5 nodes as children. There's a subtle difference between elements and nodes. Here's a handy video.

The 5 nodes are, text, comment, text, comment, text. The same is happening to your title element.

Do this instead:

const Home: NextPage = () => {
  const world = "World";
  const message = `Hello ${world} foo`;
  return (
    <div>
      <span>{message}</span>
    </div>
  );
};

Which outputs:

View full answer

icyJoseph · 2022-07-02T16:56:50Z

icyJoseph
Jul 2, 2022

Hi,

The warning is because when you do:

const Home: NextPage = () => {
  const world = "World";
  return (
    <div>
      <span>Hello {world} foo</span>
    </div>
  );
};

React renders:

<div><span>Hello <!-- -->World<!-- --> foo</span></div>

That's a div with a span child, with 0 children elements, but 5 nodes as children. There's a subtle difference between elements and nodes. Here's a handy video.

The 5 nodes are, text, comment, text, comment, text. The same is happening to your title element.

Do this instead:

const Home: NextPage = () => {
  const world = "World";
  const message = `Hello ${world} foo`;
  return (
    <div>
      <span>{message}</span>
    </div>
  );
};

Which outputs:

<div><span>Hello World foo</span></div>

Now the span has only one, text, child node.

SEO Merits

Well... in either case the bot/crawler, or whatever SEO entity, has to be arrive with the query in the URL already. Since you are using GSSP, in both cases (right?), for any first request the entire HTML string will be generated server side, so the bot/crawler should parse a correct title.

If you visit the site, with query in the URL, and then right click to "View Page Source", do you see the correct title there? If so, then you are good.

Edit

This answer has gotten a lot of feedback! I've also answered to it in a few other places but I think this one is a good complement:

Auto generate comment "" in SSR #44797 (comment)

The key take-away from it:

This is part of react-dom's to string rendering.
Of course, you can trigger this with any React ~~meta~~ framework:

For example in a codesandbox:

import "./styles.css";

import { renderToString } from "react-dom/server";

const Footer = () => {
  return (
    <footer>
      <p>{`Copyright © ${new Date().getFullYear()} Sample Company`}</p>
    </footer>
  );
};

// const Footer = () => {
//   return (
//     <footer>
//       <p>Copyright © {new Date().getFullYear()} Sample Company</p>
//     </footer>
//   );
// };

function App() {
  return (
    <>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>

      <Footer />
    </>
  );
}

console.log(renderToString(<App />)); // log to the console to see what `renderToString` outputs

13 replies

cdx111 Dec 8, 2022

Thank you! Help me that solved it

1mehdifaraji Jan 6, 2023

Thanks for the explanation . worked 100% .

zohaibasghar Jan 20, 2023

yes that's a good approach
thanks for helping buddy

pajarrahmansyah Jan 22, 2023

Very clear! so helpful

Asylcreek Apr 21, 2023

Real clear, thank you kindly

discoverlance-com · 2022-07-05T22:18:39Z

discoverlance-com
Jul 5, 2022

I tried the answer here and I seem to still have the error:

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering

I did not have such an error till after I upgraded to Next.JS v 12.2.0. So not sure if it's something to do with the version upgrade.

6 replies

icyJoseph Jul 5, 2022

This is another way to trigger this issue:

 <Head>
        <title>{"hello"} </title>
 </Head>

Notice the blank space after "} - subtle.

discoverlance-com Jul 5, 2022

This is another way to trigger this issue:
 <Head>
        <title>{"hello"} </title>
 </Head>
Notice the blank space after "} - subtle.

Ok I just checked my head and Yes it had the issue you described here

<Head>
    <title>{`${title} - Website`} </title>
</Head>

I removed the extra space after the } and it works now. Thanks.
This is quite weird but I did go through this video, difference between nodes and elements and it described this exact behaviour of document nodes and elements. So I got to understand the point you discussed earlier. I just didn't notice that space too is a node.

talhaa99 Jul 28, 2022

This is another way to trigger this issue:
 <Head>
        <title>{"hello"} </title>
 </Head>
Notice the blank space after "} - subtle.
Ok I just checked my head and Yes it had the issue you described here
<Head>
    <title>{`${title} - Website`} </title>
</Head>
I removed the extra space after the } and it works now. Thanks. This is quite weird but I did go through this video, difference between nodes and elements and it described this exact behaviour of document nodes and elements. So I got to understand the point you discussed earlier. I just didn't notice that space too is a node.

Perfect @lance1997

t-lock Aug 12, 2022

I have this issue remaining even after I delete every and <title> in my app.... The error message generated does not help me find a line number.

discoverlance-com Aug 12, 2022

I have this issue remaining even after I delete every and <title> in my app.... The error message generated does not help me find a line number.

Can you paste the code rendering your title?

indiabullriders · 2022-08-04T16:11:18Z

indiabullriders
Aug 4, 2022

This solved for me -

import Head from "next/head";
const siteTitle = "Site Name";

// HeadSpace is the component name, so change it as you wish

export default function HeadSpace(props) { 
  return (
    <Head>
      <title>{props.pageTitle + " - " + siteTitle}</title>
      <meta name="description" content={props.pageDescription} />
    </Head>
  );
}

0 replies

rockyessel · 2022-09-02T21:25:26Z

rockyessel
Sep 2, 2022

const name = `${title || defaultMetaData.title} | ${type || defaultMetaData.type}`

return (
    <Head>
        <title>{name}</title> // Do this ✔✔
        <title>{title || defaultMetaData.title} | {type || defaultMetaData.type}</title> // Dont do this or you get this warning ❌❌❌
        <meta charSet="utf-8"/>
        <meta httpEquiv="X-UA-Compatible" content="ie=edge"/>
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
        <meta name="description" content={description || defaultMetaData.description}/>
        <meta itemProp="name" content={title || defaultMetaData.title}/>
        <meta itemProp="description" content={description || defaultMetaData.description}/>
        <meta itemProp="image" content={image || defaultMetaData.image}/>
        {metaInfoTags?.map(({name, content}, index) => (
            <meta key={index} property={name} content={content}/>
        ))}
    </Head>
)

}
Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering at title
at head
at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:127:1)
at html
at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:640:106)
at Document (webpack-internal:///./node_modules/next/dist/pages/_document.js:16:1)`

0 replies

jekh · 2022-11-02T02:00:54Z

jekh
Nov 2, 2022

I just happened to find this warning in my console. Is there a lint rule or some other way to catch this?

0 replies

ptbarnum4 · 2022-12-21T00:31:26Z

ptbarnum4
Dec 21, 2022

thank you @icyJoseph with this, it was the spaces in the <title> tag causing the following warning

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering

Before

<title> {title} </title>
//     ↑       ↑ 
// the whitespace is interpreted as 2 more text nodes

After (fixed)

<title>{title}</title>

0 replies

ModernHooman · 2023-01-23T13:40:27Z

ModernHooman
Jan 23, 2023

Why not just doing it like this:

<Head>
  <title>{`The best ${searchQueryParam} learning resources`}</title>
</Head>

1 reply

icyJoseph Jan 23, 2023

Yeah, I thought I had included it. I have answered this question a few times hehe, I'll copy paste from my other answers when I get home.

gtwebsite · 2023-06-07T15:48:04Z

gtwebsite
Jun 7, 2023

What we are all doing is workaround, it should just accept

<Head>
  <title>{var} needs to be solved</title>
</Head>

This is clearly a bug

0 replies

Rosa-Kang · 2023-09-07T19:05:38Z

Rosa-Kang
Sep 7, 2023

I had the same Warning message and Solved :

In my case, I had a Seo component and used the Head inside and had the title as a prop and had some text together like this :

import Head from 'next/head';

export default function Seo({ title }) {
    return (
        <Head>
            <title>{title}| Next Movies</title>
        </Head>
    );
}

Due to the warning message, I had changed my Seo component using template literal(``) like below and error is gone:

import Head from 'next/head';

export default function Seo({ title }) {
    return (
        <Head>
            <title>{`${title}| Next Movies`}</title>
        </Head>
    );
}

1 reply

data-miner00 Jan 15, 2024

Yup, I had the exact same issue and concatenated them together before outputting to the <Title> tag fixed the issue.

<title> problem: A title element received an array with more than 1 element as children #38256

Replies: 9 comments · 21 replies

SEO Merits

Edit

Replies: 9 comments 21 replies