SEO and structured data

• buildSeo(options) from @quickbutik/kit: pure and framework-free. Produces titles, canonical URLs, OpenGraph, Twitter cards and structured data from a product, a category or the shop. Use it in Next’s generateMetadata, an Astro layout or a TanStack Start head().
• <SEO /> from @quickbutik/kit/react and <qb-seo> from the elements: render the same payload as real tags.

​

React

// Near the root: the values every page would otherwise repeat
<SeoProvider
  baseUrl="https://minbutik.se"
  shop={shop}
  currency="SEK"
  productPath="/products/{slug}"
  organization
>
  {children}
</SeoProvider>

// A product page inside <ProductProvider> needs nothing:
<ProductProvider slug={slug}>
  <SEO />
</ProductProvider>

// Or explicitly:
<SEO product={product} url={`/products/${product.slug}`} />
<SEO category={category} url={`/categories/${category.slug}`} />
<SEO title="Sök" noIndex />

​

Where the tags land

​

Next.js App Router

import { buildSeo, toNextMetadata } from "@quickbutik/kit"
import { JsonLd } from "@quickbutik/kit/react"

export async function generateMetadata({ params }) {
  const product = await getProduct((await params).slug)
  return toNextMetadata(buildSeo({ product, ...defaults }))
}

export default async function Page({ params }) {
  const product = await getProduct((await params).slug)
  const tags = buildSeo({ product, ...defaults })
  return <><JsonLd data={tags.jsonLd} />{/* … */}</>
}

​

Web components

<qb-product slug="cotton-tee">
  <qb-seo base-url="https://minbutik.se" product-path="/products/{slug}" currency="SEK" organization></qb-seo>
</qb-product>

​

Other stacks

import { buildSeo, serializeJsonLd } from "@quickbutik/kit"

const tags = buildSeo({
  product,
  baseUrl: "https://minbutik.se",
  currency: "SEK",
  url: `/products/${product.slug}`,
  shop,
})

// tags.title, tags.description, tags.canonical, tags.robots, tags.openGraph, tags.twitter
for (const node of tags.jsonLd) {
  // <script type="application/ld+json">{serializeJsonLd(node)}</script>
}

​

SeoDefaults

​

Structured data

import {
  productJsonLd, breadcrumbJsonLd, organizationJsonLd,
  productAvailability, variantAvailability, serializeJsonLd,
  formatSchemaPrice, currencyDecimals, absoluteUrl, applyTitleTemplate, plainText,
} from "@quickbutik/kit"

• Offer vs. AggregateOffer. A single-priced product gets an Offer; variants that differ in price get an AggregateOffer. Offers are omitted entirely when no currency is known, rather than publishing a wrong price.
• stock: null is InStock. It means the shop does not track inventory. preorder wins when set.
• Prices use the currency’s real decimals and are emitted as strings, so JPY is not reported as a hundredth of its price.
• Publish the price you charge. Offers and og:price:* use product.currency. A product read in a "display" currency is shown converted but charged in the shop’s currency, so its structured data would publish a price no order is charged. Read the product for SEO in the shop’s own currency, for example products.getBySlug(slug, { currency: null }) on the server, and keep the shopper’s currency for the visible page.
• Every < is escaped as <, so a product name containing </script> cannot break out of the tag.
• breadcrumbJsonLd positions are 1-based and contiguous. A category’s ancestors and path let buildSeo({ category }) emit a BreadcrumbList with no extra requests.

​

Rules

• Never index a page that belongs to one shopper. noIndex on the cart and on /success/*; noIndex noFollow on the thank-you page.
• noIndex filtered and paginated listings and search results, so filter combinations do not compete with the canonical catalog.
• Soft 404s. A product lookup inside <Suspense> has already streamed a 200 when it turns out to be missing. Render <SEO noIndex /> in the notFound branch, or await the lookup and call the framework’s notFound().
• Fix baseUrl in config. Deriving it from the request’s Host header is an SEO poisoning vector. Use NEXT_PUBLIC_SITE_URL or equivalent.