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:
@@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user