Merge pull request #209 from Web-Dev-Path/feature/implement-dynamic-m…

…eta-tags Imeplementation of Dynamic Meta Tags
Web-Dev-Path · Nov 28, 2023 · f7496b4 · f7496b4
2 parents 05de1ad + bc12090
commit f7496b4
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -118,6 +118,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added netlify icon and text to the footer
 - Updated robots.txt and added SEO tags
 - Added Code of Conduct
+- Implemented dynamic meta tags for each page
 
 ### Fixed
 

diff --git a/components/layout/Meta.js b/components/layout/Meta.js
@@ -1,8 +1,11 @@
 import Head from 'next/head';
-import { meta } from '@/utils/meta';
+import pageMeta from '@/utils/meta';
+import { usePathname } from 'next/navigation';
 import Script from 'next/script';
 
 export default function Meta() {
+  const currentPath = usePathname();
+  const meta = currentPath in pageMeta ? pageMeta[currentPath] : pageMeta['/'];
   return (
     <>
       <Head>
@@ -46,7 +49,7 @@ export default function Meta() {
         <meta property='og:image:width' content='1200' />
         <meta property='og:image:height' content='1200' />
         <meta name='robots' content='index, follow' />
-        <link rel='canonical' href='https://www.webdevpath.co' />
+        <link rel='canonical' href={meta.canonical} />
       </Head>
       {/* Google Analytics */}
       <Script

diff --git a/pages/_document.js b/pages/_document.js
@@ -31,7 +31,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
-          <meta charset='utf-8' />
+          <meta charSet='utf-8' />
           <meta name='description' content='Level up your tech career.' />
           <meta name='keywords' content='Web Dev Path' />
           <meta property='og:title' content='Web Dev Path' />
@@ -62,7 +62,6 @@ class MyDocument extends Document {
             rel='stylesheet'
             href='https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Open+Sans:wght@700&display=swap'
           />
-          <link rel='canonical' href='https://www.webdevpath.co' />
         </Head>
         <body>
           <Main />

diff --git a/utils/meta.js b/utils/meta.js
@@ -1,6 +1,29 @@
-export const meta = {
-  title: 'Web Dev Path',
-  keywords: 'web development, mentoring, volunteering, Next.js',
-  description:
-    'The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey.',
+const pageMeta = {
+  '/': {
+    title: 'Home - Web Dev Path',
+    description: 'Start your journey in web development with Web Dev Path.',
+    keywords: 'web development, learning, coding',
+    canonical: 'https://www.webdevpath.co',
+  },
+  '/about': {
+    title: 'About Us - Web Dev Path',
+    description: 'Learn about the Web Dev Path team and our mission.',
+    keywords: 'about web dev path, web development team, web dev mentoring',
+    canonical: 'https://www.webdevpath.co/about',
+  },
+  '/blog': {
+    title: 'Blog - Web Dev Path',
+    description: 'Check out the blog posts by Web Dev Path members',
+    keywords: 'web development blog, programming articles, success stories',
+    canonical: 'https://www.webdevpath.co/blog',
+  },
+  '/contact': {
+    title: 'Contact - Web Dev Path',
+    description:
+      "Send us your questions, and we'll get back to you as soon as possible",
+    keywords: 'contact, questions',
+    canonical: 'https://www.webdevpath.co/contact',
+  },
 };
+
+export default pageMeta;