TSC Stack - The Headless TanStack + Convex + Clerk Boilerplate for Shipping Fast

SEO is already configured. You don't have to think about it if you use TSC Stack.

You can just read this and you are good to go.

Configurations

SEO Meta

First, open utils/seo.ts file and configure SEO settings to improve your website's visibility on search engines.

There is the example configuration:

  const DEFAULT_TITLE =
    "TSC Stack - The Headless TanStack + Convex + Clerk Boilerplate for Shipping Fast";

  const {
    title,
    url,
    siteName = "TSC Stack",
    description = "TSC Stack is a headless TanStack + Convex + Clerk boilerplate to ship SaaS apps fast. Built with TanStack Start, Clerk auth, strict TypeScript, shadcn/ui, and modern workflows—no fluff, just shipping.",
    keywords = "TanStack + Convex + Clerk boilerplate, TanStack + Convex + Clerk starter kit, TanStack Start + Convex + Clerk, TanStack + Convex + Clerk SaaS boilerplate",
    ogImageUrl = `${VITE_BASE_URL}/og-image.png`,
    twitterHandle = "@heysithu",
    type = "website",
    locale = "en_US"
  } = opts;

Done!

Favicons

Use realfavicongenerator to generate favicons for your website.
Follow the instructions on the website to download the generated favicons and place them in the public folder.
Done!

Open Graph Image

Create a image with 1200px × 630px to get the best results on social media platforms.
Name that image og-image.png and place it in the public folder.
Done!

Sitemaps

Sitemaps let your website be indexed by search engines. Luckily, we already configured it for you thanks to TanStack Start.

If your website doesn't need complex sitemap generation, using the default TanStack Start's default sitemap generation in vite.config.ts is enough.

If you need the complex one read TanStack Start's sitemap docs

Usages

Here are some examples of how to use seoMeta:

// index.tsx
export const Route = createFileRoute("/")({
  head: ({ match }) => ({
    // Use `default` as the title get show the `DEFAULT_TITLE` and `match.fullPath` as the URL.
    meta: seoMeta({ title: "default", url: match.fullPath })
  })
});

// _authenticated/dashboard.tsx
export const Route = createFileRoute("/_authenticated/dashboard")({
  head: ({ match }) => ({
    meta: seoMeta({
      title: "Dashboard",
      url: match.fullPath,
    })
  })
});