feat: add og tags to award page (#114)

* feat: add og tags to award page * fix: og description
tolocar-project · Dec 19, 2023 · 00759f5 · 00759f5
1 parent b766573
commit 00759f5
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/public/og_image_award.jpg b/public/og_image_award.jpg
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -8,6 +8,8 @@ import "../../base.css";
 
 type Props = MarkdownLayoutProps<{
   title: string;
+  metaImage: string;
+  metaDescription: string;
   footerGrey?: boolean;
   darkNavigation?: boolean;
 }>;
@@ -34,6 +36,9 @@ const translatedAndRebasedMenu = translatedMenu?.map((menuItem) => ({
 }));
 
 const isProduction = import.meta.env.MODE === "production";
+
+const META_TITLE = `${frontmatter?.title} - Tolocar Project`;
+const META_CANONICAL_URL = new URL(Astro.url.pathname, Astro.site);
 ---
 
 <!doctype html>
@@ -44,6 +49,24 @@ const isProduction = import.meta.env.MODE === "production";
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href={"/favicon.png"} />
     <meta name="generator" content={Astro.generator} />
+    {frontmatter?.title && <meta property="og:title" content={META_TITLE} />}
+    <meta property="og:url" content={META_CANONICAL_URL} />
+    {
+      frontmatter?.metaImage && (
+        <meta
+          property="og:image"
+          content={Astro.site + frontmatter?.metaImage}
+        />
+      )
+    }
+    {
+      frontmatter?.metaDescription && (
+        <meta
+          property="og:description"
+          content={frontmatter?.metaDescription}
+        />
+      )
+    }
     <meta
       name="description"
       content="The Tolocar project sends mobile makerspaces into Ukraine to help, empower, equip and train local communities through open technology, knowledge and innovation."
@@ -59,7 +82,7 @@ const isProduction = import.meta.env.MODE === "production";
         />
       )
     }
-    <title>{frontmatter?.title} - Tolocar Project</title>
+    <title>{META_TITLE}</title>
   </head>
   <body class="w-full font-inter antialiased h-full tracking-[-0.02em]">
     <main class="flex flex-col items-center h-full overflow-x-hidden">

diff --git a/src/pages/en/makersinnovationaward.mdx b/src/pages/en/makersinnovationaward.mdx
@@ -2,6 +2,8 @@
 layout: "@layouts/AwardsLayout.astro"
 title: Makers Innovation Award
 footerGrey: false
+metaImage: og_image_award.jpg
+metaDescription: "Empowering Ukrainian Maker Community: Where Networking Meets Funding, Mentoring Sparks Ideas, and Innovation Comes to Life!"
 ---
 
 import WideCard from "@components/WideCard";

diff --git a/src/pages/ua/makersinnovationaward.mdx b/src/pages/ua/makersinnovationaward.mdx
@@ -2,6 +2,8 @@
 layout: "@layouts/AwardsLayout.astro"
 title: Нагорода “Інновації Мейкерів”
 footerGrey: false
+metaImage: og_image_award.jpg
+metaDescription: "Сприяння розвитку можливостей української спільноти мейкерів: тут нетворкінг зустрічається з фінансуванням, менторство запалює ідеї, а інновації втілюються в життя!"
 ---
 
 import WideCard from "@components/WideCard";