create-brainerce-store 1.53.0 → 1.54.0

package/templates/nextjs/base/src/components/seo/article-json-ld.tsx

@@ -0,0 +1,59 @@
+import type { BlogPost } from 'brainerce';
+import { buildArticleJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+
+interface ArticleJsonLdProps {
+  post: BlogPost;
+  url: string;
+  /** Store display name — feeds Article.publisher (and the author fallback). */
+  organizationName?: string;
+}
+
+/**
+ * Article + BreadcrumbList structured data for a blog post page.
+ *
+ * Uses the SDK builders for the schema shape, but renders the <script> here so
+ * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
+ */
+export async function ArticleJsonLd({ post, url, organizationName }: ArticleJsonLdProps) {
+  const nonce = await getNonce();
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const articleJsonLd = buildArticleJsonLd(post, {
+    siteUrl: baseUrl,
+    path: url,
+    organizationName,
+  });
+
+  const breadcrumbJsonLd = buildBreadcrumbJsonLd([
+    { name: 'Home', url: baseUrl || '/' },
+    { name: 'Blog', url: `${baseUrl}/blog` },
+    { name: post.title, url },
+  ]);
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(articleJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Escape `<`, `>`, `&` so AI-generated article copy can't break out of the
+// <script> element or inject HTML.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

package/templates/nextjs/base/src/components/seo/category-json-ld.tsx

@@ -0,0 +1,61 @@
+import type { CategoryDetail } from 'brainerce';
+import { buildCollectionPageJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+
+interface CategoryJsonLdProps {
+  category: CategoryDetail;
+  url: string;
+}
+
+/**
+ * CollectionPage + BreadcrumbList structured data for a category (collection)
+ * landing page. NEVER emit Product markup on a listing page — Google's Product
+ * rich results are single-product only (see ProductJsonLd for PDPs).
+ *
+ * Uses the SDK builders for the schema shape, but renders the <script> here so
+ * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
+ */
+export async function CategoryJsonLd({ category, url }: CategoryJsonLdProps) {
+  const nonce = await getNonce();
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const collectionJsonLd = buildCollectionPageJsonLd(category, { siteUrl: baseUrl, path: url });
+
+  // Breadcrumb: Home → ancestor categories → this category.
+  const crumbs: Array<{ name: string; url: string }> = [
+    { name: 'Home', url: baseUrl || '/' },
+  ];
+  for (const ancestor of category.breadcrumb) {
+    if (ancestor.slug) {
+      crumbs.push({ name: ancestor.name, url: `${baseUrl}/category/${ancestor.slug}` });
+    }
+  }
+  crumbs.push({ name: category.name, url });
+  const breadcrumbJsonLd = buildBreadcrumbJsonLd(crumbs);
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(collectionJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Escape `<`, `>`, `&` so merchant-authored category copy can't break out of
+// the <script> element or inject HTML.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

package/templates/nextjs/base/src/components/seo/organization-json-ld.tsx

@@ -58,8 +58,11 @@ export async function OrganizationJsonLd({ storeInfo, baseUrl }: OrganizationJso
     potentialAction: {
       '@type': 'SearchAction',
       target: {
+        // Must match the storefront's real search param — the product listing
+        // reads `?search=` (see use-product-listing.ts), not `?q=`. A wrong
+        // param makes the sitelinks search box land on an empty listing.
         '@type': 'EntryPoint',
-        urlTemplate: `${baseUrl}/products?q={search_term_string}`,
+        urlTemplate: `${baseUrl}/products?search={search_term_string}`,
       },
       'query-input': 'required name=search_term_string',
     },

package/templates/nextjs/base/src/components/seo/product-json-ld.tsx

@@ -48,6 +48,7 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
   // and AI Overviews ingest this field directly and reject markup. Strip HTML
   // first; if the description is empty after stripping, fall back to the name.
   const cleanDescription = stripHtmlForSeo(product.description) || product.name;
+  const brandName = product.brands?.[0]?.name;
   const productJsonLd: Record<string, unknown> = {
     '@context': 'https://schema.org',
     '@type': 'Product',
@@ -56,6 +57,12 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
     image: imageUrl,
     url,
     sku: product.sku || product.id,
+    // Brand + identifiers qualify the PDP for Google's free merchant listings
+    // (no Merchant Center feed needed). Emitted only when present — Google
+    // penalizes fabricated identifiers.
+    ...(brandName ? { brand: { '@type': 'Brand', name: brandName } } : {}),
+    ...(product.gtin ? { gtin: product.gtin } : {}),
+    ...(product.mpn ? { mpn: product.mpn } : {}),
     offers,
   };