SEO optimized

TeaByte · Jan 6, 2024 · 59df0e2 · 59df0e2
1 parent c1c1267
commit 59df0e2
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 43 deletions.
diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
@@ -7,7 +7,7 @@ export default function CourseCard(props: { course: Course }) {
       class="py-4 gray-200 hover:opacity-75"
       style={{ order: course.order }}
     >
-      <a href={btoa(`/${course.slug}`)}>
+      <a title={course.title} href={btoa(`/${course.slug}`)}>
         <h3 class="gray-900 font-bold">
           {course.title}
         </h3>

diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -8,7 +8,12 @@ export default function NavBar() {
     <nav class="bg-base-300 w-full py-4 px-8 flex flex-col md:flex-row gap-4">
       <div class="flex items-center flex-1">
         <div class="flex items-center gap-1">
-          <image alt="Website logo" src="/logo.webp" class="h-8 w-8" />
+          <img
+            title="NakhlahJS Logo"
+            alt="Website logo"
+            src="/logo.webp"
+            class="h-8 w-8"
+          />
           <a href="/" class="text-2xl ml-1 font-bold hover:animate-pulse">
             NakhlahJS
           </a>

diff --git a/routes/_404.tsx b/routes/_404.tsx
@@ -13,7 +13,8 @@ export default function Error404() {
             src="/logo.webp"
             width="128"
             height="128"
-            alt="the Fresh logo: a sliced lemon dripping with juice"
+            title="NakhlahJS Logo"
+            alt="Website logo"
           />
           <h1 class="text-4xl font-bold">الصفحه غير موجوده</h1>
           <p class="my-4">

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -8,18 +8,6 @@ export default function App({ Component }: PageProps) {
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Nakhlahjs</title>
-        <meta
-          name="description"
-          content="وجهتك الأمثل لاكتساب مهارات جافاسكربت بسهولة وفعالية. رحلة تعليمية شيقة تمتد من الأساسيات إلى المستويات المتقدمة"
-        />
-
-        <meta name="keywords" content="JavaScript" />
-        <meta property="og:title" content="Nakhlahjs" />
-        <meta
-          property="og:description"
-          content="وجهتك الأمثل لاكتساب مهارات جافاسكربت بسهولة وفعالية. رحلة تعليمية شيقة تمتد من الأساسيات إلى المستويات المتقدمة"
-        />
-
         <link rel="stylesheet" href="/styles.css" />
         <link
           href="https://cdn.jsdelivr.net/npm/daisyui@4.5.0/dist/full.min.css"
@@ -30,7 +18,6 @@ export default function App({ Component }: PageProps) {
         <link
           rel="preconnect"
           href="https://fonts.gstatic.com"
-          crossOrigin="true"
         />
         <link
           href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&display=swap"

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -1,4 +1,5 @@
 import { Handlers } from "$fresh/server.ts";
+import { Head } from "$fresh/runtime.ts";
 import { PageProps } from "$fresh/server.ts";
 import { join } from "$std/path/mod.ts";
 
@@ -66,33 +67,48 @@ export default function BlogIndexPage(
   const { merged } = props.data;
 
   return (
-    <main class="max-w-screen-md px-4 pt-12 mx-auto">
-      <h1 class="text-5xl font-bold z-10">المحتوى</h1>
-      <section class="flex flex-col gap-2">
-        {merged.map((course, index) => {
-          if ("courses" in course) {
-            return (
-              <div class="" key={index}>
-                <h2 class="text-3xl font-bold">
-                  {course.label}
-                </h2>
-                <div class="flex flex-col mt-2 pr-3">
-                  {course.courses.map((innerCourse) => (
-                    <CourseCard key={innerCourse.slug} course={innerCourse} />
-                  ))}
+    <>
+      <Head>
+        <title>الصفحه غير موجوده</title>
+        <meta
+          name="description"
+          content="وجهتك الأمثل لاكتساب مهارات جافاسكربت بسهولة وفعالية. رحلة تعليمية شيقة تمتد من الأساسيات إلى المستويات المتقدمة"
+        />
+        <meta name="keywords" content="JavaScript" />
+        <meta property="og:title" content="Nakhlahjs" />
+        <meta
+          property="og:description"
+          content="وجهتك الأمثل لاكتساب مهارات جافاسكربت بسهولة وفعالية. رحلة تعليمية شيقة تمتد من الأساسيات إلى المستويات المتقدمة"
+        />
+      </Head>
+      <main class="max-w-screen-md px-4 pt-12 mx-auto">
+        <h1 class="text-5xl font-bold z-10">المحتوى</h1>
+        <section class="flex flex-col gap-2">
+          {merged.map((course, index) => {
+            if ("courses" in course) {
+              return (
+                <div class="" key={index}>
+                  <h2 class="text-3xl font-bold">
+                    {course.label}
+                  </h2>
+                  <div class="flex flex-col mt-2 pr-3">
+                    {course.courses.map((innerCourse) => (
+                      <CourseCard key={innerCourse.slug} course={innerCourse} />
+                    ))}
+                  </div>
                 </div>
-              </div>
-            );
-          } else {
-            // This is a Course
-            return (
-              <div class="" key={course.slug}>
-                <CourseCard course={course} />
-              </div>
-            );
-          }
-        })}
-      </section>
-    </main>
+              );
+            } else {
+              // This is a Course
+              return (
+                <div class="" key={course.slug}>
+                  <CourseCard course={course} />
+                </div>
+              );
+            }
+          })}
+        </section>
+      </main>
+    </>
   );
 }