• ..

styled-components

    Head の chilren として title タグを含む SFC を入れても title 要素にテキストが入らない場合

    問題

    こんなSFCを用意してました。

    export const Meta = ({title}) => {
      return (
        <>
          <meta name="twitter:title" content={title} />
          <meta property="og:title" content={title} />
          <title>{title}</title>
        </>
      );
    };
    

    title: 'foo'として展開後こんな感じで入ってくれません。。

    <meta name="twitter:title" content="foo" />
    <meta property="og:title" content="foo" />
    <title></title>

    解決

    とりあえず直下に持っていけば大丈夫でした。

    <Head>
      <Meta title={title} />
      <title>{title}</title>
    </Head>