feat(seo): Medium + Low priority SEO pass (audit items 11-21)

Tackles every Medium and Low audit item except #15 (unused video
cleanup) and #16 (images.formats explicit config), which were
explicitly out of scope this round.

Item by item:

- #11 Visual breadcrumbs: new Breadcrumbs component at
  components/ui/breadcrumbs.tsx that emits both the visible <nav>
  trail and matching BreadcrumbList JSON-LD in one call. Wired into
  all 3 compare pages and 14 solutions pages (8 verticals + 6 use
  cases) via a new optional `breadcrumbs` prop on the shared
  SolutionPageLayout.

- #12 Per-page Twitter cards: 41 pages now declare their own
  twitter.card block mirroring the page's openGraph title and
  description (previously every page inherited the site-wide default
  Twitter card, so social previews were identical regardless of URL).

- #13 Dynamic OG images: new /og route using next/og ImageResponse,
  parameterised by title/eyebrow/subtitle, returns a 1200x630 PNG
  with branded gradient and the Fleetbase logomark. Cached one year
  via immutable Cache-Control. Wired into the homepage, /pricing,
  /developers, all 3 compare pages, and blog posts (falls back to
  the dynamic OG when Ghost has no feature image).

- #14 Generic anchor text: replaced "Learn more" / "Read more" /
  "Learn More" with contextual anchors that include the destination's
  name (Explore Fleet-Ops, View Installation Service, Read the
  Fleet-Ops docs, etc.) across platform/solutions/services/pricing/
  licensing/platform-modules. Dead about-news component left alone.

- #17 next/dynamic for heavy components: the 7 below-the-fold
  homepage sections (FleetOpsShowcase, OpenSourceAdvantage,
  FeaturesTabsSection, IndustryUseCases, IntegrationsEcosystem,
  DeploymentOptions, FinalCTA) are now dynamically imported. SSR
  stays on (default) so crawlers still receive complete HTML; only
  the client JS bundle is split. Verified each dynamic section's
  text is present in the SSR'd HTML response.

- #18 Compare-page competitor schema: each compare page now emits a
  SoftwareApplication JSON-LD entity for the competitor (Onfleet,
  Tookan, Route4Me) in addition to the BreadcrumbList. Helps Google
  understand the page as a comparison between two distinct entities.

- #19 Hero <header> elements: replaced <section> with <header> on
  the three real page-hero components (Hero, ProductHero,
  AboutHero). Section heroes inside content remain <section>.

- #20 googleBot robots block: extended root metadata.robots with
  googleBot directives — max-image-preview:large, max-snippet:-1,
  max-video-preview:-1 — to opt into the largest possible SERP
  preview.

- #21 Trim keywords meta: the root keywords array went from 19
  generic terms to 6 focused, high-intent terms. Google ignores
  the keywords meta entirely so this was purely cosmetic SEO
  hygiene.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: roncodes

src/app/blog/[slug]/page.tsx

@@ -40,14 +40,19 @@ export async function generateMetadata(props: {
   }
 
   const canonicalUrl = `${BASE_URL}/blog/${post.slug}`;
-  const image = post.featureImage
-    ? [
-        {
-          url: post.featureImage,
-          alt: post.featureImageAlt || post.title,
-        },
-      ]
-    : undefined;
+
+  // Prefer the post's feature image; otherwise fall back to a branded
+  // dynamic OG image built from the post title + excerpt so every post
+  // gets a unique social card instead of the site-wide default.
+  const fallbackOg = `${BASE_URL}/og?title=${encodeURIComponent(post.title)}&eyebrow=Blog${
+    post.excerpt ? `&subtitle=${encodeURIComponent(post.excerpt)}` : ''
+  }`;
+  const image = [
+    {
+      url: post.featureImage || fallbackOg,
+      alt: post.featureImageAlt || post.title,
+    },
+  ];
 
   return {
     title: post.title,
@@ -66,10 +71,10 @@ export async function generateMetadata(props: {
       tags: post.tags.map((tag) => tag.name),
     },
     twitter: {
-      card: image ? 'summary_large_image' : 'summary',
+      card: 'summary_large_image',
       title: post.title,
       description: post.excerpt,
-      images: image?.map((item) => item.url),
+      images: image.map((item) => item.url),
     },
   };
 }

src/app/blog/page.tsx

@@ -22,6 +22,11 @@ export const metadata: Metadata = {
     description:
       'Product updates, engineering deep-dives, and logistics industry insights from Fleetbase.',
   },
+  twitter: {
+    card: 'summary_large_image',
+    title: `Blog | Fleetbase`,
+    description: `Product updates, engineering deep-dives, and logistics industry insights from Fleetbase.`,
+  },
 };
 
 export const revalidate = 300;

