Merge pull request #11 from OpenUpSA/feature/metadata-update

Added OpenGraph tags for Facebook and X/Twitter
OpenUpSA · Jul 8, 2024 · 080587f · 080587f
2 parents b79d2d9 + 94cf84f
commit 080587f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,10 +2,10 @@ import type { Metadata } from "next";
 import "./globals.scss";
 import GoogleAnalytics from "@/components/GoogleAnalytics";
 
-
 export const metadata: Metadata = {
-  title: "Open Secrets PowerMapper",
-  description: "by OpenUp.",
+  title: "PowerMapper by Open Secrets",
+  description:
+    "Discover the PowerMapper by Open Secrets: An interactive tool that maps and profiles key power players benefiting from the climate crisis and the transition to renewables in South Africa.",
 };
 
 export default function RootLayout({
@@ -17,6 +17,41 @@ export default function RootLayout({
     <html lang="en">
       <head>
         <GoogleAnalytics />
+        <meta
+          property="og:url"
+          content="https://powermapper.opensecrets.org.za/"
+        />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="PowerMapper by Open Secrets" />
+        <meta
+          property="og:description"
+          content="Discover the PowerMapper by Open Secrets: An interactive tool that maps and profiles key power players benefiting from the climate crisis and the transition to renewables in South Africa"
+        />
+        <meta
+          property="og:image"
+          content="https://powermapper.opensecrets.org.za/_next/static/media/intro.0b4ef957.png"
+        />
+        <meta property="og:image:width" content="516" />
+        <meta property="og:image:height" content="206" />
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:domain"
+          content="powermapper.opensecrets.org.za"
+        />
+        <meta
+          property="twitter:url"
+          content="https://powermapper.opensecrets.org.za/"
+        />
+        <meta name="twitter:title" content="PowerMapper by Open Secrets" />
+        <meta
+          name="twitter:description"
+          content="Discover the PowerMapper by Open Secrets: An interactive tool that maps and profiles key power players benefiting from the climate crisis and the transition to renewables in South Africa"
+        />
+        <meta
+          name="twitter:image"
+          content="https://powermapper.opensecrets.org.za/images/intro.png"
+        ></meta>
       </head>
       <body>{children}</body>
     </html>

diff --git a/components/introModal/index.tsx b/components/introModal/index.tsx
@@ -36,7 +36,7 @@ export function IntroModal({
         <CardMedia
           className="media"
           image={intro.src}
-          title="Power Mapper by Open Secrets graphic"
+          title="PowerMapper by Open Secrets graphic"
         />
         <CardContent className="content">
           <Typography