SEO

Remix makes use of the meta method to define meta tags using key value pairs.

In the root.tsx file, you can find:

export const meta: MetaFunction = () => [
  { title: "OneMix" },
  { name: "description", content: "OneMix App" },
];

You can add all HTML meta tags here and you can use the meta method in each of your routes. If a route does not have a meta method, the root.tsx meta values are used.

TIP: Learn more about the meta method here.

You can also use the HTML <meta> tags as usual without using Remix’s meta method too.

For example, adding this:

<meta property="og:url" content="<https://www.example.com/>" />
<meta
  property="og:image"
  content="<https://example.com/home-page.png>"
/>

in the <head> of you App() method in root.tsx would work the same way as it would in any HTML or React project.

sitemap.xml

Open any sitemap generator like https://www.xml-sitemaps.com/ and enter your site’s URL after deployment. Add the output to the content variable of the routes/[sitemap.xml].tsx file. This helps search engines to index the pages of your site.