Fix OG Images

WebDevSimplified · WebDevSimplified · commit 471f726d26c3 · 2025-09-17T15:45:56.000-05:00
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -23,8 +23,15 @@ const { title, description, permalink, image } = Astro.props
 <meta property="og:url" content={permalink} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-{image && <meta property="og:image" content={image} />}
-
+{
+  image && (
+    <>
+      <meta property="og:image" content={image} />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="630" />
+    </>
+  )
+}
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={permalink} />
@@ -49,9 +56,9 @@ const { title, description, permalink, image } = Astro.props
   }.js`}
 ></script>
 <script is:inline>
-window.plausible =
-  window.plausible ||
-  function () {
-    ; (window.plausible.q = window.plausible.q || []).push(arguments)
-  }
+  window.plausible =
+    window.plausible ||
+    function () {
+      ;(window.plausible.q = window.plausible.q || []).push(arguments)
+    }
 </script>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -21,7 +21,7 @@ const url = Astro.request.url
 
 <html lang={content.lang || "en"}>
   <head>
-    <BaseHead {title} {description} permalink={url} image={new URL(`${Astro.url.pathname}/og.jpg`, Astro.url).toString()} />
+    <BaseHead {title} {description} permalink={url} image={new URL(path.join(`${Astro.url.pathname}/og.jpg`), Astro.url).toString()} />
   </head>
 
   <body>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -19,7 +19,8 @@ interface MarkdownFrontmatter {
 // It will run during the build, but never in the browser.
 // All variables are available to use in the HTML template below.
 let title = "Web Dev Simplified Blog"
-let description = "In depth articles with interactive examples about every web dev topic."
+let description =
+  "In depth articles with interactive examples about every web dev topic."
 
 // Data Fetching: List all Markdown posts in the repo.
 
@@ -47,7 +48,12 @@ const allPosts = allMarkdownPosts
 
 <html lang="en">
   <head>
-    <BaseHead {title} {description} permalink={Astro.url.toString()} image={new URL("/og.jpg", Astro.url).toString()} />
+    <BaseHead
+      {title}
+      {description}
+      permalink={Astro.url.toString()}
+      image={new URL("/og.", Astro.url).toString()}
+    />
 
     <style>
       .content {
diff --git a/src/utils/generateOpenGraphImage.js b/src/utils/generateOpenGraphImage.js
@@ -164,7 +164,7 @@ export async function generateOpenGraphImage({
     satoriOptions,
   )
 
-  const jpg = await sharp(Buffer.from(svg)).jpeg({ quality: 100 }).toBuffer()
+  const jpg = await sharp(Buffer.from(svg)).jpeg({ quality: 90 }).toBuffer()
 
   return new Response(jpg, { headers: { "Content-Type": "image/jpg" } })
 }

Original file line number	Diff line number	Diff line change
`@@ -164,7 +164,7 @@ export async function generateOpenGraphImage({`
`164`	`164`	`satoriOptions,`
`165`	`165`	`)`
`166`	`166`
`167`		`- const jpg = await sharp(Buffer.from(svg)).jpeg({ quality: 100 }).toBuffer()`
	`167`	`+ const jpg = await sharp(Buffer.from(svg)).jpeg({ quality: 90 }).toBuffer()`
`168`	`168`
`169`	`169`	`return new Response(jpg, { headers: { "Content-Type": "image/jpg" } })`
`170`	`170`	`}`