The Invisible Foundation of Success: Technical SEO

You can have the most spectacular UI components in the world, but if the Google bot cannot render or understand them, you don't exist. Fortunately, Next.js (App Router) provides us with incredible primitives to solve technical SEO in just a few minutes.

1. The Global Metadata Object

In your layout.tsx file, you should have a complete Metadata object configured. Don't just stick with the title and description; take advantage of templates and OpenGraph.

export const metadata: Metadata = {
  metadataBase: new URL("https://yourdomain.com"),
  title: {
    template: "%s | The UI Factory",
    default: "The UI Factory | Premium React Components",
  },
  description: "A brutalist collection of UI components...",
  openGraph: {
    type: "website",
    title: "The UI Factory",
    siteName: "The UI Factory",
  },
  robots: {
    index: true,
    follow: true,
  }
};

The template property is pure gold. It means that if on the /blog page you export title: "Blog", Next.js will automatically render <title>Blog | The UI Factory</title>.

2. Dynamic Sitemap Generation

Gone are the days of generating XMLs by hand. Create a sitemap.ts file in your app/ directory.

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://yourdomain.com';
  
  // Here you can read from your database or MDX file system
  const routes = ['', '/components', '/blog'].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date().toISOString(),
  }));

  return routes;
}

Next.js will expose this at /sitemap.xml automatically.

3. Directing Crawlers with robots.ts

Similarly, create a robots.ts file in app/ to tell search engines what they can and cannot do.

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/api/', '/admin/'],
    },
    sitemap: 'https://yourdomain.com/sitemap.xml',
  };
}

With these 3 files, you eliminate 90% of technical indexing problems and allow Google to focus on what's important: reading the incredible content of your website.