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.

Key Differences

Aspect	PWA Kit	Storefront Next
Library	react-helmet	Built-in React component (SeoMeta)
Pattern	Manual Helmet in each page	SeoMeta component
Dynamic Meta	Implemented via Helmet	Implemented via SeoMeta
Hreflang	Not documented	Automatic locale alternates
Canonical URLs	Not documented	With query param normalization
Robots Control	Manual via Helmet	Built-in `noIndex` prop
Social Tags	Manual via Helmet	Open Graph + Twitter Card support
API Integration	Consumes `pageMetaTags`	Uses SeoMeta with dynamic props

Head Management Approach

PWA Kit:

1// Per-page Helmet usage
2import { Helmet } from "react-helmet";
3
4export default function ProductDetail() {
5  return (
6    <>
7      <Helmet>
8        <title>{product.pageTitle}</title>
9        <meta name="description" content={product.pageDescription} />
10      </Helmet>
11      {/* page content */}
12    </>
13  );
14}

Storefront Next:

1// SeoMeta component usage
2import { SeoMeta } from "@/components/seo-meta";
3
4export default function ProductDetail() {
5  return (
6    <>
7      <SeoMeta
8        title={product.pageTitle}
9        description={product.pageDescription}
10        openGraph={{
11          type: "product",
12          url: canonicalUrl,
13          image: product.imageUrl,
14        }}
15      />
16      {/* page content */}
17    </>
18  );
19}

API Meta Tag Consumption

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

1// PWA Kit: Renders each meta tag from API via Helmet
2import { Helmet } from "react-helmet";
3
4<Helmet>
5  <title>{product.pageTitle}</title>
6  <meta name="description" content={product.pageDescription} />
7  {product.pageMetaTags?.map(({ id, value }) => (
8    <meta name={id} content={value} key={id} />
9  ))}
10</Helmet>;

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

1// Storefront Next: Uses SeoMeta component
2import { SeoMeta } from "@/components/seo-meta";
3
4<SeoMeta
5  title={product.pageTitle}
6  description={product.pageDescription}
7  openGraph={{
8    type: "product",
9    url: canonicalUrl,
10    image: product.imageUrl,
11  }}
12  twitter={{ cardType: "summary_large_image" }}
13/>;

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

Key Similarities

Dynamic metadata: Both support dynamic page titles and meta descriptions.
SSR support: Both render meta tags server-side for SEO.
Component-based: Both use React components to manage meta tags.
No structured data: Neither implements JSON-LD by default (can be added manually).

Storefront Next Advantages

Hreflang alternates: Automatically generates locale-specific alternate links with x-default support.
Canonical URLs: Built-in canonical URL generation with query parameter normalization and allowlist.
Social tags: Built-in Open Graph and Twitter Card support via SeoMeta props.
Robots control: Simple noIndex prop for controlling search engine indexing.
Centralized SEO utils: SEO logic consolidated in src/utils/seo.ts and src/utils/canonical-url.ts.
Title modes: Support for suffixed (default), raw, and fallback title rendering.

Storefront Next Hreflang Implementation

Storefront Next automatically generates hreflang tags for all supported locales:

1<!-- Automatically generated in <head> -->
2<link rel="canonical" href="https://www.example.com/global/en-GB/product/123" />
3<link rel="alternate" hreflang="en-GB" href="https://www.example.com/global/en-GB/product/123" />
4<link rel="alternate" hreflang="fr-FR" href="https://www.example.com/global/fr-FR/product/123" />
5<link
6  rel="alternate"
7  hreflang="x-default"
8  href="https://www.example.com/global/en-GB/product/123"
9/>

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

Canonical URL Management

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.

Storefront Conversion Considerations

When migrating from PWA Kit to Storefront Next:

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.
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.
Add noIndex for Protected Pages
- Use <SeoMeta noIndex /> for account, checkout, and order pages.
- This prevents search engines from indexing private content.
Configure Query Parameters
- Update CONTENT_PARAMS in src/utils/canonical-url.ts if you add custom query params that affect page content.
Optional: Add Structured Data
- Consider adding JSON-LD for products, categories, and breadcrumbs.
- Render <script type="application/ld+json"> tags within route components.
Test Multi-Locale Sites
- Verify hreflang links are generated correctly for all locales.
- Confirm canonical URLs strip locale prefixes appropriately.