Update Layout.astro

src/layouts/Layout.astro

@@ -8,14 +8,35 @@ import "../styles/global.css";
 interface Props {
     title?: string;
     description?: string;
+    ogImage?: {
+        url: string;
+        width: number;
+        height: number;
+        type: string;
+        alt: string;
+    };
 }
 
-const { title = siteConfig.name, description = siteConfig.description } =
+const {
-    Astro.props;
+    title = siteConfig.name,
+    description = siteConfig.description,
+    ogImage,
+} = Astro.props;
 
 const metaTitle =
     title === siteConfig.name ? title : `${title} | ${siteConfig.name}`;
 
+const resolvedOgImage = ogImage || {
+    url: "/logo.webp",
+    width: 1024,
+    height: 1024,
+    type: "image/webp",
+    alt: "Atash Consulting",
+};
+
+const siteUrl = Astro.url.href;
+const resolvedOgImageUrl = new URL(resolvedOgImage.url, siteUrl).href;
+
 const isProd = import.meta.env.PROD;
 ---
 
@@ -27,6 +48,15 @@ const isProd = import.meta.env.PROD;
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <meta name="generator" content={Astro.generator} />
         <meta name="description" content={description} />
+        <meta property="og:title" content={metaTitle} />
+        <meta property="og:description" content={description} />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={siteUrl} />
+        <meta property="og:image" content={resolvedOgImageUrl} />
+        <meta property="og:image:width" content={String(resolvedOgImage.width)} />
+        <meta property="og:image:height" content={String(resolvedOgImage.height)} />
+        <meta property="og:image:type" content={resolvedOgImage.type} />
+        <meta property="og:image:alt" content={resolvedOgImage.alt} />
         <title>{metaTitle}</title>
         {isProd && (
             <script