Product JSON-LD (a schema.org Product graph with price and availability), page titles, meta descriptions, and Open Graph tags come from the SSR packages: @storesynk/astro, @storesynk/next, or @storesynk/react (verified against 0.1.0-beta.8). A plain static page that loads storesynk.js renders live data into the DOM but emits no structured data, because there is no server to write it.
Astro. <StoresynkSEO> renders the whole head-level set. Place it in <head>:
---import { StoresynkSEO } from '@storesynk/astro/components';---<head> <StoresynkSEO handle="example-product" siteName="My Store" /></head>Next.js (App Router). productMetadata in generateMetadata supplies the head half; <StoresynkProductJsonLd> renders a body-level JSON-LD script:
import { StoresynkProductJsonLd, productMetadata } from '@storesynk/next';
export const generateMetadata = () => productMetadata('example-product', { siteName: 'My Store' });
const ProductPage = () => ( <StoresynkProductJsonLd handle="example-product" url="https://example.com/products/example-product" /> /* …the rest of the page… */);React (classic SSR). Run renderProductJsonLd in your data layer and hand its result to the component via prepared. productSeo from @storesynk/react/server returns a head-neutral SEO object you map onto your router’s head.
Options
Section titled “Options”| Wrapper | Prop | Default | What it does |
|---|---|---|---|
<StoresynkSEO> (Astro) | handle | (required) | The product to describe. |
<StoresynkSEO> | title / description / url | (from the product) | Override the derived values. |
<StoresynkSEO> | siteName | (none) | Appended to the default title. |
<StoresynkProductJsonLd> (Next/React) | handle | (required) | The product to describe (React takes prepared instead). |
<StoresynkProductJsonLd> | url | (none) | Canonical product URL written into the graph. |
productMetadata(handle, opts) (Next) | title / description / url / siteName | (from the product) | Returns a Next Metadata for generateMetadata. |
Gotchas
Section titled “Gotchas”- A static build freezes the JSON-LD’s price and availability at build time. Rebuild on Shopify webhooks, or use an SSR adapter for per-request freshness. See SSR.
<StoresynkSEO>belongs in<head>; Next’s<StoresynkProductJsonLd>is body-level by design. The wrong slot silently degrades what crawlers see.