SEO URL Rules Best Practices for Storefront Next

Properly configured URL rules improve search engine optimization, user experience, and routing performance. Deterministic URLs ensure that a browser can determine the content type (product, category, or content) and how to fetch that content by examining the URL. Deterministic URLs enable faster client-side routing decisions, reduced API calls to resolve URLs, better SEO through predictable URL patterns, and improved performance by avoiding getUrlMapping API calls. This guide outlines best practices for configuring SEO URL rules in Storefront Next and Business Manager.

Storefront Next uses React Router’s file-based routing that’s based on file and folder structure in Storefront Next. See File Route Conventions in the React documentation. The URL path of a request maps to a file name in the src/routes/ folder. For example, a request URL of https://www.example.com/product/{productId} maps to the _app.product.$productId.tsx file.

Another approach is to configure URL rules in Business Manager, and then make Storefront Next routing match those rules. Business Manager enforces certain URL requirements and serves as the canonical configuration for your B2C Commerce instance. Aligning Storefront Next with Business Manager ensures consistency across your commerce ecosystem.

  1. Define URL structure in Business Manager. See Configure SEO URLs for B2C Commerce in Salesforce Help.

  2. Configure Storefront Next routes, which are based on React Router’s file-based routing, to match the URL structure.

    a. Update existing routes in src/routes/ to match the URL structure defined in Business Manager. For example, for the product detail page of \_app.product.\$productId.tsx, modify the file name to \_app.p.$productId[.html].tsx to match the URL structure outlined in URL Guidance for Products.

    b. For new routes, create their corresponding file in src/routes/ and match the file name to the URL structure.

    c. Implement logic in the route loader to extract IDs and slugs and fetch data.

  3. Test URLs in both environments to verify consistency.

When you configure URL rules for products, we recommend that the URL includes:

  • This prefix: /p/.
  • The product ID. Product IDs in the URL make it easier for Storefront Next to fetch product data directly without making additional API calls to resolve the URL.
  • The .html extension to match Business Manager requirements.

When you configure URL rules for categories, we recommend that the URL:

  • Includes this prefix: /c/
  • Includes a category ID and an identifiable URL slug.
  • Has no file extension.

If category IDs aren’t in the URL, Storefront Next must call the getUrlMapping API to resolve the category. The API call adds latency but provides cleaner, more readable URLs.

When you configure URL rules for categories, we recommend that the URL includes:

  • This prefix: /content/.
  • A content ID or an identifiable slug.
  • The .html extension to match Business Manager requirements.