diff --git a/apps/playground/src/components/site/metatags.tsx b/apps/playground/src/components/site/metatags.tsx
index 86e302c7e..9bfb2de36 100644
--- a/apps/playground/src/components/site/metatags.tsx
+++ b/apps/playground/src/components/site/metatags.tsx
@@ -19,49 +19,53 @@ export default function Metatags({
     keywords =
       "developer, tools, cardano, blockchain, sdk, plutus, crypto, web3, metaverse, gaming, ecommerce, nfts, apis, aiken";
   }
+
+  let _title = title;
   if (title === undefined) {
-    title = "Cardano Web3 TypeScript SDK & off-chain Framework";
+    _title = "Mesh JS - Cardano Web3 TypeScript SDK & Off-Chain Framework";
+  } else {
+    title = title + " - Mesh JS";
   }
 
-  title = title + " - Mesh JS";
-
   return (
     <Head>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta charSet="utf-8" />
 
-      <title>{title}</title>
+      <title>{title ? title : _title}</title>
       <meta name="description" content={description} />
       <meta name="keywords" content={keywords} />
 
-      <meta property="og:title" content={title} />
-      <meta property="og:site_name" content={title} />
+      <meta property="og:title" content={_title} />
+      <meta property="og:site_name" content={_title} />
       <meta property="og:type" content="website" />
       <meta property="og:description" content={description} />
-      {image ? (
+      {image && (
         <meta property="og:image" content={`https://meshjs.dev${image}`} />
-      ) : (
+      )}
+      {title && image === undefined && (
         <meta
           property="og:image"
           content={`https://meshjs.dev/api/og?title=${title}`}
         />
       )}
-      <meta property="og:image:alt" content={title} />
+      <meta property="og:image:alt" content={_title} />
 
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:site" content="@meshsdk" />
-      <meta name="twitter:title" content={title} />
+      <meta name="twitter:title" content={_title} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:creator" content="@meshsdk" />
-      {image ? (
-        <meta name="twitter:image" content={`https://meshjs.dev${image}`} />
-      ) : (
+      {image && (
+        <meta property="twitter:image" content={`https://meshjs.dev${image}`} />
+      )}
+      {title && image === undefined && (
         <meta
-          name="twitter:image"
+          property="twitter:image"
           content={`https://meshjs.dev/api/og?title=${title}`}
         />
       )}
-      <meta name="twitter:image:alt" content={title} />
+      <meta name="twitter:image:alt" content={_title} />
 
       <link
         rel="apple-touch-icon"
diff --git a/apps/playground/src/pages/api/og.tsx b/apps/playground/src/pages/api/og.tsx
index b28f9bc63..9cad6b535 100644
--- a/apps/playground/src/pages/api/og.tsx
+++ b/apps/playground/src/pages/api/og.tsx
@@ -13,7 +13,7 @@ export default function handler(request: NextRequest) {
     const hasTitle = searchParams.has("title");
     const title = hasTitle
       ? searchParams.get("title")?.slice(0, 100)
-      : "Mesh JS - Cardano Web3 TypeScript SDK & off-chain Framework";
+      : "Mesh JS - Cardano Web3 TypeScript SDK & Off-Chain Framework";
 
     return new ImageResponse(
       (
