Add social sharing previews (Open Graph + Twitter cards)

src/app/routes/home-de.tsx

@@ -2,13 +2,29 @@ import type { Route } from "./+types/home-de";
 import { Welcome } from "../welcome/welcome";
 
 export function meta({}: Route.MetaArgs) {
+  const title = "Marvin Rühe — Teamleitung Softwareentwicklung";
+  const description =
+    "Marvin Rühe — Teamleitung Softwareentwicklung bei gb&t. Ich entwickle Windows-Apps (WinUI 3, WPF, MSIX), lokale KI und Web-Tools und leite die Entwicklung der preisgekrönten Software telani.";
+  const url = "https://ruehe.me/de";
+  const image = "https://ruehe.me/og-de.jpg";
   return [
-    { title: "Marvin Rühe — Teamleitung Softwareentwicklung" },
-    {
-      name: "description",
-      content:
-        "Marvin Rühe — Teamleitung Softwareentwicklung bei gb&t. Ich entwickle Windows-Apps (WinUI 3, WPF, MSIX), lokale KI und Web-Tools und leite die Entwicklung der preisgekrönten Software telani.",
-    },
+    { title },
+    { name: "description", content: description },
+    { property: "og:type", content: "website" },
+    { property: "og:site_name", content: "Marvin Rühe" },
+    { property: "og:title", content: title },
+    { property: "og:description", content: description },
+    { property: "og:url", content: url },
+    { property: "og:locale", content: "de_DE" },
+    { property: "og:locale:alternate", content: "en_US" },
+    { property: "og:image", content: image },
+    { property: "og:image:width", content: "1200" },
+    { property: "og:image:height", content: "630" },
+    { property: "og:image:alt", content: title },
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:title", content: title },
+    { name: "twitter:description", content: description },
+    { name: "twitter:image", content: image },
   ];
 }
 

src/app/routes/home.tsx

@@ -2,13 +2,29 @@ import type { Route } from "./+types/home";
 import { Welcome } from "../welcome/welcome";
 
 export function meta({}: Route.MetaArgs) {
+  const title = "Marvin Rühe — Team Lead, Software Development";
+  const description =
+    "Marvin Rühe — Team Lead, Software Development at gb&t. I build Windows apps (WinUI 3, WPF, MSIX), on-device AI, and web tools, and lead development of the award-winning telani software.";
+  const url = "https://ruehe.me/";
+  const image = "https://ruehe.me/og.jpg";
   return [
-    { title: "Marvin Rühe — Team Lead, Software Development" },
-    {
-      name: "description",
-      content:
-        "Marvin Rühe — Team Lead, Software Development at gb&t. I build Windows apps (WinUI 3, WPF, MSIX), on-device AI, and web tools, and lead development of the award-winning telani software.",
-    },
+    { title },
+    { name: "description", content: description },
+    { property: "og:type", content: "website" },
+    { property: "og:site_name", content: "Marvin Rühe" },
+    { property: "og:title", content: title },
+    { property: "og:description", content: description },
+    { property: "og:url", content: url },
+    { property: "og:locale", content: "en_US" },
+    { property: "og:locale:alternate", content: "de_DE" },
+    { property: "og:image", content: image },
+    { property: "og:image:width", content: "1200" },
+    { property: "og:image:height", content: "630" },
+    { property: "og:image:alt", content: title },
+    { name: "twitter:card", content: "summary_large_image" },
+    { name: "twitter:title", content: title },
+    { name: "twitter:description", content: description },
+    { name: "twitter:image", content: image },
   ];
 }