Learning Next.js - SEO & Content Strategy

#Introduction

The best application in the world is meaningless if it can't be found. SEO (Search Engine Optimization) determines how easily search engines find, understand, and display your content — and Next.js gives you a big advantage because HTML is rendered on the server.

Episode 17 covers SEO fundamentals for Next.js, meta tags and Open Graph with structured data, sitemap generation and robots configuration, and content-driven page strategies that prioritize performance.

#SEO Fundamentals for Next.js

#The Advantage of Server-Rendered HTML

Because Next.js sends complete HTML from the server, search engines read content directly without executing JavaScript. This differs from a pure SPA, which often fails to be rendered by crawlers. This advantage must be protected: avoid putting important content in components that only render on the client.

The SEO foundation also includes hierarchical heading structure, quality content, internal linking between pages, and speed — factors that reinforce each other.

#Meta Tags, Open Graph, and Structured Data

#Static and Dynamic Metadata

The Metadata API from episode 4 handles titles, descriptions, and Open Graph. For content pages, metadata should be generated from data rather than written by hand:

import type { Metadata } from "next"
 
export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params
  const article = await getArticle(slug)
 
  return {
    title: article.title,
    description: article.excerpt,
    openGraph: {
      title: article.title,
      description: article.excerpt,
      type: "article",
      images: [article.thumbnail],
    },
  }
}

The generateMetadata above generates title and Open Graph from the article data. A page reached from Google will show a relevant title, description, and image — improving click-through rate.

#Structured Data with JSON-LD

Structured data uses the JSON-LD format so search engines understand the content type: article, product, recipe, FAQ. This can surface rich results:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      headline: article.title,
      author: { "@type": "Person", name: "Arman Dwi Pangestu" },
    }),
  }}
/>

The JSON-LD script above tells Google that this page is an article. Validate the result with the Google Rich Results Test before release.

#Sitemap Generation and Robots Configuration

#sitemap.ts and robots.ts

The App Router supports generating sitemaps and robots programmatically. The file app/sitemap.ts exports a list of URLs:

import type { MetadataRoute } from "next"
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://aplikasi-ku.dev",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
  ]
}

The app/sitemap.ts file above generates a sitemap at /sitemap.xml. For content applications, update the sitemap with all article slugs so crawlers find new pages quickly. The function sitemap(): MetadataRoute.Sitemap keeps the URL list always in sync with the data.

#Configuring robots.ts

The file app/robots.ts controls crawler access:

import type { MetadataRoute } from "next"
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/dashboard", "/admin"],
    },
    sitemap: "https://aplikasi-ku.dev/sitemap.xml",
  }
}

The robots configuration above allows all crawlers except for /dashboard and /admin, while pointing to the sitemap location.

#Content-Driven Pages and Performance-First SEO

#SEO-Friendly Content Pages

An ideal content page has: a unique title per page, a description that reflects the content, descriptive URLs, a clean heading hierarchy, and internal links between related articles. Content is part of the strategy, but the technical structure that supports it matters just as much.

#Performance as a Ranking Factor

Performance-first SEO means ensuring Core Web Vitals meet their targets — LCP, INP, and CLS are official Google ranking signals. Combine the techniques from episode 15: optimized images, content rendered on the server, and minimized JavaScript. Fast, complete pages win in the SERPs.

#Closing

Here's what to take away:

• Server-rendered HTML gives an SEO advantage over a pure SPA.
• generateMetadata produces meta tags from content data.
• Open Graph controls how pages look when shared to social media.
• JSON-LD enables rich results with structured data.
• sitemap.ts and robots.ts are managed programmatically.
• Web Vitals performance is an official Google ranking signal.

In the next episode, episode 18, we'll discuss architecture and patterns — application architecture and feature-based structure, modular component design with atomic patterns, domain-driven organization, and design systems and UI component libraries. Your application's code foundation will be neatly arranged for large scale.