Dynamic meta export
Loading "Customizing Meta Tags with Dynamic Data"
Run locally for transcripts
👨💼 For our user profile page, we want our users to be excited to share their
profile on social media and have their profiles show up nicely in search
results. So their name should appear in the title and description, like so:
- Title: Kody | Epic Notes
- Description: Profile of Kody on Epic Notes
We also want their notes page to show how many notes they have. And the
individual notes pages should show the note title in the title and the first
part of the note in the description. You know. Stuff like that. Let's make these
pages awesome. For now, let's just worry about the profile page getting dynamic
data like the user's display name.
Here's an example of how you access data from a route in the meta export:
// borrowed and modified from the remix docs
export async function loader({ params }: LoaderFunctionArgs) {
return json({
task: await getTask(params.projectId, params.taskId),
})
}
export const meta: MetaFunction<typeof loader> = ({ data }) => {
return [{ title: data.task.name }]
}