SEO

Everything here is wired. The work is remembering to fill it in.

Per-page metadata#

export const metadata: Metadata = {
  title: "Pricing",
  description: "One payment, both repositories, no renewal.",
  alternates: { canonical: "/pricing" },
};

The root layout sets metadataBase and a title template, so a page supplies "Pricing" and the browser tab reads Pricing — Acme. Dynamic pages export generateMetadata instead, and it can be async, so a blog post's title can come from the file it renders.

Sitemap and robots#

src/app/sitemap.ts and src/app/robots.ts are code, not files you maintain. The sitemap reads your content directories, so a new blog post appears in it the moment the file exists. Anything you add that has its own URLs needs a few lines there or it will not be listed.

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await allPosts();
  return [
    { url: `${base}/`, priority: 1 },
    ...posts.map((post) => ({ url: `${base}/blog/${post.slug}` })),
  ];
}

Social images#

src/app/opengraph-image.tsx renders the card at request time with the Next image runtime. It is JSX, so it can read the page title rather than being a static PNG somebody has to re-export whenever the product is renamed.

Test it by opening /opengraph-image directly. Then check it in the LinkedIn post inspector, which is the strictest of the three big ones and caches hardest.

What actually moves the needle#

Technical SEO is table stakes and takes an afternoon. For a developer tool, almost all the traffic comes from two places:

• Public documentation. Every page is a long-tail query somebody is typing right now. This page you are reading exists partly for that reason, and the kit ships with the same docs system if you want one.
• Writing about the specific problem you solved. Not "10 tips for SaaS founders". The thing that took you a day to figure out, written the way you wished you had found it.