A Technical SEO Checklist for Next.js Apps

Next.js App Router gives you powerful SEO primitives built in. But knowing which ones to use and how to use them correctly makes the difference between a page that ranks and one that doesn't. Here's my production checklist.

1. generateMetadata for Every Page

Every page and dynamic route gets its own generateMetadata export. Static pages can export a metadata object directly. Dynamic routes should read the slug, fetch the content, and return title and description derived from actual content — not generic fallbacks.

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = getPostBySlug(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: `/api/og?slug=${params.slug}`, width: 1200, height: 630 }],
    },
    alternates: {
      canonical: `https://yoursite.com/blog/${params.slug}`,
    },
  };
}

2. JSON-LD Structured Data

Inline JSON-LD in the layout (Person schema) and on each content page (Article, BreadcrumbList, WebPage). Google uses this to generate rich results. A blog post with Article schema and valid author reference often gets a byline in SERPs.

3. International SEO (hreflang)

For multi-language sites (like this portfolio with EN/ID), the alternates.languages field in metadata generates the correct hreflang link tags. Make sure every locale has its own canonical and every page links to its translations.

4. Core Web Vitals

• LCP: Use next/image with priority on above-fold images. Pre-connect CDN domains.
• CLS: Set explicit width and height on all images and embeds. Avoid dynamic content insertion above existing content.
• INP: Use React Server Components by default. Only hydrate interactive islands. Avoid heavy client-side JS bundles.
• TTFB: Use ISR or static generation. Avoid data fetching in layouts.

5. Sitemap and Robots

Generate sitemap.ts dynamically in the app directory. Include all static pages, all dynamic slugs, and correct locale prefixes. Set a lastModified date from your data source if available. A properly structured sitemap accelerates crawl budget efficiency for larger sites.

6. Open Graph Images with next/og

The opengraph-image.tsx convention generates per-page OG images at the edge. Custom OG images dramatically improve click-through rates from social sharing. Build a consistent design system for your OG images — same fonts, colors, and layout — so they look professional when shared.

SEO is a compound investment. Most of these changes take an hour to implement and pay dividends for years. The time to add them is during initial development, not after you realize you need them.