src/app/community/page.tsx

@@ -13,6 +13,11 @@ export const metadata: Metadata = {
  title: 'Community | Fleetbase',
  description: 'Join thousands of logistics operators and developers in the Fleetbase community.',
  },
+ twitter: {
+   card: 'summary_large_image',
+   title: `Community | Fleetbase`,
+   description: `Join thousands of logistics operators and developers in the Fleetbase community.`,
+ },
 };
 
 const channels = [

src/app/company/about/page.tsx

@@ -14,6 +14,11 @@ export const metadata: Metadata = {
  title: 'About Us | Fleetbase',
  description: 'The open-source logistics platform on a mission to democratize logistics technology.',
  },
+ twitter: {
+   card: 'summary_large_image',
+   title: `About Us | Fleetbase`,
+   description: `The open-source logistics platform on a mission to democratize logistics technology.`,
+ },
 };
 
 const values = [

src/app/company/investors/page.tsx

@@ -35,6 +35,11 @@ export const metadata: Metadata = {
  description:
  'Bootstrapped open-source logistics platform with 8,000+ active instances. Learn about the opportunity and what we look for in long-term partners.',
  },
+ twitter: {
+   card: 'summary_large_image',
+   title: `Investors | Fleetbase`,
+   description: `Bootstrapped open-source logistics platform with 8,000+ active instances. Learn about the opportunity and what we look for in long-term partners.`,
+ },
  alternates: { canonical: 'https://fleetbase.io/company/investors' },
 };
 

src/app/company/open-source/page.tsx

@@ -13,6 +13,11 @@ export const metadata: Metadata = {
  title: 'Open Source Mission | Fleetbase',
  description: 'Fully open-source logistics infrastructure under AGPL-3.0. Deploy anywhere, own everything.',
  },
