Fixed opengraph again

src/config.ts

@@ -143,7 +143,13 @@ export const config: Config = {
       author: "Atridad Lahiji",
     },
     openGraph: {
-      image: "/logo.png",
+      image: {
+        url: "/logo.webp",
+        width: 1024,
+        height: 1024,
+        type: "image/webp",
+        alt: "Atridad Lahiji",
+      },
       type: "website",
       locale: "en_US",
       siteName: "Atridad Lahiji",

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: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>

src/types.ts

@@ -169,8 +169,16 @@ export interface HomepageSections {
   };
 }
 
+export interface OpenGraphImage {
+  url: string;
+  width: number;
+  height: number;
+  type: string;
+  alt: string;
+}
+
 export interface OpenGraphConfig {
-  image?: string;
+  image: OpenGraphImage;
   type?: "website" | "article";
   locale?: string;
   siteName?: string;
@@ -179,7 +187,7 @@ export interface OpenGraphConfig {
 export interface PageOpenGraph {
   title?: string;
   description?: string;
-  image?: string;
+  image?: OpenGraphImage;
   type?: "website" | "article";
 }