diff --git a/src/layouts/DocumentationLayout.js b/src/layouts/DocumentationLayout.js
index ae3f8e4c..000edca7 100644
--- a/src/layouts/DocumentationLayout.js
+++ b/src/layouts/DocumentationLayout.js
@@ -16,10 +16,11 @@ export function DocumentationLayout(props) {
       <Head>
         <meta name="description" content={props.layoutProps.meta.metaDescription || props.layoutProps.meta.description} />
         <meta key="twitter:card" name="twitter:card" content="summary_large_image" />
+        <meta key="og:image" property="og:image" content={router.pathname === '/docs' ? `https://javaistic.vercel.app${twitterDocs}`:`https://javaistic-og-image.vercel.app/**${props.layoutProps.meta.metaTitle || props.layoutProps.meta.title}**.png?theme=light&md=1&fontSize=120px&images=https%3A%2F%2Fjavaistic-assets.vercel.app%2Flogo%2Fjavaistic-logo-main.svg`} />
         <meta
           key="twitter:image"
           name="twitter:image"
-          content={`https://javaistic.vercel.app${twitterDocs}`}
+          content={router.pathname === '/docs' ? `https://javaistic.vercel.app${twitterDocs}` : `https://javaistic-og-image.vercel.app/**${props.layoutProps.meta.metaTitle || props.layoutProps.meta.title}**.png?theme=light&md=1&fontSize=120px&images=https%3A%2F%2Fjavaistic-assets.vercel.app%2Flogo%2Fjavaistic-logo-main.svg`}
         />
       </Head>
       <SidebarLayout nav={documentationNav} {...props} />
diff --git a/src/layouts/ProgramsLayout.js b/src/layouts/ProgramsLayout.js
index c3486733..1e1d63f3 100644
--- a/src/layouts/ProgramsLayout.js
+++ b/src/layouts/ProgramsLayout.js
@@ -15,11 +15,12 @@ export function ProgramsLayout(props) {
       </Title>
       <Head>
         <meta name="description" content={props.layoutProps.meta.metaDescription || props.layoutProps.meta.description} />
+        <meta key="og:image" property="og:image" content={router.pathname === '/programs' ? `https://javaistic.vercel.app${twitterPrograms}`:`https://javaistic-og-image.vercel.app/**${props.layoutProps.meta.metaTitle || props.layoutProps.meta.title}**.png?theme=light&md=1&fontSize=120px&images=https%3A%2F%2Fjavaistic-assets.vercel.app%2Flogo%2Fjavaistic-logo-main.svg`} />
         <meta key="twitter:card" name="twitter:card" content="summary_large_image" />
         <meta
           key="twitter:image"
           name="twitter:image"
-          content={`https://javaistic.vercel.app${twitterPrograms}`}
+          content={router.pathname === '/programs' ? `https://javaistic.vercel.app${twitterPrograms}` : `https://javaistic-og-image.vercel.app/**${props.layoutProps.meta.metaTitle || props.layoutProps.meta.title}**.png?theme=light&md=1&fontSize=120px&images=https%3A%2F%2Fjavaistic-assets.vercel.app%2Flogo%2Fjavaistic-logo-main.svg`}
         />
       </Head>
       <SidebarLayout nav={programsNav} {...props} />
