SEO

Zain-ul-din · Zain-ul-din · commit bf22dcbafb13 · 2024-10-25T23:39:26.000+05:00
diff --git a/src/pages/blogs/[id].tsx b/src/pages/blogs/[id].tsx
@@ -1,5 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
@@ -47,14 +48,20 @@ export default function BlogDetailPage({ post }: { post: Post }) {
   if (!post) return <></>;
 
   return (
-    <Flex maxWidth={'1250px'} mx={'auto'} w={'full'} p={2}>
-      <div
-        className="mark-down"
-        dangerouslySetInnerHTML={{
-          __html: `
+    <>
+      <Head>
+        <title>{post.title.rendered}</title>
+        <meta name="description" content={`${post.content.rendered.slice(0, 100)}`} />
+      </Head>
+      <Flex maxWidth={'1250px'} mx={'auto'} w={'full'} p={2}>
+        <div
+          className="mark-down"
+          dangerouslySetInnerHTML={{
+            __html: `
           <h1>${post.title.rendered}</h1>
           ${post.content.rendered}`
-        }}></div>
-    </Flex>
+          }}></div>
+      </Flex>
+    </>
   );
 }
diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
@@ -1,5 +1,6 @@
 import { Flex, List, ListItem, Stack, Text } from '@chakra-ui/react';
 import type { InferGetStaticPropsType, GetStaticProps } from 'next';
+import Head from 'next/head';
 import Link from 'next/link';
 
 type Posts = {
@@ -19,32 +20,45 @@ export const getStaticProps = (async (context) => {
 
 export default function Page({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <Flex maxWidth={'1200px'} mx={'auto'} w={'full'} p={2} justify={'center'} flexDir={'column'}>
-      <Stack mt={6}>
-        <Text as={'h1'} fontSize={'3xl'} fontWeight={'bold'}>
-          Blogs
-        </Text>
-      </Stack>
-      <List mt={'6'} w={'full'}>
-        {posts.map((post, idx) => (
-          <Link href={`/blogs/${post.id}`} key={idx}>
-            <ListItem
-              p={4}
-              rounded={'md'}
-              border={'1px solid var(--border-color)'}
-              fontSize={'xl'}
-              fontWeight={'medium'}
-              _hover={{
-                bg: 'var(--card-dark-color)',
-                cursor: 'pointer'
-              }}
-              my={3}
-              bg={'var(--card-color)'}>
-              {post.title.rendered}
-            </ListItem>
-          </Link>
-        ))}
-      </List>
-    </Flex>
+    <>
+      <Head>
+        <title>Blogs</title>
+        <meta
+          name="description"
+          content="Discover leading educational blogs that provide insights and knowledge on various topics."
+        />
+      </Head>
+      <Flex maxWidth={'1200px'} mx={'auto'} w={'full'} p={2} justify={'center'} flexDir={'column'}>
+        <Stack mt={6}>
+          <Text as="h1" fontSize="3xl" fontWeight="bold">
+            Blogs
+          </Text>
+          <Text fontSize="lg" color="gray.600">
+            Explore our collection of blogs that cover a wide range of educational topics, designed
+            to inform and inspire you.
+          </Text>
+        </Stack>
+        <List mt={'6'} w={'full'}>
+          {posts.map((post, idx) => (
+            <Link href={`/blogs/${post.id}`} key={idx}>
+              <ListItem
+                p={4}
+                rounded={'md'}
+                border={'1px solid var(--border-color)'}
+                fontSize={'xl'}
+                fontWeight={'medium'}
+                _hover={{
+                  bg: 'var(--card-dark-color)',
+                  cursor: 'pointer'
+                }}
+                my={3}
+                bg={'var(--card-color)'}>
+                {post.title.rendered}
+              </ListItem>
+            </Link>
+          ))}
+        </List>
+      </Flex>
+    </>
   );
 }
