Merge pull request #177 from SpaceyaTech/feat/add-seo-metadata

feat: add seo metadata to website pages
SpaceyaTech · Jun 11, 2024 · bbd3d9e · bbd3d9e
2 parents 3b976b2 + bc94cb1
commit bbd3d9e
Show file tree

Hide file tree

Showing 14 changed files with 292 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.2",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.48.2",
     "react-hot-toast": "^2.4.1",
     "react-lazy-load-image-component": "^1.6.0",

diff --git a/src/APP/components/SeoMetadata.jsx b/src/APP/components/SeoMetadata.jsx
@@ -0,0 +1,42 @@
+import { Helmet } from "react-helmet-async";
+
+export default function SeoMetadata({
+  title,
+  description,
+  type = "website",
+  url,
+  ogImage = "https://apis.spaceyatech.com/media/blog-images/syt.png",
+  ogImageAlt = "SpaceYaTech logo, social media handles, website URL, email, and more on a muted background.",
+  siteName = "SpaceYaTech",
+}) {
+  return (
+    <Helmet prioritizeSeoTags>
+      {/* Standard metadata tags */}
+      <title>{`${title} - SpaceYaTech`}</title>
+      <meta name="description" content={description} />
+      <link rel="canonical" href={url} />
+      {/* End Standard metadata tags */}
+      {/* Standard OpenGraph metadata tags */}
+      <meta property="og:title" content={title} />
+      <meta property="og:type" content={type} />
+      <meta property="og:url" content={url} />
+      <meta property="og:image" content={ogImage} />
+      <meta property="og:image:alt" content={ogImageAlt} />
+      {/* End standard OG metadata tags */}
+      {/* Optional OG metadata tags */}
+      <meta property="og:image:width" content="1920" />
+      <meta property="og:image:height" content="480" />
+      <meta property="og:description" content={description} />
+      <meta property="og:site_name" content={siteName} />
+      <meta property="og:locale" content="en_US" />
+      <meta property="og:locale:alternate" content="en_GB" />
+      {/* End Optional OG metadata tags */}
+      {/* Twitter tags */}
+      <meta name="twitter:site" content="@SpaceYaTech" />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:title" content={`${title} - SpaceYaTech`} />
+      <meta name="twitter:description" content={description} />
+      {/* End Twitter tags */}
+    </Helmet>
+  );
+}
diff --git a/src/APP/pages/aboutUs/AboutUs.jsx b/src/APP/pages/aboutUs/AboutUs.jsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-
+import SeoMetadata from "../../components/SeoMetadata";
 import {
   HeroSection,
   LeadershipSection,
@@ -13,12 +13,22 @@ function AboutUs() {
   }, []);
 
   return (
-    <div className="text-[#323433] max-w-[1440px] mx-auto">
-      <HeroSection />
-      <MissionVisionSection />
-      <LeadershipSection />
-      <PartnerCTA />
-    </div>
+    <>
+      <SeoMetadata
+        title="About Us"
+        description="A community fostering innovation across African borders for tech enthusiasts with memberships across Kenya, Tanzania, Nigeria and pockets of Africa."
+        type="website"
+        url="https://www.spaceyatech.com/about-us"
+        ogImage="https://apis.spaceyatech.com/media/blog-images/syt.png"
+        ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background."
+      />
+      <div className="text-[#323433] max-w-[1440px] mx-auto">
+        <HeroSection />
+        <MissionVisionSection />
+        <LeadershipSection />
+        <PartnerCTA />
+      </div>
+    </>
   );
 }
 

diff --git a/src/APP/pages/blog2/Blog2.jsx b/src/APP/pages/blog2/Blog2.jsx
@@ -3,6 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
 
 import useBlogData from "../../../hooks/Queries/blog/useBlogData";
 import { Loader } from "../../components";
+import SeoMetadata from "../../components/SeoMetadata";
 import { Advert, BlogHeader, BlogBody } from "./sections";
 
 function Blog2() {
@@ -22,38 +23,49 @@ function Blog2() {
   }, [refetchBlogData, titleSlug]);
 
   return (
-    <div className="max-w-[1024px] mx-auto">
-      {isError && navigate("/error-500")}
+    <>
+      <SeoMetadata
+        title={blogData?.title}
+        description={blogData?.description}
+        type="article"
+        url={blogData?.title_slug}
+        ogImage={blogData?.image}
+        ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background."
+        siteName="SpaceYaTech Blog"
+      />
+      <div className="max-w-[1024px] mx-auto">
+        {isError && navigate("/error-500")}
 
-      {isLoading && (
-        <div className="flex flex-col items-center justify-center gap-4 py-10">
-          <Loader />
-          <p className="text-lg font-medium text-primary">
-            Loading blog details...
-          </p>
-        </div>
-      )}
-      {isSuccess && (
-        <>
-          <Advert />
-          <BlogHeader
-            title={blogData?.title}
-            description={blogData?.description}
-            image={blogData?.image}
-            author={blogData?.author}
-            createdAt={blogData?.created_at}
-            id={blogData?.id}
-            likes={blogData?.likes}
-            titleSlug={blogData?.title_slug}
-          />
-          <BlogBody
-            id={blogData?.id}
-            categoryId={blogData?.category.id}
-            blogBody={blogData?.body}
-          />
-        </>
-      )}
-    </div>
+        {isLoading && (
+          <div className="flex flex-col items-center justify-center gap-4 py-10">
+            <Loader />
+            <p className="text-lg font-medium text-primary">
+              Loading blog details...
+            </p>
+          </div>
+        )}
+        {isSuccess && (
+          <>
+            <Advert />
+            <BlogHeader
+              title={blogData?.title}
+              description={blogData?.description}
+              image={blogData?.image}
+              author={blogData?.author}
+              createdAt={blogData?.created_at}
+              id={blogData?.id}
+              likes={blogData?.likes}
+              titleSlug={blogData?.title_slug}
+            />
+            <BlogBody
+              id={blogData?.id}
+              categoryId={blogData?.category.id}
+              blogBody={blogData?.body}
+            />
+          </>
+        )}
+      </div>
+    </>
   );
 }
 

