Merge pull request #31 from GovTechSG/fix/og-tags

fix: og meta tags
GovTechSG · Dec 31, 2023 · c796bd5 · c796bd5
2 parents bec1b4d + e097783
commit c796bd5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx
@@ -23,7 +23,20 @@ const App: AppType<{ session: Session | null }> = ({ Component, pageProps }: App
                 <meta property="og:image:width" content="1200" />
                 <meta property="og:image:height" content="630" />
                 <meta property="og:image:alt" content="Purpose Bound Money (PBM) Portal" />
+                <meta
+                    property="og:description"
+                    content="A protocol, developed as part of Project Orchid, enabling the use of digital money with automated on-chain escrow payment releases."
+                />
                 <meta property="og:title" content="Purpose Bound Money (PBM) Portal" />
+                <meta name="twitter:title" content="Purpose Bound Money (PBM) Portal" />
+                <meta
+                    name="twitter:description"
+                    content="A protocol, developed as part of Project Orchid, enabling the use of digital money with automated on-chain escrow payment releases."
+                />
+                <meta name="twitter:image" content="/opengraph-image.png" />
+                <meta name="twitter:image:width" content="1200" />
+                <meta name="twitter:image:height" content="630" />
+                <meta name="twitter:image:alt" content="Purpose Bound Money (PBM) Portal" />
                 <meta name="twitter:card" content="summary_large_image" />
                 <meta
                     property="og:description"

diff --git a/packages/web/app/layout.tsx b/packages/web/app/layout.tsx
@@ -36,6 +36,20 @@ export const metadata: Metadata = {
   },
   manifest: "/site.webmanifest",
   metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL!),
+  twitter: {
+    title: "The Purpose Bound Money (PBM)",
+    description:
+      "A protocol, developed as part of Project Orchid, enabling the use of digital money with automated on-chain escrow payment releases.",
+    card: "summary_large_image",
+    images: [
+      {
+        url: "/opengraph-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Purpose Bound Money (PBM)",
+      },
+    ],
+  },
   openGraph: {
     type: "website",
     title: "The Purpose Bound Money (PBM)",
@@ -62,9 +76,6 @@ export default function RootLayout({
   // noinspection HtmlRequiredTitleElement
   return (
     <html lang="en">
-      <head>
-        <meta name="twitter:card" content="summary_large_image" />
-      </head>
       <body
         className={`${inter.variable} ${architects_daughter.variable} font-inter antialiased bg-white text-gray-700 tracking-tight bg-top bg-no-repeat bg-auto bg-blend-multiply bg-page`}
       >