+ twitter: {
+   card: 'summary_large_image',
+   title: `Open Source Mission | Fleetbase`,
+   description: `Fully open-source logistics infrastructure under AGPL-3.0. Deploy anywhere, own everything.`,
+ },
 };
 
 const reasons = [

src/app/company/page.tsx

@@ -12,6 +12,11 @@ export const metadata: Metadata = {
  title: 'Company | Fleetbase',
  description: 'Open-source logistics infrastructure built to democratize logistics technology.',
  },
+ twitter: {
+   card: 'summary_large_image',
+   title: `Company | Fleetbase`,
+   description: `Open-source logistics infrastructure built to democratize logistics technology.`,
+ },
 };
 
 const companyLinks = [

src/app/compare/vs-onfleet/page.tsx

@@ -2,7 +2,8 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import { CheckCircle2, XCircle, ArrowRight, Minus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { BreadcrumbSchema } from '@/components/seo/json-ld';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
+import { SoftwareApplicationSchema } from '@/components/seo/json-ld';
 
 export const metadata: Metadata = {
  title: 'Fleetbase vs Onfleet | Open-Source Onfleet Alternative',
@@ -21,6 +22,22 @@ export const metadata: Metadata = {
  title: 'Fleetbase vs Onfleet | Open-Source Onfleet Alternative',
  description:
  'Compare Fleetbase vs Onfleet. No per-task pricing, self-hosting, full API access, and a free tier. The open-source alternative to Onfleet.',
+ images: [
+ {
+ url: '/og?title=Fleetbase%20vs%20Onfleet&eyebrow=Compare&subtitle=The%20open-source%20alternative%20to%20Onfleet%20%E2%80%94%20no%20per-task%20pricing%2C%20self-hosted%20or%20cloud.',
+ width: 1200,
+ height: 630,
+ alt: 'Fleetbase vs Onfleet — open-source Onfleet alternative',
+ },
+ ],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Fleetbase vs Onfleet',
+ description: 'The open-source Onfleet alternative — no per-task pricing, self-hosted or cloud.',
+ images: [
+ '/og?title=Fleetbase%20vs%20Onfleet&eyebrow=Compare&subtitle=The%20open-source%20alternative%20to%20Onfleet%20%E2%80%94%20no%20per-task%20pricing%2C%20self-hosted%20or%20cloud.',
+ ],
  },
  alternates: { canonical: 'https://fleetbase.io/compare/vs-onfleet' },
 };
@@ -68,17 +85,22 @@ function Cell({ value }: { value: string | boolean }) {
 export default function VsOnfleetPage() {
  return (
  <div className="min-h-screen">
- <BreadcrumbSchema
- items={[
- { name: 'Home', url: 'https://fleetbase.io' },
- { name: 'Compare', url: 'https://fleetbase.io/compare' },
- { name: 'Fleetbase vs Onfleet', url: 'https://fleetbase.io/compare/vs-onfleet' },
- ]}
+ <SoftwareApplicationSchema
+ name="Onfleet"
+ url="https://onfleet.com"
+ description="Last-mile delivery management software for dispatch, routing, and proof of delivery — closed-source, per-task pricing."
  />
 
  {/* Hero */}
  <section className="section-padding border-b bg-gradient-to-b from-muted/30 to-background">
  <div className="container max-w-5xl text-center space-y-6">
+ <Breadcrumbs
+ className="justify-center [&_ol]:justify-center"
+ items={[
+ { label: 'Compare', href: '/compare' },
+ { label: 'Fleetbase vs Onfleet', href: '/compare/vs-onfleet' },
+ ]}
+ />
  <div className="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground">
  Comparison
  </div>

src/app/compare/vs-route4me/page.tsx

@@ -2,7 +2,8 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import { CheckCircle2, XCircle, ArrowRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { BreadcrumbSchema } from '@/components/seo/json-ld';
+import { SoftwareApplicationSchema } from '@/components/seo/json-ld';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 
 export const metadata: Metadata = {
  title: 'Fleetbase vs Route4Me | Open-Source Route4Me Alternative',
@@ -21,6 +22,22 @@ export const metadata: Metadata = {
  title: 'Fleetbase vs Route4Me | Open-Source Route4Me Alternative',
  description:
  'Compare Fleetbase vs Route4Me. Full dispatch, fleet management, driver app, and route optimization — no per-route fees.',
+ images: [
+ {
+ url: '/og?title=Fleetbase%20vs%20Route4Me&eyebrow=Compare&subtitle=Open-source%20alternative%20with%20dispatch%2C%20fleet%20management%2C%20driver%20app%2C%20and%20route%20optimization%20built%20in.',
+ width: 1200,
+ height: 630,
+ alt: 'Fleetbase vs Route4Me — open-source Route4Me alternative',
+ },
+ ],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Fleetbase vs Route4Me',
+ description: 'Open-source alternative with dispatch, fleet management, driver app, and route optimization built in.',
+ images: [
+ '/og?title=Fleetbase%20vs%20Route4Me&eyebrow=Compare&subtitle=Open-source%20alternative%20with%20dispatch%2C%20fleet%20management%2C%20driver%20app%2C%20and%20route%20optimization%20built%20in.',
+ ],
  },
  alternates: { canonical: 'https://fleetbase.io/compare/vs-route4me' },
 };
@@ -68,17 +85,22 @@ function Cell({ value }: { value: string | boolean }) {
 export default function VsRoute4MePage() {
  return (
  <div className="min-h-screen">
- <BreadcrumbSchema
- items={[
- { name: 'Home', url: 'https://fleetbase.io' },
- { name: 'Compare', url: 'https://fleetbase.io/compare' },
- { name: 'Fleetbase vs Route4Me', url: 'https://fleetbase.io/compare/vs-route4me' },
- ]}
+ <SoftwareApplicationSchema
+ name="Route4Me"
+ url="https://route4me.com"
+ description="Route planning and optimization software focused on last-mile delivery routing — closed-source SaaS."
  />
 
  {/* Hero */}
  <section className="section-padding border-b bg-gradient-to-b from-muted/30 to-background">
  <div className="container max-w-5xl text-center space-y-6">
+ <Breadcrumbs
+ className="justify-center [&_ol]:justify-center"
+ items={[
+ { label: 'Compare', href: '/compare' },
+ { label: 'Fleetbase vs Route4Me', href: '/compare/vs-route4me' },
+ ]}
+ />
  <div className="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground">
  Comparison
  </div>

src/app/compare/vs-tookan/page.tsx

@@ -2,7 +2,8 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import { CheckCircle2, XCircle, ArrowRight, Minus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { BreadcrumbSchema } from '@/components/seo/json-ld';
+import { SoftwareApplicationSchema } from '@/components/seo/json-ld';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 
 export const metadata: Metadata = {
  title: 'Fleetbase vs Tookan | Open-Source Tookan Alternative',
@@ -21,6 +22,22 @@ export const metadata: Metadata = {
  title: 'Fleetbase vs Tookan | Open-Source Tookan Alternative',
  description:
  'Compare Fleetbase vs Tookan. No agent-based pricing, self-hosting, full API access. The open-source alternative to Tookan.',
+ images: [
+ {
+ url: '/og?title=Fleetbase%20vs%20Tookan&eyebrow=Compare&subtitle=The%20open-source%20alternative%20to%20Tookan%20%E2%80%94%20no%20agent-based%20pricing%2C%20self-hosted%20or%20cloud.',
+ width: 1200,
+ height: 630,
+ alt: 'Fleetbase vs Tookan — open-source Tookan alternative',
+ },
+ ],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Fleetbase vs Tookan',
+ description: 'The open-source Tookan alternative — no agent-based pricing, self-hosted or cloud.',
+ images: [
+ '/og?title=Fleetbase%20vs%20Tookan&eyebrow=Compare&subtitle=The%20open-source%20alternative%20to%20Tookan%20%E2%80%94%20no%20agent-based%20pricing%2C%20self-hosted%20or%20cloud.',
+ ],
  },
  alternates: { canonical: 'https://fleetbase.io/compare/vs-tookan' },
 };
@@ -68,17 +85,22 @@ function Cell({ value }: { value: string | boolean }) {
 export default function VsTookanPage() {
  return (
  <div className="min-h-screen">
- <BreadcrumbSchema
- items={[
- { name: 'Home', url: 'https://fleetbase.io' },
- { name: 'Compare', url: 'https://fleetbase.io/compare' },
- { name: 'Fleetbase vs Tookan', url: 'https://fleetbase.io/compare/vs-tookan' },
- ]}
+ <SoftwareApplicationSchema
+ name="Tookan"
+ url="https://tookanapp.com"
+ description="Delivery management and dispatch software with per-agent and per-task pricing — closed-source SaaS."
  />
 
  {/* Hero */}
  <section className="section-padding border-b bg-gradient-to-b from-muted/30 to-background">
  <div className="container max-w-5xl text-center space-y-6">
+ <Breadcrumbs
+ className="justify-center [&_ol]:justify-center"
+ items={[
+ { label: 'Compare', href: '/compare' },
+ { label: 'Fleetbase vs Tookan', href: '/compare/vs-tookan' },
+ ]}
+ />
  <div className="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground">
  Comparison
  </div>