Merge pull request #75 from WebDevSimplified/fix-og-img

WebDevSimplified · web-flow · commit 2a471646a14a · 2025-09-18T06:58:14.000-05:00
Add Secure URL
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -3,9 +3,14 @@ export interface Props {
   title: string
   description: string
   permalink: string
-  image?: string
 }
-const { title, description, permalink, image } = Astro.props
+const { title, description, permalink } = Astro.props
+const url = new URL(permalink)
+const imageHttpUrl = new URL("og.webp", url)
+imageHttpUrl.protocol = "http:"
+
+const imageHttpsUrl = new URL(imageHttpUrl)
+imageHttpsUrl.protocol = "https:"
 ---
 
 <!-- Global Metadata -->
@@ -23,21 +28,17 @@ 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} />
-      <meta property="og:image:width" content="1200" />
-      <meta property="og:image:height" content="630" />
-    </>
-  )
-}
+<meta property="og:image" content={imageHttpUrl.toString()} />
+<meta property="og:image:secure_url" content={imageHttpsUrl.toString()} />
+<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} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-{image && <meta property="twitter:image" content={image} />}
+<meta property="twitter:image" content={imageHttpUrl.toString()} />
 
 <!-- Fonts -->
 <link rel="preconnect" href="https://fonts.gstatic.com" />
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -5,7 +5,6 @@ import "../styles/shiki-highlight.css"
 import BaseHead from "../components/BaseHead.astro"
 import BlogPost from "../components/BlogPost.astro"
 import BaseTopOfBody from "src/components/BaseTopOfBody.astro"
-import path from "path"
 
 const { content } = Astro.props
 const {
@@ -19,17 +18,9 @@ const {
 const url = Astro.request.url
 ---
 
-<html lang={content.lang || "en"}>
+<html lang={content.lang || "en"} prefix="og: https://ogp.me/ns#">
   <head>
-    <BaseHead
-      {title}
-      {description}
-      permalink={url}
-      image={new URL(
-        path.join(Astro.url.pathname, "og.webp"),
-        Astro.url,
-      ).toString()}
-    />
+    <BaseHead {title} {description} permalink={url} />
   </head>
 
   <body>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -9,7 +9,7 @@ let description = "Web Dev Simplified Blog"
 let permalink = "https://blog.webdevsimplified.com"
 ---
 
-<html lang="en">
+<html lang="en" prefix="og: https://ogp.me/ns#">
   <head>
     <BaseHead {title} {description} {permalink} />
   </head>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -46,14 +46,9 @@ const allPosts = allMarkdownPosts
 // https://docs.astro.build/core-concepts/astro-components/
 ---
 
-<html lang="en">
+<html lang="en" prefix="og: https://ogp.me/ns#">
   <head>
-    <BaseHead
-      {title}
-      {description}
-      permalink={Astro.url.toString()}
-      image={new URL("/og.webp", Astro.url).toString()}
-    />
+    <BaseHead {title} {description} permalink={Astro.url.toString()} />
 
     <style>
       .content {
