Fixed opengraph again

src/layouts/Layout.astro

@@ -3,13 +3,14 @@ import { ClientRouter } from "astro:transitions";
 import NavigationBar from "../components/NavigationBar.vue";
 import ScrollUpButton from "../components/ScrollUpButton.vue";
 import { config } from "../config";
+import type { OpenGraphImage } from "../types";
 const currentPath = Astro.url.pathname;
 import "../styles/global.css";
 
 export interface Props {
     title?: string;
     description?: string;
-    ogImage?: string;
+    ogImage?: OpenGraphImage;
     ogType?: "website" | "article";
 }
 
@@ -24,9 +25,7 @@ const og = config.siteConfig.openGraph;
 const canonicalUrl = new URL(Astro.url.pathname, config.siteConfig.meta.url)
     .href;
 const resolvedOgImage = ogImage || og.image;
-const resolvedOgImageUrl = resolvedOgImage
-    ? new URL(resolvedOgImage, config.siteConfig.meta.url).href
-    : undefined;
+const resolvedOgImageUrl = new URL(resolvedOgImage.url, config.siteConfig.meta.url).href;
 const resolvedOgType = ogType || og.type || "website";
 ---
 
@@ -48,11 +47,11 @@ const resolvedOgType = ogType || og.type || "website";
         <meta property="og:url" content={canonicalUrl} />
         {og.siteName && <meta property="og:site_name" content={og.siteName} />}
         {og.locale && <meta property="og:locale" content={og.locale} />}
-        {
-            resolvedOgImageUrl && (
-                <meta property="og:image" content={resolvedOgImageUrl} />
-            )
-        }
+        <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} />
 
         <ClientRouter />
     </head>