--- name: js-nextjs-technical-seo description: Implement robust technical SEO for Next.js applications. Covers Metadata API, Canonical URLs, Custom Sitemap\/Robots generation scripts (user preference), and GA4\/GSC integration. Focuses on crawlability, indexing control, and analytics accuracy. --- # Next.js Technical SEO Optimization techniques for crawlability, indexing, and analytics. ## 1. Metadata API (App Router) Use the built-in Metadata API for `head` tag management. ### Static Metadata (Layout\/Page) ```tsx import type { Metadata } from "next"; export const metadata: Metadata = { title: { template: "%s | My Brand", default: "My Brand - Premium Services", }, description: "Best in class services for...", openGraph: { type: "website", siteName: "My Brand", }, alternates: { canonical: ".\/", \/\/ Resolves to absolute URL automatically }, }; ``` ### Dynamic Metadata (e.g., Blog Post) ```tsx export async function generateMetadata({ params }): Promise { const product = await getProduct(params.slug); if (!product) return {}; return { title: product.name, description: product.summary, openGraph: { images: [product.coverImage], }, alternates: { canonical: `\/products\/${product.slug}`, }, }; } ``` ## 2. Indexing Control ### Robots Meta Tag Control how individual pages are indexed. ```tsx export const metadata: Metadata = { robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, }; ``` ### Canonical URLs CRITICAL for preventing duplicate content penalties. Always set a self-referencing canonical URL on every page. ## 3. Custom Sitemap & Robots Script > **Note:** User prefers custom scripts over `next-sitemap` or `sitemap.ts`. Create a post-build script to generate `public\/sitemap.xml` and `public\/robots.txt`. ### Script Pattern (`scripts\/generate-sitemap.mjs`) ```javascript import { writeFileSync } from "fs"; import { globby } from "globby"; import prettier from "prettier"; async function generate() { const pages = await globby([ "app\/**\/*.tsx", "!app\/**\/layout.tsx", "!app\/**\/error.tsx", "!app\/api\/**\/*", ]); const sitemap = ` ${pages .map((page) => { const path = page .replace("app", "") .replace(".tsx", "") .replace("\/page", ""); return ` ${`https:\/\/yoursite.com${path}`}<\/loc> ${new Date().toISOString()}<\/lastmod> <\/url> `; }) .join("")} <\/urlset> `; \/\/ Format and write const formatted = await prettier.format(sitemap, { parser: "html" }); writeFileSync("public\/sitemap.xml", formatted); } generate(); ``` **Run it after build:** `"postbuild": "node scripts\/generate-sitemap.mjs"` ## 4. Analytics (GA4 & GSC) ### Google Analytics 4 (GA4) Use `next\/third-parties` for performance-friendly loading. ```tsx \/\/ app\/layout.tsx import { GoogleAnalytics } from "@next\/third-parties\/google"; export default function RootLayout({ children }) { return ( {children}<\/body> <\/html> ); } ``` ### Google Search Console (GSC) Verification via metadata. ```tsx export const metadata: Metadata = { verification: { google: "verification_token", }, }; ``` ## References - [ga4-optimization.md](references\/ga4-optimization.md) - Advanced event tracking and data accuracy - [metadata-deep-dive.md](references\/metadata-deep-dive.md) - Complete reference for Next.js Metadata options - [js-seo-search-console-debugging](..\/js-seo-search-console-debugging\/SKILL.md) - Diagnose and fix GSC errors