dynamic og and titles

Author: Xeven777

src/layouts/Layout.astro

@@ -8,16 +8,23 @@ import { ViewTransitions } from "astro:transitions";
 
 export interface Props {
   title: string;
+  description?: string;
+  image?: string;
+  type?: "website" | "article";
+  tags?: string[];
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 
-const resolvedImageWithDomain = new URL(
-  "/opengraph.png",
-  Astro.site
-).toString();
+const {
+  title,
+  description = "A curated collection of dev-tools and technologies from India, built to fuel software development and streamline the SDLC process. Explore hundreds of solutions that can supercharge your workflows.",
+  image = "/opengraph.png",
+  type = "website",
+  tags = [],
+} = Astro.props;
 
-const { title } = Astro.props;
+const resolvedImageWithDomain = new URL(image, Astro.site).toString();
 
 const makeTitle = title
   ? title + " | " + "India Dev Stack"
@@ -68,22 +75,37 @@ const makeTitle = title
     <ViewTransitions />
     <SEO
       title={makeTitle}
-      description="A curated collection of dev-tools and technologies from India, built to fuel software development and streamline the SDLC process. Explore hundreds of solutions that can supercharge your workflows."
+      description={description}
       canonical={canonicalURL}
       twitter={{
         creator: "@xevenbiswas",
         card: "summary_large_image",
+        title: makeTitle,
+        description: description,
+        image: resolvedImageWithDomain,
+        imageAlt: `${title} Screenshot`,
       }}
       openGraph={{
         basic: {
           url: canonicalURL,
-          type: "website",
-          title: "India Dev Stack",
+          type: type,
+          title: makeTitle,
           image: resolvedImageWithDomain,
         },
         image: {
-          alt: "India Dev Stack Screenshot",
+          alt: `${title} Screenshot`,
         },
+        optional: {
+          description: description,
+          siteName: "India Dev Stack",
+          locale: "en_US",
+        },
+        article:
+          type === "article"
+            ? {
+                tags: tags,
+              }
+            : undefined,
       }}
     />
   </head>

src/pages/software/[slug].astro

@@ -17,9 +17,25 @@ export async function getStaticPaths() {
 }
 
 const { entry } = Astro.props;
+
+const metaData = {
+  title: `${entry.data.Name} - ${entry.data.Tagline || "Software Tool"}`,
+  description: entry.data.Description,
+  ogImage: entry.data.Images?.[0] || entry.data.Logo,
+  canonical: new URL(`/software/${entry.id}`, Astro.site),
+  data: {
+    category: entry.data.Category,
+    tags: entry.data.Tags,
+  },
+};
 ---
 
-<Layout title={entry.data.Name}>
+<Layout
+  title={metaData.title}
+  description={metaData.description}
+  image={metaData.ogImage}
+  type={"article"}
+  tags={metaData.data.tags}>
   <Container>
     <div class="mx-auto prose prose-lg mt-6 max-w-7xl">
       <div
@@ -58,7 +74,7 @@ const { entry } = Astro.props;
                   <img
                     src={entry.data.Logo}
                     alt={entry.data.Name}
-                    class="size-10 lg:size-12 cursor-pointer hover:brightness-150 hover:saturate-150 mt-2 shadow-sm dark:shadow-orange-600 rounded-lg"
+                    class="size-8 lg:size-12 cursor-pointer hover:brightness-150 hover:saturate-150 mt-2 shadow-sm dark:shadow-orange-600 rounded-lg"
                   />
                 </a>
               )