sfnext-seo

Storefront Next SEO

In-project references: docs/README-SEO.md, docs/README-AEO-GEO.md, docs/README-MULTI-SITE.md (URL Config), docs/README-MULTI-DOMAIN.md, docs/README-BASE-PATH.md, docs/migrations/seo-url-rules/README.md. Read them for depth; this skill is the task map.

Page metadata: SeoMeta

import { SeoMeta } from '@/components/seo-meta';

<SeoMeta title={t('meta.title', { defaultValue: 'My Page' })} description={t('meta.description', { defaultValue: '...' })} />
<SeoMeta title="Checkout" noIndex />            {/* private/transactional pages */}
<SeoMeta rawTitle title="Store Name" />         {/* no " | Site Name" suffix */}
<SeoMeta title={name} openGraph={{ type: 'product', url: pageUrl, image }} />

Props (verified in src/components/seo-meta/index.tsx): title, rawTitle, description, noIndex, siteName, twitter, openGraph. Open Graph input auto-derives X card tags unless twitter is set. Use noIndex for cart, checkout, account, and other non-public pages. Root-level canonical and hreflang descriptors come from src/utils/seo.ts and src/utils/canonical-url.ts; routes do not add them.

Structured data: JsonLd

import { JsonLd } from '@/components/json-ld';

<JsonLd data={productSchema} id="product-schema" nonce={nonce} />

Pass the CSP nonce so the inline script is allowed. Builders live in src/utils/product-schema.ts, category-schema.ts, schema-url.ts. PDP emits Product; PLP emits CollectionPage + ItemList (see docs/README-AEO-GEO.md).

One URL everywhere

Canonical <link>, og:url and JSON-LD url must agree. In loaders:

import { buildSeoPageUrl } from '@/lib/seo/page-url.server';
import { redirectToCanonicalPath } from '@/lib/seo/canonical-redirect.server';

redirectToCanonicalPath(requestUrl);                 // 301 for trailing slash
const pageUrl = buildSeoPageUrl(context, requestUrl); // origin + canonical path/query

Only allowlisted query params survive in canonicals (CONTENT_PARAMS in src/utils/canonical-url.ts: q, offset, sort, refine, pid by default). Add a param only if it changes main page content, and add a test next to canonical-url.test.ts.