Building an SEO-Friendly E-Commerce Site with Next.js: What Actually Matters

Building an e-commerce website with Next.js is relatively easy.

Building one that is fast, crawlable, scalable, and actually performs well in search is a different challenge.

In production e-commerce projects, SEO problems usually do not come from one missing meta tag. They come from architecture decisions: URL structures, dynamic rendering, duplicate pages, canonical handling, sitemap generation, product variants, faceted navigation, and performance.

This article covers the SEO areas that matter most when building a modern e-commerce site with Next.js.

1. Start with the URL structure

A clean URL structure is one of the first things I define in an e-commerce project.

Instead of URLs like:

/product?id=92831

I prefer structures such as:

/products/turkish-coffee

or:

/coffee/turkish-coffee

A good URL should be:

• readable
• stable
• descriptive
• independent from database IDs where possible
• easy to maintain when the catalog grows

Changing URL structures after hundreds or thousands of pages are indexed creates unnecessary migration work.

2. Generate metadata dynamically

With the Next.js App Router, generateMetadata makes it possible to generate metadata based on product or category data.

A simplified example:

export async function generateMetadata({ params }) {
  const product = await getProduct(params.slug)

  return {
    title: `${product.name} | My Store`,
    description: product.metaDescription,
    alternates: {
      canonical: `/products/${product.slug}`,
    },
  }
}

For e-commerce sites, metadata usually needs to be managed separately for:

• products
• categories
• brands
• blog posts
• landing pages

I also prefer allowing metadata to be overridden from the admin panel instead of generating everything automatically.

3. Canonical URLs are critical

E-commerce systems can generate multiple URLs that point to almost the same content.

For example:

/products/chair
/products/chair?color=black
/products/chair?utm_source=instagram

If these pages represent the same core product, defining a canonical URL helps search engines understand which version should be treated as primary.

For example:

<link rel="canonical" href="https://example.com/products/chair" />

Canonical handling becomes even more important when filters and sorting options are involved.

4. Be careful with faceted navigation

Filters are useful for users but can create thousands of low-value URLs.

Imagine a category with filters for:

• color
• size
• material
• price
• brand
• availability

You can quickly end up with URLs such as:

/chairs?color=black&material=wood&price=100-200

If every combination becomes indexable, crawl space can grow dramatically.

A common strategy is to allow important category pages to be indexed while controlling low-value filter combinations through canonical rules, robots directives, or routing decisions.

This should be planned early rather than fixed after the site grows.

5. Product variants need a clear SEO strategy

Variants are another common source of duplicate content.

Suppose a product exists in:

• black
• white
• blue

You need to decide whether each variant deserves its own indexable page.

For most stores, one main product URL with selectable variants is enough.

However, separate pages may make sense if variants have significantly different search demand, content, or commercial intent.

The important part is consistency.

6. Generate sitemaps dynamically

Large e-commerce sites should not rely on manually maintained sitemaps.

The sitemap should be generated from actual application data.

Typical sitemap entries include:

• product pages
• category pages
• brand pages
• blog posts
• important static pages

For larger catalogs, splitting sitemaps is usually better:

/sitemap-products.xml
/sitemap-categories.xml
/sitemap-blog.xml

This also makes debugging indexing problems easier.

7. Keep robots.txt intentional

A robots file should not be treated as something you configure once and forget.

Depending on the project, you may want to prevent crawling of:

• admin routes
• internal search results
• account pages
• checkout pages
• cart pages
• test environments

For example:

User-agent: *
Disallow: /admin/
Disallow: /checkout/
Disallow: /cart/
Disallow: /search/

Be careful not to block resources or pages that search engines need to render the site correctly.

8. Add structured data

Structured data is especially important in e-commerce.

Useful schema types include:

• Product
• Offer
• BreadcrumbList
• Organization
• Article
• FAQPage

A product schema can include:

• product name
• image
• price
• currency
• availability
• SKU
• brand

The structured data should match what the user can actually see on the page.

Do not treat schema as a place to add information that does not exist in the UI.

9. Optimize images aggressively

Product-heavy sites often suffer from image-related performance problems.

Typical optimizations include:

• using the Next.js Image component
• correct width and height values
• responsive image sizes
• modern image formats
• lazy loading below-the-fold images
• avoiding oversized source files

Example:

<Image
  src={product.image}
  alt={product.name}
  width={800}
  height={800}
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Image quality still matters in e-commerce, so optimization should not destroy visual quality.

The goal is balance.

10. Core Web Vitals matter

Performance and SEO are closely related because slow pages also create bad user experiences.

In e-commerce, I usually pay special attention to:

• Largest Contentful Paint
• Interaction to Next Paint
• Cumulative Layout Shift

Common causes of poor performance include:

• oversized hero images
• too much client-side JavaScript
• unnecessary third-party scripts
• large sliders
• rendering too many products at once
• poorly optimized fonts

Next.js provides useful tools, but the framework cannot compensate for bad architecture.

11. Server rendering should be used intentionally

One of the biggest advantages of Next.js is having multiple rendering strategies available.

For e-commerce pages, I prefer making the rendering strategy explicit.

For example:

• product pages → server-rendered or cached
• category pages → cached with periodic revalidation
• admin pages → client-heavy
• static marketing pages → statically generated where possible

The important question is not:

Should I use SSR or SSG?

The better question is:

What rendering strategy makes sense for this specific page?

12. Avoid hiding important content behind JavaScript

Search engines are better at rendering JavaScript than they used to be, but important content should still be available as early as possible.

For product pages, key content includes:

• product name
• price
• description
• availability
• category
• breadcrumbs

If all of this only appears after multiple client-side requests, you are creating unnecessary complexity.

13. Internal linking is underrated

E-commerce sites naturally have strong internal linking opportunities.

A good structure can connect:

Category
  ↓
Subcategory
  ↓
Product
  ↓
Related products

Blog content can also link into commercial pages.

For example:

"How to choose the right office chair"

can naturally link to:

/office-chairs

This helps both users and crawlers discover important pages.

14. SEO should also exist in the admin panel

One mistake I see often is building SEO entirely inside the codebase.

For a real commercial project, content teams should usually be able to manage:

• title
• meta description
• slug
• canonical
• index/noindex
• Open Graph image

from the administration panel.

This reduces developer dependency and makes the platform more sustainable.

15. Monitor indexing after launch

Launching the project is not the end of the SEO work.

After launch, I monitor:

• indexed page count
• excluded pages
• canonical issues
• crawl errors
• sitemap status
• Core Web Vitals
• product rich results
• organic landing pages

Google Search Console is particularly useful for identifying unexpected indexing behavior.

Final thoughts

Next.js provides a strong technical foundation for e-commerce, but good SEO does not come automatically from using the framework.

The most important work happens in the architecture:

• predictable URLs
• correct canonical handling
• controlled faceted navigation
• efficient rendering
• structured data
• internal linking
• performance
• maintainable metadata

If these decisions are made early, scaling the catalog becomes much easier.

These are also principles we apply when building custom e-commerce systems at Iconium Bilişim.

A good e-commerce platform should not only work today. It should remain manageable when the number of products, integrations, customers, and landing pages grows.