Technical SEO for Next.js: SSR, JSON-LD, and Sitemaps

I don't offer SEO as a service. But every site I build ships with technical SEO baked in — because it's not marketing, it's engineering. A site that search engines can't crawl or understand is a site that doesn't work properly. In the pikkuna.fi e-commerce build, that meant correct hreflang across 30 languages, server-rendered product pages, and JSON-LD that survived localization. Same principles, scaled up.

slug="mvp-development"
text="Building a Next.js project that needs to rank from day one? SSR, structured data, and sitemaps are part of what I ship — not add-ons."
/>

Server-Side Rendering by Default

Single-page apps with client-side rendering are invisible to most crawlers. Every project I build uses Next.js App Router with server components:

// app/products/[slug]/page.tsx
export default async function ProductPage({
  params
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params;
  const product = await getProduct(slug);

  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </article>
  );
}

The HTML arrives fully rendered. No JavaScript required for indexing.

Dynamic Meta Tags

Every page gets proper meta tags generated from actual content:

// app/products/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const product = await getProduct(slug);

  return {
    title: `${product.name} | Store`,
    description: product.description.slice(0, 160),
    openGraph: {
      title: product.name,
      description: product.description,
      images: [product.image],
    },
  };
}

This handles SEO meta tags, Open Graph for social sharing, and Twitter cards — all from one function.

JSON-LD Structured Data

Schema.org markup tells search engines exactly what the content represents:

function ProductJsonLd({ product }: { product: Product }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    description: product.description,
    image: product.image,
    offers: {
      "@type": "Offer",
      price: product.price,
      priceCurrency: "EUR",
      availability: "https://schema.org/InStock",
    },
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}

I add appropriate schemas based on content type: Product, Article, Organization, FAQPage, BreadcrumbList.

Automatic Sitemap Generation

Next.js can generate sitemaps from your data:

// app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await getAllProducts();

  return [
    { url: "https://example.com", lastModified: new Date() },
    ...products.map((p) => ({
      url: `https://example.com/products/${p.slug}`,
      lastModified: p.updatedAt,
    })),
  ];
}

No plugins, no external services. Just code that generates /sitemap.xml at build time.

---

This isn't optimization work you hire someone for later. It's the baseline for a properly built website. When I deliver a project, the technical SEO foundation is already there — because skipping it means shipping broken software.

If you want to go further with the indexing layer, read IndexNow in Next.js: Instant Indexing After Every Deploy and llms.txt for AI Discoverability. Together with the patterns above, that's the full stack.

slug="seo-audit"
text="Want this same checklist applied to your existing site? Fixed-fee Technical SEO Audit — keyword research per market, schema, sitemap, hreflang, Core Web Vitals, indexing, broken links, OG images — delivered as a prioritised written report in 5 working days."
/>

For MVP development with this foundation built in from the start — get in touch.