add titles, description and images for seo

web/src/app/kontakt/page.tsx

@@ -1,14 +1,28 @@
+import { Metadata, ResolvingMetadata } from "next";
 import { graphql } from "@/gql";
 import { ContactIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
 import { GeneralContactBlock } from "@/components/blocks/GeneralContactBlock";
+import { getSeoMetadata } from "@/lib/seo";
+
+const contactQuery = graphql(`
+  query contacts {
+    index: contactIndex {
+      ... on ContactIndex {
+        ...ContactIndex
+      }
+    }
+  }
+`);
 
 const ContactIndexDefinition = graphql(`
   fragment ContactIndex on ContactIndex {
     ... on ContactIndex {
       title
+      seoTitle
+      searchDescription
       lead
       body {
         ...Blocks
@@ -17,18 +31,24 @@ const ContactIndexDefinition = graphql(`
   }
 `);
 
-export default async function Page() {
-  const contactQuery = graphql(`
-    query contacts {
-      contactIndex {
-        ... on ContactIndex {
-          ...ContactIndex
-        }
-      }
-    }
-  `);
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
   const { data, error } = await getClient().query(contactQuery, {});
-  const index = (data?.contactIndex ?? []) as ContactIndexFragment;
+  const index = (data?.index ?? []) as ContactIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
+
+export default async function Page() {
+  const { data, error } = await getClient().query(contactQuery, {});
+  const index = (data?.index ?? []) as ContactIndexFragment;
 
   return (
     <main className="site-main" id="main">