diff --git a/astro.config.mjs b/astro.config.mjs
index 16bae87..60781d3 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -22,4 +22,5 @@ export default defineConfig({
   experimental: {
     actions: true,
   },
+  site: "https://mikkelsvartveit.com",
 });
diff --git a/src/components/HeadContent.astro b/src/components/HeadContent.astro
index 388909a..4aaca82 100644
--- a/src/components/HeadContent.astro
+++ b/src/components/HeadContent.astro
@@ -10,10 +10,12 @@ interface Props {
 
 const { title, description, image, themeColor } = Astro.props;
 
+const origin = import.meta.env.PROD ? Astro.site?.origin : Astro.url.origin;
+
 const fullTitle = title ? `${title} – Mikkel Svartveit` : "Mikkel Svartveit";
 const defaultDescription =
   "Hi, I'm Mikkel! I am a Computer Science student from Norway and this is my playground. Here you will find some articles, programming projects, and a small collection of photos I'm proud of.";
-const defaultImage = "/favicon.png";
+const fullImageUrl = origin + (image ?? "/favicon.png");
 ---
 
 <meta charset="utf-8" />
@@ -33,13 +35,13 @@ const defaultImage = "/favicon.png";
 <!--  Open Graph meta tags -->
 <meta property="og:title" content={fullTitle} />
 <meta property="og:description" content={description ?? defaultDescription} />
-<meta property="og:image" content={image ?? defaultImage} />
+<meta property="og:image" content={fullImageUrl} />
 
 <!-- Twitter meta tags -->
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:site" content="@mikkelsvartveit" />
 <meta name="twitter:title" content={fullTitle} />
 <meta name="twitter:description" content={description ?? defaultDescription} />
-<meta name="twitter:image" content={image ?? defaultImage} />
+<meta name="twitter:image" content={fullImageUrl} />
 
 <ViewTransitions fallback="none" />