Improved SEO

nimiq · Sep 7, 2023 · 6e226d4 · 6e226d4
1 parent e39a213
commit 6e226d4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -18,10 +18,11 @@
   <meta name="msapplication-TileColor" content="#1f2348">
   <meta name="theme-color" content="#1f2348">
 
+  <meta property="og:title" content="Places to Buy with Crypto and ATMs Worldwide - Crypto Nimiq Map."/>
+  <meta property="og:description" content="Discover the best places to buy with crypto. Find crypto-friendly locations worldwide in our map. Start spending your crypto today!"/>
   <meta property="og:image" content="https://mycbdmurjytbdahjljoh.supabase.co/functions/v1/og-image"/>
   <meta property="og:image:width" content="1200"/>
   <meta property="og:image:height" content="630"/>
-
 </head>
 
 <body>

diff --git a/src/App.vue b/src/App.vue
@@ -5,6 +5,11 @@ import { RouterView } from 'vue-router'
 <template>
   <RouterView v-slot="{ Component, route }">
     <component :is="route.meta.transition ? 'transition' : 'div'" :name="route.meta.transition ? route.meta.transition : ''">
+      <template v-if="typeof route.name === 'string' && ['coords', 'map'].includes(route.name)">
+        <h1 class="sr-only">
+          {{ $t('Explore the Crypto Map') }}
+        </h1>
+      </template>
       <component :is="Component" />
     </component>
   </RouterView>

diff --git a/src/components/elements/Card.vue b/src/components/elements/Card.vue
@@ -40,7 +40,16 @@ function arrayEquals(arrA: string[], arrB: string[]): boolean {
       v-if="location.photo && progress > 0" class="pt-1.5 px-1.5 transition-height duration-[--duration]"
       :style="`height: ${progress * 184}px;`"
     >
-      <img class="object-cover w-full h-full rounded-sm" :src="location.photo" alt="">
+      <img
+        class="object-cover w-full h-full rounded-sm" :src="location.photo"
+        :alt="$tc('Picture of {name}, a place to buy with crypto in {city}, {country}. {providedBy}',
+                  {
+                    name: location.name,
+                    city: location.address.split(',').at(-2)?.split(' ').at(-1),
+                    country: location.address.split(',').at(-1),
+                    providedBy: $tc('Provided by {provider}', location.provider),
+                  })"
+      >
     </div>
 
     <div class="relative px-6 py-5 space-y-5">