From f7a942d17588aed697566ef3007bb075ca922c75 Mon Sep 17 00:00:00 2001
From: Molecule AI App-FE <app-fe@agents.moleculesai.app>
Date: Mon, 11 May 2026 04:13:49 +0000
Subject: [PATCH] feat(docs): add SEO metadata + focus-visible rings

- SEO: add OpenGraph tags (site name, type, url) to root layout and
  per-doc pages via generateMetadata. Add canonical URLs for all doc pages.
- SEO: add Twitter card metadata to root layout.
- A11y: add focus-visible ring (2px outline, fd-ring color) to home
  page CTA buttons (Read the docs, View on Gitea). WCAG 2.1.1 keyboard
  operability.

Build: clean. 109 static pages generated.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/(home)/page.tsx           |  4 ++--
 app/docs/[[...slug]]/page.tsx | 12 ++++++++++++
 app/layout.tsx                | 13 +++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
index 764f16f..b032791 100644
--- a/app/(home)/page.tsx
+++ b/app/(home)/page.tsx
@@ -13,13 +13,13 @@ export default function HomePage() {
       <div className="flex flex-wrap items-center justify-center gap-3">
         <Link
           href="/docs"
-          className="rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-colors hover:opacity-90"
+          className="rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring"
         >
           Read the docs
         </Link>
         <Link
           href="https://git.moleculesai.app/molecule-ai/molecule-core"
-          className="rounded-md border border-fd-border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-fd-muted"
+          className="rounded-md border border-fd-border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-fd-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring"
         >
           View on Gitea
         </Link>
diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 3b53c6c..2632040 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -41,8 +41,20 @@ export async function generateMetadata(props: {
   const page = source.getPage(params.slug);
   if (!page) notFound();
 
+  const url = `https://doc.moleculesai.app/docs/${(params.slug ?? []).join("/")}`;
+
   return {
     title: page.data.title,
     description: page.data.description,
+    openGraph: {
+      title: `${page.data.title} | Molecule AI Docs`,
+      description: page.data.description,
+      url,
+      siteName: "Molecule AI Documentation",
+      type: "article" as const,
+    },
+    alternates: {
+      canonical: url,
+    },
   };
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 90f4d40..48e5368 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -15,6 +15,19 @@ export const metadata = {
   description:
     'Build and run multi-agent organisations on the Molecule AI platform. Templates, plugins, channels, and the runtime that ties them together.',
   metadataBase: new URL('https://doc.moleculesai.app'),
+  openGraph: {
+    type: 'website',
+    siteName: 'Molecule AI Documentation',
+    title: 'Molecule AI Documentation',
+    description:
+      'Build and run multi-agent organisations on the Molecule AI platform. Templates, plugins, channels, and the runtime that ties them together.',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Molecule AI Documentation',
+    description:
+      'Build and run multi-agent organisations on the Molecule AI platform.',
+  },
 };
 
 export default function Layout({ children }: { children: ReactNode }) {
-- 
2.52.0