Frontend SEO Architecture

Modern SEO extends beyond traditional search engines like Google. Today, your frontend architecture must also cater to LLM (Large Language Model) agents, RSS aggregators, and automated web crawlers.

This guide outlines how to build a machine-readable routing structure using the Next.js App Router, keeping configuration minimal and maintainable.

Directory Structure

In Next.js, search engine optimization relies heavily on file-system routing. Specific files placed at the root of your application are automatically parsed as SEO endpoints.

For maximum indexability, your project tree should look like this:

Instead of managing static .xml or .txt files manually, Next.js allows you to generate them dynamically using TypeScript. This ensures your indexing data is always synchronized with your actual routes.

Explore the essential endpoint configurations below.

Instructs web crawlers on which paths they are allowed to access and provides the direct URL to your sitemap.

import type { MetadataRoute } from "next"
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/api/", "/private/"],
    },
    sitemap: "[https://example.com/sitemap.xml](https://example.com/sitemap.xml)",
  }
}

Metadata Integration

Rather than hardcoding HTML <head> tags, utilize the Next.js Metadata API to inject dynamic SEO data into your pages.

Global Configuration Define your baseline metadata (like the site name, author, and default OpenGraph images) inside your root app/layout.tsx. This acts as a fallback for all child pages.

Dynamic Overrides For content-driven pages (like blog posts or product details), export the generateMetadata function. This allows you to fetch data and apply unique titles and descriptions per route.

Structured Data (JSON-LD)

To qualify for Rich Snippets in search results, inject JSON-LD schemas into your components. This formats your page data into an exact structure that search engines immediately understand.

Here is a minimal example of adding an Article schema to a page:

import Script from "next/script"
 
export default function ArticlePage() {
  const jsonLd = {
    "@context": "[https://schema.org](https://schema.org)",
    "@type": "Article",
    headline: "Understanding Frontend SEO",
    author: {
      "@type": "Person",
      name: "Developer",
    },
  }
 
  return (
    <article>
      <Script
        id="schema-article"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>Understanding Frontend SEO</h1>
      <p>Content goes here...</p>
    </article>
  )
}