feat(seo): visual breadcrumb navigation on article + application pages

- Create Breadcrumbs.tsx server component — semantic <nav> + <ol>/<li>
  with aria-current, ChevronRight separators, Apple-clean styling
- Add breadcrumbs to news article hero overlay (reuses JSON-LD crumbs)
- Add breadcrumbs to application detail hero (passed as prop to client
  component)
- Refactor breadcrumb data into shared array for JSON-LD + visual nav

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-06 18:10:49 -05:00
parent 7ec99734c5
commit cb7458cded
4 changed files with 83 additions and 16 deletions
+14 -10
View File
@@ -158,24 +158,28 @@ export default async function ApplicationPage({ params }: { params: Promise<{ sl
const images = getApplicationImages(slug);
// 4. JSON-LD structured data — wrapped to never break the render.
const appTitle = data?.title || "FLUX Application";
const appUrl = `${baseUrl()}/${locale}/applications/${slug}`;
const crumbs = [
{ name: "Home", url: `/${locale}` },
{ name: "Applications", url: `/${locale}#applications-deep` },
{ name: appTitle, url: `/${locale}/applications/${slug}` },
];
let jsonLd: object[] = [];
try {
const url = `${baseUrl()}/${locale}/applications/${slug}`;
const title = data?.title || "FLUX Application";
const description = data?.shortDescription || data?.subtitle || "";
jsonLd = [
productSchema({
name: title,
name: appTitle,
description,
imageUrl: images.heroImage || undefined,
category: data?.category || "RF Industrial",
url,
url: appUrl,
}),
breadcrumbSchema([
{ name: "Home", url: `${baseUrl()}/${locale}` },
{ name: "Applications", url: `${baseUrl()}/${locale}#applications-deep` },
{ name: title, url },
]),
breadcrumbSchema(
crumbs.map((c) => ({ name: c.name, url: `${baseUrl()}${c.url}` }))
),
];
} catch (error) {
console.error(`[applications/${slug}] JSON-LD build failed:`, error);
@@ -184,7 +188,7 @@ export default async function ApplicationPage({ params }: { params: Promise<{ sl
return (
<>
{jsonLd.length > 0 && <JsonLd data={jsonLd} />}
<ApplicationClient data={data} realCases={realCases} images={images} />
<ApplicationClient data={data} realCases={realCases} images={images} breadcrumbs={crumbs} />
</>
);
}