T
TanStack•5mo ago
wee-brown

Meta title and description on Tanstack Start based on route params or search query.

Hey! Somewhat similar to https://discord.com/channels/719702312431386674/1340017921094844416 but what I need is to adjust the title of the page based on a url search param. Essentially, like getting the post id from the search params and setting the title to the post name. (simplified for this question).
4 Replies
correct-apricot
correct-apricot•5mo ago
If you are using react 19 you should he able to use an html title tag anywhere
wee-brown
wee-brownOP•5mo ago
Hey @Jaga Santagostino ! Thanks for the reply. Guess that would be client-side only... Forgot to mention that the main purpose is for SEO reasons. So need it to be server-side. I seem to be getting somewhere by checking the search params in beforeLoad and from it return the title override. Then in head I get the title override from ctx.match.context.title Open to better approaches...
correct-apricot
correct-apricot•5mo ago
I haven’t tried myself but it should work with SSR since react 19 https://react.dev/blog/2024/12/05/react-19
React v19 – React
The library for web and native user interfaces
No description
like-gold
like-gold•5mo ago
you can access the search param like this: 
export const Route = createFileRoute('/')({
  validateSearch: () => ({foo: 'bar'}),
  head: ({match}) => ({
    meta: [{name: 'description', content: `${match.search.foo} hello world`}],
  })
  component: Home,
})
export const Route = createFileRoute('/')({
  validateSearch: () => ({foo: 'bar'}),
  head: ({match}) => ({
    meta: [{name: 'description', content: `${match.search.foo} hello world`}],
  })
  component: Home,
})

Did you find this page helpful?