diff --git a/docs/blog/images/2024-07-29/explain-with-ai-header.png b/docs/blog/images/2024-07-29/explain-with-ai-header.png
new file mode 100644
index 0000000000..c777ec9229
Binary files /dev/null and b/docs/blog/images/2024-07-29/explain-with-ai-header.png differ
diff --git a/nx-dev/nx-dev/app/blog/[slug]/page.tsx b/nx-dev/nx-dev/app/blog/[slug]/page.tsx
index 51b5c3bad5..7e4ebc03da 100644
--- a/nx-dev/nx-dev/app/blog/[slug]/page.tsx
+++ b/nx-dev/nx-dev/app/blog/[slug]/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata, ResolvingMetadata } from 'next';
 import { blogApi } from '../../../lib/blog.api';
 import { BlogDetails } from '@nx/nx-dev/ui-blog';
 import { DefaultLayout } from '@nx/nx-dev/ui-common';
+import { parse } from 'path';
 interface BlogPostDetailProps {
   params: { slug: string };
 }
@@ -12,6 +13,10 @@ export async function generateMetadata(
 ): Promise<Metadata> {
   const post = await blogApi.getBlogPostBySlug(slug);
   const previousImages = (await parent).openGraph?.images ?? [];
+
+  const postCoverImage = post?.cover_image || 'nx-media';
+  const ogImage = `${parse(postCoverImage).name}.png`;
+
   return {
     title: `${post.title} | Nx Blog`,
     description: 'Latest news from the Nx & Nx Cloud core team',
@@ -21,13 +26,11 @@ export async function generateMetadata(
       description: post.description,
       images: [
         {
-          url: post.cover_image
-            ? `https://nx.dev${post.cover_image}`
-            : 'https://nx.dev/socials/nx-media.png',
+          url: ogImage,
           width: 800,
           height: 421,
           alt: 'Nx: Smart, Fast and Extensible Build System',
-          type: 'image/jpeg',
+          type: 'image/png',
         },
         ...previousImages,
       ],