SEO and Metadata Differences with PWA Kit

PWA Kit uses react-helmet to manage meta tags, with developers manually adding Helmet components to each page. Storefront Next provides a comprehensive SEO system built around the SeoMeta component, with built-in support for hreflang alternates, canonical URLs, Open Graph, Twitter Cards, and robots control. Both support dynamic metadata, but Storefront Next offers a more complete, production-ready SEO implementation out of the box.

AspectPWA KitStorefront Next
Libraryreact-helmetBuilt-in React component (SeoMeta)
PatternManual Helmet in each pageSeoMeta component
Dynamic MetaImplemented via HelmetImplemented via SeoMeta
HreflangNot documentedAutomatic locale alternates
Canonical URLsNot documentedWith query param normalization
Robots ControlManual via HelmetBuilt-in noIndex prop
Social TagsManual via HelmetOpen Graph + Twitter Card support
API IntegrationConsumes pageMetaTagsUses SeoMeta with dynamic props

PWA Kit:

Storefront Next:

PWA Kit consumes the Commerce API’s pageMetaTags array directly:

Storefront Next uses the SeoMeta component with explicit props rather than consuming pageMetaTags directly:

If you need to consume pageMetaTags in Storefront Next, you can map them to the SeoMeta props or render them as additional meta tags.

  1. Dynamic metadata: Both support dynamic page titles and meta descriptions.
  2. SSR support: Both render meta tags server-side for SEO.
  3. Component-based: Both use React components to manage meta tags.
  4. No structured data: Neither implements JSON-LD by default (can be added manually).
  1. Hreflang alternates: Automatically generates locale-specific alternate links with x-default support.
  2. Canonical URLs: Built-in canonical URL generation with query parameter normalization and allowlist.
  3. Social tags: Built-in Open Graph and Twitter Card support via SeoMeta props.
  4. Robots control: Simple noIndex prop for controlling search engine indexing.
  5. Centralized SEO utils: SEO logic consolidated in src/utils/seo.ts and src/utils/canonical-url.ts.
  6. Title modes: Support for suffixed (default), raw, and fallback title rendering.

Storefront Next automatically generates hreflang tags for all supported locales:

PWA Kit does not provide built-in hreflang support. You would need to implement this manually using react-helmet.

Storefront Next includes sophisticated canonical URL handling with query parameter normalization:

Allowed parameters (kept in canonical URL):

  • q - search query
  • offset - pagination
  • sort - sort order
  • refine - filters
  • pid - product variant ID

Removed parameters: All tracking params, analytics IDs, and non-content parameters are stripped.

PWA Kit does not provide built-in canonical URL management. You would need to implement this manually.

When migrating from PWA Kit to Storefront Next:

  1. Replace react-helmet with SeoMeta

    • Remove react-helmet imports and <Helmet> components.
    • Replace with <SeoMeta> component from @/components/seo-meta.
    • Convert inline meta tags to SeoMeta props.

  2. Leverage Built-in SEO Features

    • Hreflang alternates are already configured in src/utils/seo.ts.
    • Canonical URLs are automatically generated via src/utils/canonical-url.ts.
    • Add openGraph and twitter props to SeoMeta for social sharing.

  3. Add noIndex for Protected Pages

    • Use <SeoMeta noIndex /> for account, checkout, and order pages.
    • This prevents search engines from indexing private content.

  4. Configure Query Parameters

    • Update CONTENT_PARAMS in src/utils/canonical-url.ts if you add custom query params that affect page content.

  5. Optional: Add Structured Data

    • Consider adding JSON-LD for products, categories, and breadcrumbs.
    • Render <script type="application/ld+json"> tags within route components.

  6. Test Multi-Locale Sites

    • Verify hreflang links are generated correctly for all locales.
    • Confirm canonical URLs strip locale prefixes appropriately.