SEO & PERFORMANCEJune 22, 2026 // 6 MIN READ

Technical SEO Frameworks for Next.js App Router

Technical SEO is the practice of structuring code to ensure search engines can easily discover, crawl, and render your web app. Next.js App Router provides built-in tools that make implementing technical SEO straightforward, yet many developers overlook them.

The first step is utilizing Next.js Metadata API. By exporting a static or dynamic metadata object from page layouts, Next.js automatically generates page titles, description tags, and open graph data in the document head. This prevents layout-shift dependencies and ensures crawler bots read meta information immediately on the initial raw HTTP request.

Next is the enforcement of canonical tags. Duplicate content issues occur when similar pages are reachable via multiple URLs (e.g., with or without trailing slashes, or query variables). Declaring a canonical URL explicitly instructs Google which main link represents the single source of truth.

Lastly, structured schemas (JSON-LD) should be injected dynamically. If a page represents an article, product, or local business, outputting a `<script type='application/ld+json'>` block allows crawl engines to render rich snippets (like star ratings, prices, and author bios) directly in search engine results pages, significantly boosting click-through metrics.

LANG: typescript// READ_ONLY

// Dynamic SEO Metadata Export in Next.js App Router
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: `https://shahidadnan.site/blog/${post.slug}`
    }
  };
}