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.

robots.txt

A default robots.txt file is already added at routes/[robots.txt].tsx which you can customize as per your needs.

SEO Best Practices

It’s important to follow SEO best practices for you product to rank on search engine results. Here are some links that will help you:

PreviousPaymentsNextHeader

Last updated