SEO

Running a SaaS requires a lot of work, and one of the most important things is to make sure your site is optimized for search engines.

This is a very important part of your marketing strategy, and it's something that you should be doing from the very beginning.

We provide a basic SEO setup for your site, but you can also customize it to your needs.

SEO Setup

You can find the SEO settings in the app/lib/brand/config.ts file.

import type { DefaultSeoProps } from "../server/seo/types"
 
export const siteConfig = {
  title: "Remix SaaSkit",
  description:
    "Remix SaaSkit is a starter kit for building SaaS applications with Remix.",
  baseUrl: "https://demo.saaskits.dev",
  ogImage: "https://demo.saaskits.dev/og.png",
} as const
 
export const seoConfig: DefaultSeoProps = {
  title: siteConfig.title,
  description:
    "Remix SaaSkit is a starter kit for building SaaS applications with Remix.",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: siteConfig.baseUrl,
    title: siteConfig.title,
    description: siteConfig.description,
    siteName: siteConfig.title,
    images: [
      {
        url: siteConfig.ogImage,
        width: 1200,
        height: 630,
        alt: siteConfig.title,
      },
    ],
  },
  twitter: {
    handle: "@SaaSKits",
    site: siteConfig.baseUrl,
    cardType: "summary_large_image",
  },
}

You can customize the SEO settings by changing the values in the seoConfig object.

Route SEO

You can also customize the SEO settings for each route in your app.

To do this, you need to add a seo property to the meta object in your route component.

export const meta: MetaFunction = mergeMeta(
  // these will override the parent meta
  () => {
    return buildTags({
      title: "Verify Email",
      description: "Verify your email",
    })
  }
)

We have a helper function called mergeMeta that will merge the meta data from the parent route with the meta data from the current route.

mergeMeta takes a second optional argument that allows you to append meta data to the current meta data.

This is useful if you want to override the meta data for a specific route.

We have created a utility function called buildTags a type safe way to build meta tags.

You can find all the available options in the app/lib/server/seo/types.ts file.

For more details on how to use mergeMeta, check out this gist.

Sitemap

We also provide a sitemap for your site. You can find it at /sitemap.xml.

Whenever you add a new route to your app, it will be automatically added to the sitemap.

Robots.txt

We have provided default configuration for your robots.txt file content.

You can override it according to your needs.

import { generateRobotsTxt } from "@/lib/server/robots/robots.server"
 
export function loader() {
  return generateRobotsTxt([
    { type: "sitemap", value: `${process.env.HOST_URL}/sitemap.xml` },
    { type: "disallow", value: "/dashboard" },
  ])
}

You can find more details about the generateRobotsTxt function in the app/lib/server/robots/robots.server.ts file.