Setting meta tags in Remix

To setup meta tags in Remix, you have to add <Meta> component into your root.tsx file. It is mainly because in Remix You are responsible for everything between head tags (Remix).

import { type MetaFunction } from '@remix-run/react'  
  
export const meta: MetaFunction = () => {  
	return [  
		{ title: 'Sandwich Shop' },  
		{ name: 'description', content: 'Fill your tummy with something yummy' },  
	]  
}  

You can also set these values dynamically
“

import { json } from '@remix-run/node'  
import { type MetaFunction } from '@remix-run/react'  
import { getSandwich } from '../sandwiches.server'  
  
export const meta: MetaFunction<typeof loader> = ({ data }) => {  
	return [  
		{ title: data.sandwich.name },  
		{ name: 'description', content: data.sandwich.description },  
	]  
}  
  
export function loader({ params }) {  
	return json({ sandwich: getSandwich(params.sandwichId) })  
}