Add page metadata across every route

The root layout exported no metadata, so routes without their own export
rendered no title at all, and no route had a description. Add a root
metadata block with a title template, Open Graph and Twitter defaults,
and fill in the routes that were missing tags.

- config/site.ts: description and env-driven absolute url for metadataBase
- home, /collections and /shop/collections: titles and descriptions
- products/[handle] and collections/[handle]: generateMetadata off the
  existing catalog fetchers, with canonical and OG image
- existing titles: drop the hand-written " — Shop" suffix now that the
  root template appends it

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011x5jT4fJJCnqPx3umEvXRk
This commit is contained in:
Rami Bitar
2026-08-09 09:35:57 -04:00
co-authored by Claude Opus 5
parent a230187e9f
commit 0263a59c6a
15 changed files with 160 additions and 8 deletions
+24
View File
@@ -1,4 +1,5 @@
import React from 'react';
import type { Metadata } from 'next';
import './globals.css';
import { Geist, Geist_Mono } from 'next/font/google';
import Header from '@/components/shopify/header';
@@ -16,6 +17,29 @@ const geistMono = Geist_Mono({
variable: '--font-geist-mono',
});
// Routes only set their own `title`; the template appends the store name, and
// everything else here is inherited unless a page overrides it.
export const metadata: Metadata = {
metadataBase: new URL(site.url),
title: {
default: site.storeName,
template: `%s — ${site.storeName}`,
},
description: site.description,
openGraph: {
type: 'website',
siteName: site.storeName,
title: site.storeName,
description: site.description,
url: '/',
},
twitter: {
card: 'summary_large_image',
title: site.storeName,
description: site.description,
},
};
export default function RootLayout({
children,
}: {