create-brainerce-store 1.88.1 → 1.89.0

package/templates/nextjs/base/src/app/blog/[slug]/{page.tsx.ejs → page.tsx}

@@ -6,6 +6,12 @@
  * - Injects Article JSON-LD for Google rich snippets
  * - Body HTML is sanitized before rendering
  *
+ * One implementation for single- and multi-language stores: `locale` exists only
+ * under the `[locale]` segment and is `undefined` otherwise. Every string comes
+ * from the `blog` message namespace in the request locale; none is a
+ * `locale === 'he'` ternary, which gave every third language English and forced
+ * `dir="ltr"` onto Arabic.
+ *
  * Security: always pass blog content through sanitizeHtml before dangerouslySetInnerHTML.
  */
 import * as React from 'react';
@@ -16,14 +22,15 @@ import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import { ArticleJsonLd } from '@/components/seo/article-json-ld';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
 
+import { defaultLocale } from '@/i18n';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
+import { localePath } from '@/core/lib/locale-path';
+import { getServerNamespace } from '@/core/lib/server-messages';
 import { sanitizeHtml } from '@/core/lib/sanitize';
 import { decodeSlug } from '@/core/lib/utils';
 
-
-<% if (i18nEnabled) { %>
 type PageProps = {
-  params: Promise<{ locale: string; slug: string }>;
+  params: Promise<{ locale?: string; slug: string }>;
 };
 
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
@@ -41,8 +48,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
   const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
   const SITE_URL = await getCanonicalSiteUrl();
-  const canonicalPath =
-    locale && locale !== defaultLoc ? `/${locale}/blog/${post.slug}` : `/blog/${post.slug}`;
+  const canonicalPath = localePath(locale, `/blog/${post.slug}`);
   const hreflangLanguages =
     supportedLocales.length > 1
       ? Object.fromEntries([
@@ -63,9 +69,12 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
       canonical: canonicalPath,
       ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
     },
+    // `openGraph` replaces the root layout's object wholesale rather than merging
+    // into it, so `siteName` is repeated here.
     openGraph: {
       title: post.seoTitle ?? post.title,
       description: post.seoDescription ?? post.excerpt ?? undefined,
+      ...(storeInfo?.name ? { siteName: storeInfo.name } : {}),
       type: 'article',
       publishedTime: post.publishedAt ?? undefined,
       authors: post.author ? [post.author] : undefined,
@@ -95,29 +104,43 @@ export default async function BlogPostPage({ params }: PageProps) {
     // Default locale stays unprefixed (matches the sitemap/hreflang convention).
     const redirect = await client.resolveSlugRedirect('blog', slug);
     if (redirect) {
-      const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
-      const prefix = locale && locale !== defaultLoc ? `/${locale}` : '';
-      permanentRedirect(`${prefix}/blog/${redirect.currentSlug}`);
+      permanentRedirect(localePath(locale, `/blog/${redirect.currentSlug}`));
     }
     notFound();
   }
 
-  const isHe = locale === 'he';
-  const dir = isHe ? 'rtl' : 'ltr';
-  const backLabel = isHe ? '← חזרה לבלוג' : '← Back to blog';
-  const SITE_URL = await getCanonicalSiteUrl();
-  const articleUrl = `${SITE_URL}/blog/${post.slug}`;
+  const [SITE_URL, strings, seo] = await Promise.all([
+    getCanonicalSiteUrl(),
+    getServerNamespace('blog', locale),
+    getServerNamespace('seo', locale),
+  ]);
+  // The same URL the canonical tag names (locale prefix included), so the
+  // Article JSON-LD cannot point at a different page than the page declares.
+  const articleUrl = `${SITE_URL}${localePath(locale, `/blog/${post.slug}`)}`;
+  const breadcrumbs = [
+    { name: seo.home ?? '', url: `${SITE_URL}${localePath(locale, '/')}` },
+    { name: seo.blog ?? '', url: `${SITE_URL}${localePath(locale, '/blog')}` },
+    { name: post.title, url: articleUrl },
+  ];
 
   return (
-    <main dir={dir} className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <ArticleJsonLd post={post} url={articleUrl} organizationName={storeInfo?.name} />
+    <main className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <ArticleJsonLd
+        post={post}
+        url={articleUrl}
+        organizationName={storeInfo?.name}
+        breadcrumbs={breadcrumbs}
+      />
 
       {/* Back link */}
       <Link
-        href="/blog"
+        href={localePath(locale, '/blog')}
         className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
-        {backLabel}
+        <span aria-hidden="true" className="rtl:rotate-180">
+          ←
+        </span>
+        {strings.backToBlog}
       </Link>
 
       {/* Category */}
@@ -139,7 +162,7 @@ export default async function BlogPostPage({ params }: PageProps) {
         {post.author && <span className="font-medium text-foreground">{post.author}</span>}
         {post.publishedAt && (
           <time dateTime={post.publishedAt}>
-            {new Date(post.publishedAt).toLocaleDateString(isHe ? 'he-IL' : 'en-US', {
+            {new Date(post.publishedAt).toLocaleDateString(locale ?? defaultLocale, {
               year: 'numeric',
               month: 'long',
               day: 'numeric',
@@ -189,129 +212,3 @@ export default async function BlogPostPage({ params }: PageProps) {
     </main>
   );
 }
-<% } else { %>
-type PageProps = {
-  params: Promise<{ slug: string }>;
-};
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const { slug: rawSlug } = await params;
-  const slug = decodeSlug(rawSlug);
-  const post = await (await getServerClient()).blog.getPost(slug).catch(() => null);
-  if (!post) return { title: slug };
-  return {
-    title: post.seoTitle ?? post.title,
-    description: post.seoDescription ?? post.excerpt,
-    alternates: { canonical: `/blog/${post.slug}` },
-    openGraph: {
-      title: post.seoTitle ?? post.title,
-      description: post.seoDescription ?? post.excerpt ?? undefined,
-      type: 'article',
-      publishedTime: post.publishedAt ?? undefined,
-      authors: post.author ? [post.author] : undefined,
-      images: post.ogImageUrl
-        ? [{ url: post.ogImageUrl }]
-        : post.coverImageUrl
-          ? [{ url: post.coverImageUrl }]
-          : undefined,
-    },
-  };
-}
-
-export default async function BlogPostPage({ params }: PageProps) {
-  const { slug: rawSlug } = await params;
-  const slug = decodeSlug(rawSlug);
-  const client = await getServerClient();
-  const [post, storeInfo] = await Promise.all([
-    // getPost returns null only on a genuine 404; any other API failure (a
-    // 403 from the channel's origin check, a network error) throws and
-    // surfaces as the error it is instead of masquerading as a missing post.
-    client.blog.getPost(slug),
-    client.getStoreInfo().catch(() => null),
-  ]);
-  if (!post) {
-    // The slug may have been renamed — 301 to the current slug so the old
-    // URL keeps its ranking; genuine unknowns fall through to the 404 page.
-    const redirect = await client.resolveSlugRedirect('blog', slug);
-    if (redirect) permanentRedirect(`/blog/${redirect.currentSlug}`);
-    notFound();
-  }
-
-  const SITE_URL = await getCanonicalSiteUrl();
-  const articleUrl = `${SITE_URL}/blog/${post.slug}`;
-
-  return (
-    <main className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <ArticleJsonLd post={post} url={articleUrl} organizationName={storeInfo?.name} />
-
-      <Link
-        href="/blog"
-        className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
-      >
-        ← Back to blog
-      </Link>
-
-      {post.category && (
-        <div className="mb-3">
-          <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
-            {post.category}
-          </span>
-        </div>
-      )}
-
-      <h1 className="mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl leading-tight">
-        {post.title}
-      </h1>
-
-      <div className="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground border-b border-border pb-6">
-        {post.author && <span className="font-medium text-foreground">{post.author}</span>}
-        {post.publishedAt && (
-          <time dateTime={post.publishedAt}>
-            {new Date(post.publishedAt).toLocaleDateString('en-US', {
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric',
-            })}
-          </time>
-        )}
-        {post.tags && post.tags.length > 0 && (
-          <div className="flex flex-wrap gap-1.5">
-            {post.tags.map((tag) => (
-              <span
-                key={tag}
-                className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {post.coverImageUrl && (
-        <div className="mb-8 overflow-hidden rounded-xl">
-          <Image
-            src={post.coverImageUrl}
-            alt={post.coverImageAlt ?? post.title}
-            width={800}
-            height={450}
-            className="w-full object-cover"
-            priority
-          />
-        </div>
-      )}
-
-      {post.excerpt && (
-        <p className="mb-6 text-lg text-muted-foreground leading-relaxed font-light italic border-s-2 border-primary/40 ps-4">
-          {post.excerpt}
-        </p>
-      )}
-
-      <div
-        className="prose prose-neutral dark:prose-invert max-w-none"
-        dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.content) }}
-      />
-    </main>
-  );
-}
-<% } %>

package/templates/nextjs/base/src/app/blog/page.tsx

@@ -0,0 +1,187 @@
+/**
+ * Blog listing page — fetches published posts from the Brainerce blog API.
+ *
+ * Merchants manage posts in the Brainerce dashboard under Sell → Blog.
+ * The storefront renders them here. Each post links to /blog/[slug].
+ *
+ * Posts are only visible when status=PUBLISHED and publishedAt <= NOW().
+ * Category and tag filtering available via query params.
+ *
+ * One implementation for single- and multi-language stores: `locale` exists only
+ * under the `[locale]` segment and is `undefined` otherwise. Every string comes
+ * from the `seo` / `blog` message namespaces in the request locale; none is a
+ * `locale === 'he'` ternary, which gave every third language English.
+ */
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+
+import { defaultLocale } from '@/i18n';
+import { getServerClient } from '@/core/lib/brainerce.server';
+import { localePath } from '@/core/lib/locale-path';
+import { getServerNamespace } from '@/core/lib/server-messages';
+
+type PageProps = {
+  params: Promise<{ locale?: string }>;
+  searchParams: Promise<{ category?: string; tag?: string; page?: string }>;
+};
+
+/** `/blog` plus whichever of category / tag / page apply, in a fixed order. */
+function blogHref(
+  locale: string | undefined,
+  query: { category?: string; tag?: string; page?: number }
+): string {
+  const params = new URLSearchParams();
+  if (query.category) params.set('category', query.category);
+  if (query.tag) params.set('tag', query.tag);
+  if (query.page && query.page > 1) params.set('page', String(query.page));
+  const qs = params.toString();
+  return `${localePath(locale, '/blog')}${qs ? `?${qs}` : ''}`;
+}
+
+// The canonical is set here because the root layout no longer sets one: a
+// layout-level canonical is inherited by every page without its own, and this
+// page used to tell Google it was a duplicate of the homepage. Each page of the
+// list is its own canonical (`?page=2` is not a copy of page 1).
+export async function generateMetadata({ params, searchParams }: PageProps): Promise<Metadata> {
+  const { locale } = await params;
+  const { category, tag, page: pageParam } = await searchParams;
+  const seo = await getServerNamespace('seo', locale);
+  return {
+    title: seo.blog ?? '',
+    description: seo.blogDescription ?? '',
+    alternates: {
+      canonical: blogHref(locale, { category, tag, page: Number(pageParam ?? '1') || 1 }),
+    },
+  };
+}
+
+export default async function BlogListPage({ params, searchParams }: PageProps) {
+  const { locale } = await params;
+  const { category, tag, page: pageParam } = await searchParams;
+  const page = Number(pageParam ?? '1') || 1;
+
+  const client = await getServerClient(locale);
+  const [{ data: posts, meta }, seo, strings] = await Promise.all([
+    client.blog
+      .getPosts({ category, tag, page, limit: 12 })
+      .catch(() => ({ data: [], meta: { page: 1, limit: 12, total: 0, totalPages: 1 } })),
+    getServerNamespace('seo', locale),
+    getServerNamespace('blog', locale),
+  ]);
+  const dateLocale = locale ?? defaultLocale;
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="mb-8 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        {seo.blog}
+      </h1>
+
+      {posts.length === 0 ? (
+        <p className="text-muted-foreground">{strings.empty}</p>
+      ) : (
+        <>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {posts.map((post) => {
+              const postHref = localePath(locale, `/blog/${encodeURIComponent(post.slug)}`);
+              return (
+                <article
+                  key={post.id}
+                  className="group flex flex-col overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm transition-shadow hover:shadow-md"
+                >
+                  {post.coverImageUrl && (
+                    <Link href={postHref} tabIndex={-1}>
+                      <div className="relative aspect-[16/9] overflow-hidden">
+                        <Image
+                          src={post.coverImageUrl}
+                          alt={post.coverImageAlt ?? post.title}
+                          fill
+                          className="object-cover transition-transform duration-300 group-hover:scale-105"
+                          sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                        />
+                      </div>
+                    </Link>
+                  )}
+
+                  <div className="flex flex-1 flex-col gap-3 p-5">
+                    {/* Category badge */}
+                    {post.category && (
+                      <span className="w-fit rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
+                        {post.category}
+                      </span>
+                    )}
+
+                    {/* Title */}
+                    <Link href={postHref}>
+                      <h2 className="line-clamp-2 text-lg font-semibold leading-snug text-foreground hover:text-primary transition-colors">
+                        {post.title}
+                      </h2>
+                    </Link>
+
+                    {/* Excerpt */}
+                    {post.excerpt && (
+                      <p className="line-clamp-3 text-sm text-muted-foreground leading-relaxed">
+                        {post.excerpt}
+                      </p>
+                    )}
+
+                    {/* Meta: author + date */}
+                    <div className="mt-auto flex items-center gap-2 pt-2 text-xs text-muted-foreground">
+                      {post.author && <span>{post.author}</span>}
+                      {post.author && post.publishedAt && <span>·</span>}
+                      {post.publishedAt && (
+                        <time dateTime={post.publishedAt}>
+                          {new Date(post.publishedAt).toLocaleDateString(dateLocale, {
+                            year: 'numeric',
+                            month: 'short',
+                            day: 'numeric',
+                          })}
+                        </time>
+                      )}
+                    </div>
+
+                    <Link
+                      href={postHref}
+                      className="mt-1 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
+                    >
+                      {strings.readMore}
+                      <span aria-hidden="true" className="rtl:rotate-180">
+                        →
+                      </span>
+                    </Link>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+
+          {/* Pagination */}
+          {meta.totalPages > 1 && (
+            <nav className="mt-10 flex items-center justify-center gap-4">
+              {page > 1 && (
+                <Link
+                  href={blogHref(locale, { category, tag, page: page - 1 })}
+                  className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
+                >
+                  {strings.previous}
+                </Link>
+              )}
+              <span className="text-sm text-muted-foreground">
+                {page} / {meta.totalPages}
+              </span>
+              {page < meta.totalPages && (
+                <Link
+                  href={blogHref(locale, { category, tag, page: page + 1 })}
+                  className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
+                >
+                  {strings.next}
+                </Link>
+              )}
+            </nav>
+          )}
+        </>
+      )}
+    </main>
+  );
+}

package/templates/nextjs/base/src/app/blog/rss.xml/route.ts

@@ -15,6 +15,7 @@
  */
 import { getServerClient } from '@/core/lib/brainerce.server';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { getServerNamespace } from '@/core/lib/server-messages';
 
 export const revalidate = 3600;
 
@@ -30,9 +31,12 @@ export async function GET() {
   const baseUrl = await getCanonicalSiteUrl();
   const client = await getServerClient();
 
-  const [info, posts] = await Promise.all([
+  const [info, posts, seo] = await Promise.all([
     client.getStoreInfo().catch(() => null),
     client.blog.getPosts({ limit: 50 }).catch(() => null),
+    // The feed is one document for every locale (served at the app root), so its
+    // fallback copy is the default language's, from the message files.
+    getServerNamespace('seo'),
   ]);
 
   const items = (posts?.data ?? [])
@@ -56,9 +60,9 @@ export async function GET() {
     '<?xml version="1.0" encoding="UTF-8"?>',
     '<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">',
     '  <channel>',
-    `    <title>${esc(info?.name ?? 'Blog')}</title>`,
+    `    <title>${esc(info?.name ?? seo.blog ?? '')}</title>`,
     `    <link>${esc(`${baseUrl}/blog`)}</link>`,
-    `    <description>${esc(info?.metaDescription ?? `${info?.name ?? 'Store'} blog`)}</description>`,
+    `    <description>${esc(info?.metaDescription ?? seo.blogDescription ?? '')}</description>`,
     `    <atom:link href="${esc(`${baseUrl}/blog/rss.xml`)}" rel="self" type="application/rss+xml"/>`,
     items,
     '  </channel>',

package/templates/nextjs/base/src/app/category/[slug]/page.tsx

@@ -3,6 +3,8 @@ import { notFound } from 'next/navigation';
 import { BrainerceError } from 'brainerce';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { getRegionId } from '@/core/lib/region.server';
+import { localePath } from '@/core/lib/locale-path';
+import { getServerNamespace } from '@/core/lib/server-messages';
 import { buildMetaDescription } from '@/core/lib/seo';
 import { sanitizeHtml } from '@/core/lib/sanitize';
 import { decodeSlug } from '@/core/lib/utils';
@@ -35,9 +37,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     const description =
       category.metaDescription || buildMetaDescription(category.description) || category.name;
     const canonicalSlug = category.slug || slug;
-    const canonicalPath = locale
-      ? `/${locale}/category/${canonicalSlug}`
-      : `/category/${canonicalSlug}`;
+    // `localePath`, not `/${locale}/...`: the default locale arrives as a real
+    // `params.locale` too, and its prefixed URL is the one the middleware
+    // 308-redirects away, so a canonical built that way names a redirecting URL.
+    const canonicalPath = localePath(locale, `/category/${canonicalSlug}`);
 
     // hreflang: category URLs use the same slug across locales (only the
     // locale prefix changes) — the same convention getCategorySitemapEntries
@@ -65,9 +68,11 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
         canonical: canonicalPath,
         ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
       },
+      // `siteName` repeated: this object replaces the root layout's, not merges.
       openGraph: {
         title: category.name,
         description,
+        ...(storeInfo?.name ? { siteName: storeInfo.name } : {}),
         type: 'website',
         images: category.image ? [{ url: category.image, alt: category.name }] : [],
       },
@@ -80,7 +85,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     };
   } catch (err) {
     if (err instanceof BrainerceError && err.statusCode === 404) {
-      return { title: 'Category not found' };
+      const seo = await getServerNamespace('seo', locale);
+      return { title: seo.categoryNotFound ?? '' };
     }
     // Anything else (channel origin rejection, network failure) hits the page
     // render below too and surfaces there — don't stamp a misleading title.
@@ -114,23 +120,32 @@ export default async function CategoryPage({ params }: Props) {
     regionId: await getRegionId(),
   });
 
-  const baseUrl = await getCanonicalSiteUrl();
-  const url = `${baseUrl}/category/${category.slug || slug}`;
-  const localePrefix = locale ? `/${locale}` : '';
+  const [baseUrl, seo] = await Promise.all([
+    getCanonicalSiteUrl(),
+    getServerNamespace('seo', locale),
+  ]);
+  const url = `${baseUrl}${localePath(locale, `/category/${category.slug || slug}`)}`;
+  // One trail, two renderings: the visible breadcrumb and the BreadcrumbList
+  // JSON-LD are built from the SAME items. An ancestor without a slug has no
+  // page to link to, so it is left out of both rather than linked to a 404.
   const breadcrumbItems = [
-    { name: 'Home', href: `${localePrefix}/` },
+    { name: seo.home ?? '', href: localePath(locale, '/') },
     ...category.breadcrumb
       .filter((ancestor) => ancestor.slug)
       .map((ancestor) => ({
         name: ancestor.name,
-        href: `${localePrefix}/category/${ancestor.slug}`,
+        href: localePath(locale, `/category/${ancestor.slug}`),
       })),
-    { name: category.name },
+    { name: category.name, href: undefined as string | undefined },
   ];
+  const breadcrumbJsonLd = breadcrumbItems.map((item) => ({
+    name: item.name,
+    url: item.href ? `${baseUrl}${item.href}` : url,
+  }));
 
   return (
     <>
-      <CategoryJsonLd category={category} url={url} />
+      <CategoryJsonLd category={category} url={url} breadcrumbs={breadcrumbJsonLd} />
       <div className="container mx-auto px-4 py-8">
         <Breadcrumbs items={breadcrumbItems} />
         <header className="mb-6">

package/templates/nextjs/base/src/app/faq/page.tsx.ejs

@@ -12,17 +12,26 @@ import * as React from 'react';
 import type { Metadata } from 'next';
 
 import { getServerClient } from '@/core/lib/brainerce.server';
+import { localePath } from '@/core/lib/locale-path';
+import { getServerNamespace } from '@/core/lib/server-messages';
 import { FaqSection } from '@/ui/layout/faq-section';
 <% if (i18nEnabled) { %>
 type PageProps = {
   params: Promise<{ locale: string }>;
 };
 
+// The canonical is set here because the root layout no longer sets one: a
+// layout-level canonical is inherited by every page without its own, and this
+// page used to tell Google it was a duplicate of the homepage.
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
   const { locale } = await params;
-  const faq = await (await getServerClient(locale)).content.faq.get('main', locale).catch(() => null);
+  const [faq, strings] = await Promise.all([
+    (await getServerClient(locale)).content.faq.get('main', locale).catch(() => null),
+    getServerNamespace('faq', locale),
+  ]);
   return {
-    title: faq?.name ?? 'FAQ',
+    title: faq?.name ?? strings.title ?? '',
+    alternates: { canonical: localePath(locale, '/faq') },
   };
 }
 
@@ -32,10 +41,17 @@ export default async function FaqPage({ params }: PageProps) {
   return <FaqSection faq={faq} />;
 }
 <% } else { %>
+// The canonical is set here because the root layout no longer sets one: a
+// layout-level canonical is inherited by every page without its own, and this
+// page used to tell Google it was a duplicate of the homepage.
 export async function generateMetadata(): Promise<Metadata> {
-  const faq = await (await getServerClient()).content.faq.get('main').catch(() => null);
+  const [faq, strings] = await Promise.all([
+    (await getServerClient()).content.faq.get('main').catch(() => null),
+    getServerNamespace('faq'),
+  ]);
   return {
-    title: faq?.name ?? 'FAQ',
+    title: faq?.name ?? strings.title ?? '',
+    alternates: { canonical: localePath(undefined, '/faq') },
   };
 }