feat: Added meta tags to improve page's SEO (#12)

EGAMAGZ · web-flow · commit 57aa5169522d · 2025-03-30T21:43:19.000-06:00
diff --git a/public/images/binary-brains-banner.png b/public/images/binary-brains-banner.png
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -2,35 +2,77 @@
 import Footer from "../components/Footer.astro";
 import "../styles/global.css";
 
+const DEFAULT_KEYWORDS = ["binarybrains", "upiicsa", "algoritigmia"];
+
+const ogImage = {
+  path: "https://binarybrains-upiicsa.github.io/images/binary-brains-banner.png",
+  alt: "A logo of a blue brain digitalized",
+};
+
 interface Props {
   title: string;
+  description?: string;
+  keywords?: string[];
+  canonical?: URL;
 }
 
-const { title } = Astro.props;
+const {
+  title,
+  description,
+  keywords = DEFAULT_KEYWORDS,
+  canonical,
+} = Astro.props;
 ---
 
-<html lang="en">
+<html lang="es">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <base href="https://binarybrains-upiicsa.github.io/" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+
     <title>{title}</title>
+    <meta name="twitter:title" content={title} />
+    <meta property="og:title" content={title} />
+
+    {canonical && <link rel="canonical" href={canonical.toString()} />}
+
+    {
+      description && (
+        <>
+          <meta property="og:description" content={description} />
+          <meta name="twitter:description" content={description} />
+          <meta name="description" content={description} />
+        </>
+      )
+    }
+
+    <meta name="twitter:image" content={ogImage.path} />
+    <meta name="twitter:image:alt" content={ogImage.alt} />
+    <meta property="og:image" content={ogImage.path} />
+    <meta property="og:image:alt" content={ogImage.alt} />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="binarybrains-upiicsa" />
+    <meta property="og:locale" content="es_MX" />
+
+    <meta name="keywords" content={keywords.join(", ")} />
   </head>
   <body>
-    <div id="cursor" class="custom-cursor" />
+    <div id="cursor" class="custom-cursor"></div>
     <slot />
     <Footer />
   </body>
 </html>
 
 <script>
   const cursor = document.getElementById("cursor");
-    globalThis.addEventListener("mousemove", (event: MouseEvent) => {
-      if (cursor) {
-        cursor.style.transform =
-          `translate(${event.clientX}px, ${event.clientY}px)`;
-      }
-    });
+  globalThis.addEventListener("mousemove", (event: MouseEvent) => {
+    if (cursor) {
+      cursor.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+    }
+  });
 </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -23,7 +23,12 @@ const events = (await getCollection("events"))
     eventDates: event.data.eventDates.find(
       (date) => new Date(date.date) >= CURRENT_DATE,
     )!,
-  }));
+  }))
+  .sort(
+    (a, b) =>
+      new Date(a.eventDates.date).getTime() -
+      new Date(b.eventDates.date).getTime(),
+  );
 ---
 
 <Layout title="Binary Brains">