diff --git a/src/APP/pages/blogs/Blogs.jsx b/src/APP/pages/blogs/Blogs.jsx
@@ -1,13 +1,25 @@
 import React from "react";
 
+import SeoMetadata from "../../components/SeoMetadata";
 import { Banner, BlogsWrapper } from "./sections";
 
 function Blogs() {
   return (
-    <section className="flex flex-col items-center gap-4 max-w-[1440px] mx-auto">
-      <Banner />
-      <BlogsWrapper />
-    </section>
+    <>
+      <SeoMetadata
+        title="Blog"
+        description="SpaceYaTech Blog home page"
+        type="website"
+        url="https://www.spaceyatech.com/blogs"
+        ogImage="https://apis.spaceyatech.com/media/blog-images/syt.png"
+        ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background."
+        siteName="SpaceYaTech Blog"
+      />
+      <section className="flex flex-col items-center gap-4 max-w-[1440px] mx-auto">
+        <Banner />
+        <BlogsWrapper />
+      </section>
+    </>
   );
 }
 

diff --git a/src/APP/pages/community/CommunityPage.jsx b/src/APP/pages/community/CommunityPage.jsx
@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import SeoMetadata from "../../components/SeoMetadata";
 import EventsSection from "../events/sections/eventsSection/EventsSection";
 import { WelcomeSection, GallerySection } from "./sections";
 
@@ -8,13 +9,23 @@ function CommunityPage() {
   }, []);
 
   return (
-    <section className="bg-[#d9d9d9]/30 ">
-      <div className="max-w-[1440px] mx-auto">
-        <WelcomeSection />
-        <EventsSection showAllEventsLink />
-        <GallerySection />
-      </div>
-    </section>
+    <>
+      <SeoMetadata
+        title="Community"
+        description="SpaceYaTech is a dynamic tech community fostering career growth for young professionals across all tech sectors, offering networking and learning opportunities for all career stages."
+        type="website"
+        url="https://www.spaceyatech.com/community"
+        ogImage="https://apis.spaceyatech.com/media/blog-images/syt.png"
+        ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background."
+      />
+      <section className="bg-[#d9d9d9]/30 ">
+        <div className="max-w-[1440px] mx-auto">
+          <WelcomeSection />
+          <EventsSection showAllEventsLink />
+          <GallerySection />
+        </div>
+      </section>
+    </>
   );
 }
 

diff --git a/src/APP/pages/community/sections/eventsPreview/SingleEvents/SingleEvent.jsx b/src/APP/pages/community/sections/eventsPreview/SingleEvents/SingleEvent.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { useParams } from "react-router-dom";
+import SeoMetadata from "../../../../../components/SeoMetadata";
 
 import { GoBackBtn, LandingWrapper, Loader } from "../../../../../components";
 import { EventDescription, Hero, SimilarEvents } from "./sections";
@@ -21,6 +22,13 @@ function SingleEvent() {
 
   return (
     <>
+      <SeoMetadata
+        title={`${oneEvent?.name} Event`}
+        description={oneEvent?.about}
+        type="website"
+        url={`https://spaceyatech.com/events/${oneEvent?.id}`}
+        siteName="SpaceYaTech"
+      />
       {isError && <p>Error fetching event!</p>}
       {isPending && (
         <div className="flex flex-col items-center justify-center gap-4 py-10">

diff --git a/src/APP/pages/events/pages/EventsPage.jsx b/src/APP/pages/events/pages/EventsPage.jsx
@@ -1,19 +1,29 @@
 import React from "react";
 
 import { GoBackBtn } from "../../../components";
+import SeoMetadata from "../../../components/SeoMetadata";
 import { EventsSection, FeaturedCarousel } from "../sections";
 
 function EventsPage() {
   return (
-    <section className="px-2 md:px-0 py-4 md:py-10 bg-gray-100">
-      <div className="max-w-1216 mx-auto flex flex-col gap-3 md:gap-6 w-full md:p-3">
-        <GoBackBtn />
+    <>
+      <SeoMetadata
+        title="Upcoming Events"
+        description="Upcoming tech events powered by SpaceYaTech."
+        type="website"
+        url="https://www.spaceyatech.com/events"
+        ogImage="https://apis.spaceyatech.com/media/blog-images/syt.png"
+        ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background."
+      />
+      <section className="px-2 md:px-0 py-4 md:py-10 bg-gray-100">
+        <div className="max-w-1216 mx-auto flex flex-col gap-3 md:gap-6 w-full md:p-3">
+          <GoBackBtn />
+          <FeaturedCarousel />
 
-        <FeaturedCarousel />
-
-        <EventsSection />
-      </div>
-    </section>
+          <EventsSection />
+        </div>
+      </section>
+    </>
   );
 }