diff --git a/apps/website/public/blogs-meta-img.png b/apps/website/public/blogs-meta-img.png
new file mode 100644
index 00000000..2412d40d
Binary files /dev/null and b/apps/website/public/blogs-meta-img.png differ
diff --git a/apps/website/public/cto-metadata-img.png b/apps/website/public/cto-metadata-img.png
new file mode 100644
index 00000000..f70dded0
Binary files /dev/null and b/apps/website/public/cto-metadata-img.png differ
diff --git a/apps/website/public/homepage-metadata-img.png b/apps/website/public/homepage-metadata-img.png
new file mode 100644
index 00000000..4c17a89c
Binary files /dev/null and b/apps/website/public/homepage-metadata-img.png differ
diff --git a/apps/website/src/layouts/base-meta-tags.astro b/apps/website/src/layouts/base-meta-tags.astro
index e0dd37e2..8514f864 100644
--- a/apps/website/src/layouts/base-meta-tags.astro
+++ b/apps/website/src/layouts/base-meta-tags.astro
@@ -3,7 +3,7 @@ import siteManifest from "../../public/site-manifest.json";
 
 const { street, city, region, postalCode, country } = siteManifest.company;
 const { twitter, linkedin, github, youtube, instagram } = siteManifest.social;
-const socialImage = `https://placehold.co/600x400`;
+const socialImage = `https://crocoder-company-website.vercel.app/blogs-meta-img.png`;
 
 const schema = {
   "@context": "https://schema.org",
@@ -50,6 +50,7 @@ const schema = {
 <meta property="og:url" content={`${siteManifest.url}/blog`} />
 <meta property="og:type" content="website" />
 <meta property="og:title" content={siteManifest.name} />
+<meta property="og:site_name" content={siteManifest.name} />
 <meta property="og:description" content={siteManifest.description} />
 <meta property="og:image" content={socialImage} />
 
@@ -57,6 +58,7 @@ const schema = {
 <meta name="twitter:card" content="summary_large_image" />
 <meta property="twitter:domain" content="crocoder.dev" />
 <meta property="twitter:url" content={`${siteManifest.url}/blog`} />
+<meta property="twitter:site" content={siteManifest.name} />
 <meta name="twitter:title" content={siteManifest.name} />
 <meta name="twitter:description" content={siteManifest.description} />
 <meta name="twitter:image" content={socialImage} />
diff --git a/apps/website/src/layouts/base.astro b/apps/website/src/layouts/base.astro
index 946d124b..19558eaf 100644
--- a/apps/website/src/layouts/base.astro
+++ b/apps/website/src/layouts/base.astro
@@ -20,7 +20,7 @@ if (theme.fonts.font_family.secondary) {
     .replace(/:[ital,]*[ital@]*[wght@]*[0-9,;]+/gi, "");
 }
 
-const { className } = Astro.props;
+const { className, ogImage } = Astro.props;
 ---
 
 <!doctype html>
@@ -32,7 +32,7 @@ const { className } = Astro.props;
       content="width=device-width, initial-scale=1, maximum-scale=5"
     />
     <link rel="sitemap" href="/sitemap.xml" />
-    <Meta />
+    <Meta imageUrl={ogImage}/>
     <AstroFont
       config={[
         {
diff --git a/apps/website/src/layouts/meta-tags.astro b/apps/website/src/layouts/meta-tags.astro
index f1fd1421..ea073d35 100644
--- a/apps/website/src/layouts/meta-tags.astro
+++ b/apps/website/src/layouts/meta-tags.astro
@@ -1,16 +1,22 @@
 ---
 import siteManifest from "../../public/site-manifest.json";
 
+interface Props {
+  imageUrl: string;
+}
+
+const { imageUrl = `https://crocoder-company-website.vercel.app/homepage-metadata-img.png` } = Astro.props;
+
+
 const { street, city, region, postalCode, country } = siteManifest.company;
 const { twitter, linkedin, github, youtube, instagram } = siteManifest.social;
-const socialImage = `https://placehold.co/600x400`;
 
 const schema = {
   "@context": "https://schema.org",
   "@type": "Organization",
   name: siteManifest.name,
   description: siteManifest.description,
-  logo: socialImage,
+  logo: imageUrl,
   url: siteManifest.url,
   address: {
     "@type": "PostalAddress",
@@ -48,15 +54,17 @@ const schema = {
 />
 <!-- OpenGraph -->
 <meta property="og:url" content={siteManifest.url} />
+<meta property="og:site_name" content={siteManifest.name} />
 <meta property="og:type" content="website" />
 <meta property="og:title" content={siteManifest.name} />
 <meta property="og:description" content={siteManifest.description} />
-<meta property="og:image" content={socialImage} />
+<meta property="og:image" content={imageUrl} />
 
 <!-- Twitter -->
 <meta name="twitter:card" content="summary_large_image" />
 <meta property="twitter:domain" content="crocoder.dev" />
 <meta property="twitter:url" content={siteManifest.url} />
+<meta property="twitter:site" content={siteManifest.name} />
 <meta name="twitter:title" content={siteManifest.name} />
 <meta name="twitter:description" content={siteManifest.description} />
-<meta name="twitter:image" content={socialImage} />
+<meta name="twitter:image" content={imageUrl} />
diff --git a/apps/website/src/pages/cto.astro b/apps/website/src/pages/cto.astro
index 2fa05b4b..6a2c7e1d 100644
--- a/apps/website/src/pages/cto.astro
+++ b/apps/website/src/pages/cto.astro
@@ -9,9 +9,12 @@ import Footer from "../components/footer.astro";
 import Navigation from "../components/navigation.astro";
 import Base from "../layouts/base.astro";
 import "../styles/main.css";
+
+const { ogImage = "https://crocoder-company-website.vercel.app/cto-metadata-img.png" } = Astro.props;
+
 ---
 
-<Base className="bg-white">
+<Base className="bg-white" ogImage={ogImage}>
   <Navigation />
   <Hero />
   <Values />
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 60f6bdc3..d6abf871 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -9,9 +9,13 @@ import Testimonial from "../components/testimonial.astro";
 import Values from "../components/Values.astro";
 import Base from "../layouts/base.astro";
 import "../styles/main.css";
+
+const { ogImage = "https://crocoder-company-website.vercel.app/homepage-metadata-img.png" } = Astro.props;
+
+
 ---
 
-<Base className="bg-white">
+<Base className="bg-white" ogImage={ogImage}>
   <Navigation />
   <Hero />
   <Clients />
