attempt to improve og

MeshJS · Nov 11, 2024 · 94edf4d · 94edf4d
1 parent f26d21d
commit 94edf4d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/apps/playground/src/components/site/metatags.tsx b/apps/playground/src/components/site/metatags.tsx
@@ -4,12 +4,10 @@ export default function Metatags({
   title,
   keywords,
   description,
-  image,
 }: {
   title?: string;
   keywords?: string;
   description?: string;
-  image?: string;
 }) {
   if (description === undefined) {
     description =
@@ -19,49 +17,63 @@ 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}`} />
       ) : (
         <meta
           property="og:image"
           content={`https://meshjs.dev/api/og?title=${title}`}
         />
+      )} */}
+      {title && (
+        <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 ? (
+      {/* {image ? (
         <meta name="twitter:image" content={`https://meshjs.dev${image}`} />
       ) : (
         <meta
           name="twitter:image"
           content={`https://meshjs.dev/api/og?title=${title}`}
         />
+      )} */}
+      {title && (
+        <meta
+          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
@@ -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(
       (