feat(site): add SoftwareApplication schema to /orm, /studio, /mcp pages (#7766)

Adds Schema.org SoftwareApplication JSON-LD structured data to product pages
for rich results eligibility and better AI search extraction.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: mhessdev

apps/site/src/app/mcp/page.tsx

@@ -1,3 +1,5 @@
+import { JsonLd } from "@/components/json-ld";
+import { createSoftwareApplicationStructuredData } from "@/lib/structured-data";
 import type { Metadata } from "next";
 
 import { type McpAgent, McpAgentsSection } from "./_components/mcp-agents-section";
@@ -6,6 +8,13 @@ import { McpCtaSection } from "./_components/mcp-cta-section";
 import { type McpHeroFeature, McpHeroSection } from "./_components/mcp-hero-section";
 import { McpVideoSection } from "./_components/mcp-video-section";
 
+const mcpStructuredData = createSoftwareApplicationStructuredData({
+  path: "/mcp",
+  name: "Prisma MCP Server",
+  description:
+    "AI-powered database management via Model Context Protocol. Manage databases with natural language in Claude, Codex, Cursor, Warp, ChatGPT and other AI agents.",
+});
+
 export const metadata: Metadata = {
   title: "Prisma MCP Server — AI-Powered Database Management",
   description:
@@ -175,6 +184,7 @@ const capabilities: McpCapability[] = [
 export default function McpPage() {
   return (
     <main className="relative flex-1 w-full -mt-24 flex flex-col overflow-x-hidden bg-[linear-gradient(0deg,var(--color-background-default)_95%,var(--color-background-ppg)_100%)] text-foreground-neutral">
+      <JsonLd id="mcp-software-application" data={mcpStructuredData} />
       <div className="relative z-1 flex flex-col">
         <McpHeroSection docsHref={DOCS_MCP} features={heroFeatures} />
         <McpVideoSection />

apps/site/src/app/orm/page.tsx

@@ -1,3 +1,5 @@
+import { JsonLd } from "@/components/json-ld";
+import { createSoftwareApplicationStructuredData } from "@/lib/structured-data";
 import { createPageMetadata } from "@/lib/page-metadata";
 import { Action, Button, Card, Separator } from "@prisma/eclipse";
 import { Bento } from "@/components/homepage/bento";
@@ -44,10 +46,7 @@ const CardFooter = () => (
     <Separator className="my-6" />
     <div className="flex flex-col md:flex-row justify-between w-full gap-8">
       {badge_list.map((badge: any) => (
-        <div
-          className="flex flex-col md:flex-row gap-2 md:gap-6 md:items-center"
-          key={badge.title}
-        >
+        <div className="flex flex-col md:flex-row gap-2 md:gap-6 md:items-center" key={badge.title}>
           <h6 className="font-semibold text-2xs text-foreground-neutral uppercase">
             {badge.title}
           </h6>
@@ -82,9 +81,9 @@ const twoCol = [
           </h2>
         </div>
         <p className="text-foreground-neutral-weak! text-base">
-          Database workflows can feel brittle and error-prone. Prisma ORM
-          increases productivity and confidence when working with databases and
-          makes workflows like data modeling, migrations and querying easy.
+          Database workflows can feel brittle and error-prone. Prisma ORM increases productivity and
+          confidence when working with databases and makes workflows like data modeling, migrations
+          and querying easy.
         </p>
       </>
     ),
@@ -112,8 +111,8 @@ const twoCol = [
           Works with your favorite databases and frameworks
         </h2>
         <p className="text-foreground-neutral-weak! text-base">
-          Prisma's compatibility with popular tools ensures no stack lock-in,
-          lower integration costs, and smooth transitions.
+          Prisma's compatibility with popular tools ensures no stack lock-in, lower integration
+          costs, and smooth transitions.
         </p>
         <a href="/stack" className="link-btn orm">
           <span>Learn more</span>
@@ -145,15 +144,10 @@ const twoCol_2 = [
           </h2>
         </div>
         <p className="text-foreground-neutral-weak! text-base">
-          A meaningful comparison of database query latencies across database
-          providers and ORM libraries in the Node.js & TypeScript ecosystem.
+          A meaningful comparison of database query latencies across database providers and ORM
+          libraries in the Node.js & TypeScript ecosystem.
         </p>
-        <Button
-          variant="orm"
-          size="xl"
-          href="https://benchmarks.prisma.io"
-          className="w-fit"
-        >
+        <Button variant="orm" size="xl" href="https://benchmarks.prisma.io" className="w-fit">
           <span>Explore Benchmarks</span>
           <i className="fa-regular fa-arrow-right ml-2!" />
         </Button>
@@ -181,10 +175,9 @@ const twoCol_2 = [
           </h2>
         </div>
         <p className="text-foreground-neutral-weak! text-base">
-          Prisma Client is a query builder that’s tailored to your schema. We
-          designed its API to be intuitive, both for SQL veterans and developers
-          brand new to databases. The auto-completion helps you figure out your
-          query without the need for documentation.
+          Prisma Client is a query builder that’s tailored to your schema. We designed its API to be
+          intuitive, both for SQL veterans and developers brand new to databases. The
+          auto-completion helps you figure out your query without the need for documentation.
         </p>
         <a href="/client" className="link-btn orm">
           <span>Learn more</span>
@@ -265,6 +258,13 @@ const features = [
   },
 ];
 
+const ormStructuredData = createSoftwareApplicationStructuredData({
+  path: "/orm",
+  name: "Prisma ORM",
+  description:
+    "Next-generation Node.js and TypeScript ORM for PostgreSQL, MySQL, SQL Server, SQLite, MongoDB, and CockroachDB. Provides type-safety, automated migrations, and an intuitive data model.",
+});
+
 export const metadata = createPageMetadata({
   title: "Prisma | Next-generation ORM for Node.js & TypeScript",
   description:
@@ -276,15 +276,16 @@ export const metadata = createPageMetadata({
 export default function ORM() {
   return (
     <main className="flex-1 w-full z-1 ">
+      <JsonLd id="orm-software-application" data={ormStructuredData} />
       <div className="hero pt-50 -mt-24 flex items-end justify-center px-4 relative">
         <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="content relative z-2 flex flex-col gap-8 py-12">
           <h1 className="text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Next-generation Node.js and TypeScript ORM
           </h1>
           <p className="text-center text-foreground-neutral max-w-2xl mx-auto">
-            Prisma ORM elevates developer experience with intuitive data
-            modeling, automated migrations, and type-safety.
+            Prisma ORM elevates developer experience with intuitive data modeling, automated
+            migrations, and type-safety.
           </p>
           <div className="flex flex-col md:flex-row gap-4 items-center justify-center">
             <Button
@@ -332,30 +333,16 @@ export default function ORM() {
           <div className="grid md:grid-cols-2 gap-9">
             {twoCol_3.map((stat, index) => (
               <div key={stat.title} className="flex flex-col gap-4">
-                <Action
-                  size="4xl"
-                  color="orm"
-                  className={cn(index === 0 && "p-0", "relative")}
-                >
+                <Action size="4xl" color="orm" className={cn(index === 0 && "p-0", "relative")}>
                   <Image src={stat.icon} alt={stat.title} fill loading="lazy" />
                 </Action>
                 <h4 className="text-2xl font-sans-display stretch-display text-foreground-neutral">
                   {stat.title}
                 </h4>
-                <p className="text-foreground-neutral-weak">
-                  {stat.description}
-                </p>
-                <Button
-                  variant="default-stronger"
-                  href={stat.btn.url}
-                  size="xl"
-                  className="w-fit"
-                >
+                <p className="text-foreground-neutral-weak">{stat.description}</p>
+                <Button variant="default-stronger" href={stat.btn.url} size="xl" className="w-fit">
                   <span>
-                    {stat.btn.label}{" "}
-                    {stat.btn.icon && (
-                      <i className={cn("ml-2", stat.btn.icon)} />
-                    )}
+                    {stat.btn.label} {stat.btn.icon && <i className={cn("ml-2", stat.btn.icon)} />}
                   </span>
                 </Button>
               </div>
@@ -372,8 +359,8 @@ export default function ORM() {
           </h3>
           <div className="content flex flex-col lg:flex-row gap-3 lg:gap-12 items-center md:items-start lg:items-center">
             <p className="max-w-94 w-full text-center md:text-left text-foreground-neutral-weak text-md">
-              Integrate Prisma into your development ecosystem and focus on your
-              team’s core competencies
+              Integrate Prisma into your development ecosystem and focus on your team’s core
+              competencies
             </p>
             <Button variant="orm" size="2xl" href="/enterprise">
               <span>Explore Enterprise</span>
@@ -418,16 +405,12 @@ export default function ORM() {
                 Ready to get started?
               </h2>
               <p className="text-foreground-neutral-weak max-w-121">
-                Start from scratch, add Prisma ORM to your existing project, or
-                explore how to build an app using your favorite framework.
+                Start from scratch, add Prisma ORM to your existing project, or explore how to build
+                an app using your favorite framework.
               </p>
             </div>
             <div className="flex flex-col md:flex-row gap-6">
-              <Button
-                variant="orm"
-                size="2xl"
-                href={prismaPostgresQuickstartUrl}
-              >
+              <Button variant="orm" size="2xl" href={prismaPostgresQuickstartUrl}>
                 <span>Try Prisma ORM</span>
                 <i className="fa-regular fa-arrow-right ml-2" />
               </Button>

apps/site/src/app/studio/page.tsx

@@ -1,3 +1,5 @@
+import { JsonLd } from "@/components/json-ld";
+import { createSoftwareApplicationStructuredData } from "@/lib/structured-data";
 import type { Metadata } from "next";
 import { Button } from "@prisma/eclipse";
 import Image from "next/image";
@@ -39,8 +41,7 @@ const featureRows = [
     description:
       "Access your database anywhere. Work locally for rapid development or use Console for team collaboration. Switch seamlessly between solo and team workflows.",
     imageSrc: "/illustrations/studio/laptop.svg",
-    imageAlt:
-      "Prisma Studio interface showing local and collaborative workflows",
+    imageAlt: "Prisma Studio interface showing local and collaborative workflows",
     imageWidth: 522,
     imageHeight: 295,
   },
@@ -50,8 +51,7 @@ const featureRows = [
     description:
       "Browse your database visually with powerful filters and search. Spot patterns instantly and get insights for debugging or schema changes, no SQL needed.",
     imageSrc: "/illustrations/studio/explore.svg",
-    imageAlt:
-      "Prisma Studio data exploration interface with highlighted filters",
+    imageAlt: "Prisma Studio data exploration interface with highlighted filters",
     imageWidth: 546,
     imageHeight: 275,
   },
@@ -87,6 +87,13 @@ const featureRows = [
   },
 ] as const;
 
+const studioStructuredData = createSoftwareApplicationStructuredData({
+  path: "/studio",
+  name: "Prisma Studio",
+  description:
+    "Visual database browser and editor for Prisma. Explore and manipulate your data with an intuitive interface, locally or in the Prisma Data Platform.",
+});
+
 export const metadata: Metadata = {
   title: "Prisma Studio — Visual Database Browser & Editor",
   description:
@@ -120,6 +127,7 @@ export const metadata: Metadata = {
 export default function StudioPage() {
   return (
     <main className="flex-1 w-full -mt-24 bg-background-default text-foreground-neutral">
+      <JsonLd id="studio-software-application" data={studioStructuredData} />
       {/* Hero Section */}
       <section className="relative overflow-hidden bg-[linear-gradient(180deg,var(--color-background-orm)_0%,var(--color-background-default)_72%)] px-4 pt-60 pb-12">
         <div className="pointer-events-none absolute inset-x-1/2 top-20 h-[780px] w-[1664px] -translate-x-1/2 rounded-full bg-[repeating-radial-gradient(circle_at_top,rgba(99,102,241,0.28)_0,rgba(99,102,241,0.28)_2px,transparent_2px,transparent_42px)] opacity-45 mask-[linear-gradient(to_bottom,rgba(0,0,0,0.9),transparent_78%)]" />
@@ -140,8 +148,8 @@ export default function StudioPage() {
             </div>
 
             <p className="m-0 max-w-[650px] text-lg leading-8 text-foreground-neutral md:text-xl">
-              The ultimate tool for exploring and editing data in your Prisma
-              project. Work locally or team up inside the Prisma Console.
+              The ultimate tool for exploring and editing data in your Prisma project. Work locally
+              or team up inside the Prisma Console.
             </p>
 
             <div className="flex flex-col items-center gap-4 sm:flex-row">
@@ -155,11 +163,7 @@ export default function StudioPage() {
                 <span>Explore Studio in Prisma Console</span>
                 <i className="fa-regular fa-arrow-up-right ml-2" />
               </Button>
-              <Button
-                variant="default-stronger"
-                size="2xl"
-                href={STUDIO_DOCS_URL}
-              >
+              <Button variant="default-stronger" size="2xl" href={STUDIO_DOCS_URL}>
                 <span>Try locally</span>
                 <i className="fa-regular fa-arrow-down ml-2" />
               </Button>
@@ -185,10 +189,7 @@ export default function StudioPage() {
             >
               <div className="flex items-start gap-4">
                 <div className="flex size-12 items-center justify-center rounded-md bg-background-orm p-3">
-                  <i
-                    className={`${card.icon} text-lg text-foreground-orm`}
-                    aria-hidden="true"
-                  />
+                  <i className={`${card.icon} text-lg text-foreground-orm`} aria-hidden="true" />
                 </div>
                 <div>
                   <h2 className="m-0 text-xl leading-7 text-foreground-neutral font-sans-display [font-variation-settings:'wght'_800]">
@@ -232,9 +233,8 @@ export default function StudioPage() {
                 See how Studio works
               </h2>
               <p className="m-0 mt-4 text-base leading-6 text-foreground-neutral-weak">
-                Access Prisma Studio on your local machine during development,
-                or in the Platform Console to collaborate on data with your
-                team.
+                Access Prisma Studio on your local machine during development, or in the Platform
+                Console to collaborate on data with your team.
               </p>
             </div>
 
@@ -274,8 +274,7 @@ export default function StudioPage() {
                   Try it out!
                 </h2>
                 <p className="m-0 mt-4 text-base leading-6 text-foreground-neutral-weak">
-                  Take Studio for a spin with a local pre-seeded database and
-                  example project.
+                  Take Studio for a spin with a local pre-seeded database and example project.
                 </p>
               </div>
 
@@ -332,17 +331,10 @@ function FeatureRow({
         <h2 className="m-0 mt-2 text-4xl leading-10 text-foreground-neutral font-sans-display [font-variation-settings:'wght'_900]">
           {title}
         </h2>
-        <p className="m-0 mt-4 text-base leading-8 text-foreground-neutral-weak">
-          {description}
-        </p>
+        <p className="m-0 mt-4 text-base leading-8 text-foreground-neutral-weak">{description}</p>
       </div>
 
-      <StudioFeatureImage
-        src={imageSrc}
-        alt={imageAlt}
-        width={imageWidth}
-        height={imageHeight}
-      />
+      <StudioFeatureImage src={imageSrc} alt={imageAlt} width={imageWidth} height={imageHeight} />
     </div>
   );
 }

apps/site/src/lib/structured-data.ts

@@ -65,11 +65,7 @@ export function createSiteStructuredData() {
   };
 }
 
-export function createFaqStructuredData(
-  pagePath: string,
-  faqs: FaqEntry[],
-  name: string,
-) {
+export function createFaqStructuredData(pagePath: string, faqs: FaqEntry[], name: string) {
   return {
     "@context": "https://schema.org",
     "@type": "FAQPage",
@@ -87,6 +83,42 @@ export function createFaqStructuredData(
   };
 }
 
+export function createSoftwareApplicationStructuredData({
+  path,
+  name,
+  description,
+  applicationCategory = "DeveloperApplication",
+  operatingSystem = "Cross-platform",
+}: {
+  path: string;
+  name: string;
+  description: string;
+  applicationCategory?: string;
+  operatingSystem?: string;
+}) {
+  const url = absoluteUrl(path);
+  const baseUrl = getBaseUrl();
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    "@id": `${url}#software`,
+    name,
+    description,
+    url,
+    applicationCategory,
+    operatingSystem,
+    offers: {
+      "@type": "Offer",
+      price: "0",
+      priceCurrency: "USD",
+    },
+    provider: {
+      "@id": `${baseUrl}#organization`,
+    },
+  };
+}
+
 export function createCollectionPageStructuredData({
   path,
   name,