Filter tokens in meta title

page.tsx

export async function generateMetadata({ searchParams }: ThoughtsProps): Promise<Metadata> {
  const tagId = searchParams?.tag ?? null

  const [tagData, indexData] = await Promise.all([
    getStrapiData(`tags?${tagIdQuery(tagId)}`),
    getStrapiData("thoughts-index?populate=*"),
  ])

  let tagName = tagData?.data[0]?.name ?? null
  tagName = tagName ? `on ${tagName}` : undefined
  const seo = indexData?.data.seo

  return pageMetadata(seo, ["$tagName", tagName])
}

utils.ts

type Filter = [token: string, replacement?: string]

const filterString = (string: string, filter: Filter) => {
  const [token, replacement = ""] = filter
  return string.split(token).join(replacement)
}

export const pageMetadata = (seo: Seo, titleFilter?: Filter) => {
  const { title, description } = seo ?? {}

  return {
    ...(title && { title: titleFilter ? filterString(title, titleFilter) : title }),
    ...(description && { description }),
  }
}

// input: Thoughts $tagName • Tammy Hart • Frontend Engineering & Design Insights
// output on index: Thoughts • Tammy Hart • Frontend Engineering & Design Insights
// output on when tagName exists: Thoughts on TypeScript • Tammy Hart • Frontend Engineering & Design Insights