SolidStart Meta not updating

Per the docs, I tried to add meta tags to my website, I added the base <MetaProvider> and the fallback tags inside my <Router layout={}/> as seen below

      <MetaProvider>
        <Title>test</Title>
        <Meta name="description" content="test" />

        <Link rel="icon" href="/favicon.ico" />

        {navbarEnabled() && (
          <Navbar user={user()!} />
        )}

        <div class={styles.contentWrapper}>
          {props.children}
        </div>

        <Footer />
      </MetaProvider>

      <MetaProvider>
        <Title>test</Title>
        <Meta name="description" content="test" />

        <Link rel="icon" href="/favicon.ico" />

        {navbarEnabled() && (
          <Navbar user={user()!} />
        )}

        <div class={styles.contentWrapper}>
          {props.children}
        </div>

        <Footer />
      </MetaProvider>

From there, according to the docs or at least my understanding I should now be able to use <Meta> in a specific route and overwrite these, and so I did

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>

Despite this, the tags seem to be creating multiple times, and not deleting the old ones. So in my document I have both the fallback tags and the page specific tags an whichever one displays seems to be random.

Unsure where I messed up so any help would be greatly appreciated.

SolidJS•15mo ago•

15 replies

Christian

SolidStart Meta not updating

Per the docs, I tried to add meta tags to my website, I added the base <MetaProvider> and the fallback tags inside my <Router layout={}/> as seen below

      <MetaProvider>
        <Title>test</Title>
        <Meta name="description" content="test" />

        <Link rel="icon" href="/favicon.ico" />

        {navbarEnabled() && (
          <Navbar user={user()!} />
        )}

        <div class={styles.contentWrapper}>
          {props.children}
        </div>

        <Footer />
      </MetaProvider>

      <MetaProvider>
        <Title>test</Title>
        <Meta name="description" content="test" />

        <Link rel="icon" href="/favicon.ico" />

        {navbarEnabled() && (
          <Navbar user={user()!} />
        )}

        <div class={styles.contentWrapper}>
          {props.children}
        </div>

        <Footer />
      </MetaProvider>

From there, according to the docs or at least my understanding I should now be able to use <Meta> in a specific route and overwrite these, and so I did

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>

SolidStart Meta not updating

Similar Threads

SolidStart Meta not updating

Similar Threads

Similar Threads

Similar Threads