fix: Added favicon, SEO & A11y fixes

WandererOU · Aug 10, 2024 · aadfaac · aadfaac
1 parent 34aeccf
commit aadfaac
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,9 @@
 <head>
   <meta charset="UTF-8">
   <title>GoodBoi Care</title>
+  <meta name="viewport">
+  <meta name="description" content="Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.">
+  <link rel="icon" type="image/x-icon" href="./public/images/favicon.ico">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Lato&family=Nunito+Sans:ital,opsz,wght@1,6..12,700&family=Nunito:wght@700&family=Roboto:wght@300;900&display=swap" rel="stylesheet">
@@ -30,7 +33,7 @@
 <body>
   <!-- HEADER SECTION -->
   <header>
-    <img src="./public/images/icon.png" width="65px" height="65px" />
+    <img src="./public/images/icon.png" alt="App Icon" width="65px" height="65px" />
     <h1>GoodBoi Care</h1>
     <div class="flex-space"></div>
     <a href="https://goodboicare.com/terms">Terms of Use</a>
@@ -45,16 +48,16 @@ <h1>GoodBoi Care</h1>
           <h2>Caring for Your Pets, Simplified.</h2>
           <p>Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.</p>
           <div class="hero__contents-buttons">
-            <a href="#">
-              <img src="./public/images/app_store_button.png" width="200px" />
+            <a href="#" aria-label="Download from App Store">
+              <img src="./public/images/app_store_button.png" width="200px" alt="App Store image button" />
             </a>
-            <a href="#">
-              <img src="./public/images/play_store_button.png" width="200px" />
+            <a href="#" aria-label="Download from Google Play Store">
+              <img src="./public/images/play_store_button.png" width="200px" alt="Play Store image button" />
             </a>
           </div>
         </div>
         <div class="hero__contents-image">
-          <img src="./public/images/hero_image.png" height="500px" />
+          <img src="./public/images/hero_image.png" height="500px" alt="Hero image with app screenshots" />
         </div>
       </div>
     </div>

diff --git a/public/images/favicon.ico b/public/images/favicon.ico