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

Iconium Bilisim — Wed, 07 Oct 2026 16:32:58 +0000

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.

DEV Community: Iconium Bilisim

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

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

1. Start with the URL structure

2. Generate metadata dynamically

3. Canonical URLs are critical

4. Be careful with faceted navigation

5. Product variants need a clear SEO strategy

6. Generate sitemaps dynamically

7. Keep robots.txt intentional

8. Add structured data

9. Optimize images aggressively

10. Core Web Vitals matter

11. Server rendering should be used intentionally

12. Avoid hiding important content behind JavaScript

13. Internal linking is underrated

14. SEO should also exist in the admin panel

15. Monitor indexing after launch

Final thoughts