feat(console): add OG image and SEO meta tags for /black page (#8506)

3 files changed, 23 insertions, 0 deletions

diff --git a/packages/console/app/public/social-share-black.png b/packages/console/app/public/social-share-black.png
new file mode 120000
index 000000000..5baa00483
--- /dev/null
+++ b/packages/console/app/public/social-share-black.png
@@ -0,0 +1 @@
+../../../ui/src/assets/images/social-share-black.png
\ No newline at end of file
diff --git a/packages/console/app/src/routes/black.tsx b/packages/console/app/src/routes/black.tsx
index 14b75421b..bd8363470 100644
--- a/packages/console/app/src/routes/black.tsx
+++ b/packages/console/app/src/routes/black.tsx
@@ -1,4 +1,5 @@
 import { A, createAsync, RouteSectionProps } from "@solidjs/router"
+import { Title, Meta, Link } from "@solidjs/meta"
 import { createMemo } from "solid-js"
 import { github } from "~/lib/github"
 import { config } from "~/config"
@@ -17,6 +18,27 @@ export default function BlackLayout(props: RouteSectionProps) {
 
   return (
     <div data-page="black">
+      <Title>OpenCode Black | Access all the world's best coding models</Title>
+      <Meta
+        name="description"
+        content="Get access to Claude, GPT, Gemini and more with OpenCode Black subscription plans."
+      />
+      <Link rel="canonical" href={`${config.baseUrl}/black`} />
+      <Meta property="og:type" content="website" />
+      <Meta property="og:url" content={`${config.baseUrl}/black`} />
+      <Meta property="og:title" content="OpenCode Black | Access all the world's best coding models" />
+      <Meta
+        property="og:description"
+        content="Get access to Claude, GPT, Gemini and more with OpenCode Black subscription plans."
+      />
+      <Meta property="og:image" content="/social-share-black.png" />
+      <Meta name="twitter:card" content="summary_large_image" />
+      <Meta name="twitter:title" content="OpenCode Black | Access all the world's best coding models" />
+      <Meta
+        name="twitter:description"
+        content="Get access to Claude, GPT, Gemini and more with OpenCode Black subscription plans."
+      />
+      <Meta name="twitter:image" content="/social-share-black.png" />
       <div data-component="header-gradient" />
       <header data-component="header">
         <A href="/" data-component="header-logo">
diff --git a/packages/ui/src/assets/images/social-share-black.png b/packages/ui/src/assets/images/social-share-black.png
new file mode 100644
index 000000000..ab402cc66
--- /dev/null
+++ b/packages/ui/src/assets/images/social-share-black.png