SEO Improvements (#64)

* Add Meta Description Tag

* Change Read More wording

* Add alt tags to icons missing them

webapp/index.html

@@ -19,6 +19,7 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/favicons/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
+    <meta name="description" content="DeFlock is a community-driven project that maps surveillance devices across the world.">
     <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=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

webapp/src/App.vue

@@ -83,8 +83,8 @@ watch(() => theme.global.name.value, (newTheme) => {
         <!-- Logo -->
         <v-toolbar-title style="flex: unset;">
           <div style="display: flex; align-items: center; cursor: pointer;" @click="router.push('/')">
-            <v-img height="36" width="36" src="/favicons/apple-icon-144x144.png" />
-            <v-img style="margin-left: 8px;" height="36" width="130" src="/deflock-logo.svg" />
+            <v-img height="36" width="36" alt="DeFlock Icon" src="/favicons/apple-icon-144x144.png" />
+            <v-img style="margin-left: 8px;" height="36" width="130" alt="DeFlock Logo" src="/deflock-logo.svg" />
           </div>
         </v-toolbar-title>
 

webapp/src/components/layout/Footer.vue

@@ -19,7 +19,7 @@
               slim
             >
                 <v-list-item-title class="d-flex align-center">
-                <v-icon class="custom-icon" start :icon="link.icon" />
+                <v-icon class="custom-icon" start :icon="link.icon" :alt="link.alt" />
                 {{ link.title }}
                 </v-list-item-title>
             </v-list-item>
@@ -41,7 +41,7 @@
             >
               <v-list-item-title class="d-flex align-center justify-start">
                 <v-icon start v-if="link.icon" class="custom-icon" :icon="link.icon"></v-icon>
-                <img v-else-if="link.customIcon" class="mr-2 custom-icon" width="24" height="24" :src="isDark ? link.customIconDark : link.customIcon" />
+                <img v-else-if="link.customIcon" class="mr-2 custom-icon" width="24" height="24" :src="isDark ? link.customIconDark : link.customIcon" :alt="link.alt" />
                 {{ link.title }}
               </v-list-item-title>
             </v-list-item>
@@ -73,17 +73,17 @@ const isDark = computed(() => theme.name.value === 'dark');
 const currentYear = new Date().getFullYear();
 
 const internalLinks = [
-  { title: 'About', to: '/about', icon: 'mdi-information' },
-  { title: 'Privacy Policy', to: '/privacy', icon: 'mdi-shield-lock' },
-  { title: 'Terms of Service', to: '/terms', icon: 'mdi-file-document' },
-  { title: 'Press', to: '/press', icon: 'mdi-newspaper' },
-  { title: 'Contact', to: '/contact', icon: 'mdi-email' },
+  { title: 'About', to: '/about', icon: 'mdi-information', alt: 'About' },
+  { title: 'Privacy Policy', to: '/privacy', icon: 'mdi-shield-lock', alt: 'Privacy Policy' },
+  { title: 'Terms of Service', to: '/terms', icon: 'mdi-file-document', alt: 'Terms of Service' },
+  { title: 'Press', to: '/press', icon: 'mdi-newspaper', alt: 'Press' },
+  { title: 'Contact', to: '/contact', icon: 'mdi-email', alt: 'Contact' },
 ];
 
 const externalLinks = [
-  { title: 'Discord', href: 'https://discord.gg/aV7v4R3sKT', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg' },
-  { title: 'Donate', to: '/donate', icon: 'mdi-heart' },
-  { title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github' },
+  { title: 'Discord', href: 'https://discord.gg/aV7v4R3sKT', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', alt: 'Discord Logo' },
+  { title: 'Donate', to: '/donate', icon: 'mdi-heart', alt: 'Donate' },
+  { title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github', alt: 'GitHub Logo' },
 ]
 </script>
 

webapp/src/views/Landing.vue

@@ -97,7 +97,7 @@
 
     <v-btn class="my-4" color="rgb(18, 151, 195)" large to="/what-is-an-alpr">
       <v-icon start>mdi-book-open-page-variant</v-icon>
-      Read More
+      Learn about ALPRs
     </v-btn>
 
     <v-divider class="my-8" />