Product JSON-LD - AgentShop

Product pages get a schema.org graph containing:

Product (or ProductGroup with hasVariant for multi-variant products) — name, description, images, brand, and an Offer with price, currency, and availability from your live Shopify data.
BreadcrumbList — store → collection → product trail.

A typical rendered block is ~2.2 KB of valid JSON-LD, served from your Shopify SEO fields and product data. Multi-variant products are modeled the schema.org way: one ProductGroup with each variant as a Product under hasVariant, each carrying its own offer. Only the first 100 variants are included in hasVariant (to keep the bundle small); products with a larger variant matrix are truncated to 100.

Rendering it

Next.js App Router
Next.js Pages Router
Remix
Hydrogen

app/products/[handle]/page.tsx

import { createProductMetadata, ProductJsonLd } from "@agentshop/seo/next";

export const generateMetadata = createProductMetadata();

export default function Page({ params }: { params: { handle: string } }) {
  return (
    <main>
      <ProductJsonLd handle={params.handle} />
    </main>
  );
}

pages/products/[handle].tsx

import { getProductSeoProps, ProductHead } from "@agentshop/seo/next/pages";

export const getServerSideProps = (ctx) => getProductSeoProps(ctx);

export default function ProductPage({ seo }) {
  return (
    <>
      <ProductHead seo={seo} />
      <main>{/* … */}</main>
    </>
  );
}

app/routes/products.$handle.tsx

import { loadProductSeo, agentshopProductMeta } from "@agentshop/seo/remix";

export async function loader({ params }) {
  return await loadProductSeo(params.handle!);
}

export const meta = agentshopProductMeta;

app/routes/products.$handle.tsx

import { loadProductSeo, agentshopProductMeta } from "@agentshop/seo/hydrogen";

export async function loader({ params, context }) {
  return await loadProductSeo(context, params.handle!);
}

export const meta = agentshopProductMeta;

The meta tags that come with it

Alongside the JSON-LD, the product bundle carries the page’s title, meta description, canonical URL, Open Graph, and Twitter card tags — all rendered by the same helpers.

og:type on the App Router: Next’s typed Metadata union doesn’t accept "product" and throws at runtime, so the App Router adapter deliberately omits og:type. Every other Open Graph tag renders normally. The Pages Router, Remix, and Hydrogen adapters emit og:type=product (raw meta tags accept it).

Custom integrations

If you’re not using a shipped adapter, fetch the bundle and render it yourself:

import { fetchProductBundle, serializeJsonLd } from "@agentshop/seo";

const seo = await fetchProductBundle(handle);
// NEVER JSON.stringify straight into a <script> — use serializeJsonLd:
const html = `<script type="application/ld+json">${serializeJsonLd(seo?.jsonLd)}</script>`;

See Security for why serializeJsonLd is mandatory here.

​Rendering it

​The meta tags that come with it

​Custom integrations

Rendering it

The meta tags that come with it

Custom integrations