# js-nextjs-technical-seo > 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. - Author: Duy Pham - Repository: duypham2407/skills-workflows - Version: 20260125144132 - Stars: 0 - Forks: 0 - Last Updated: 2026-02-06 - Source: https://github.com/duypham2407/skills-workflows - Web: https://mule.run/skillshub/@@duypham2407/skills-workflows~js-nextjs-technical-seo:20260125144132 --- --- 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}`} ${new Date().toISOString()} `; }) .join("")} `; // 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} ); } ``` ### 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