🔍 Improve SEO and User Experiences

app.vue

@@ -14,6 +14,16 @@ import "@unocss/reset/tailwind.css"
 const theme = useTheme()
 const auth = useUserinfo()
 
+const { locale } = useI18n()
+
+watch(locale, (value) => {
+  useHead({
+    htmlAttrs: {
+      lang: value,
+    },
+  })
+}, { deep: true, immediate: true })
+
 onMounted(() => {
   theme.global.name.value = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
 

components/PostItem.vue

@@ -16,12 +16,13 @@
         <v-img
           :src="`${config.public.solarNetworkApi}/cgi/files/attachments/${post.body?.thumbnail}`"
           :aspect-ratio="16 / 9"
+          alt="Post thumbnail"
           class="rounded-md"
           cover
         />
       </div>
 
-      <article v-if="post.type == 'story'" class="text-base prose mx-auto">
+      <article v-if="post.type == 'story' || props.forceShowContent" class="text-base prose max-w-none">
         <m-d-c :value="post.body?.content"></m-d-c>
       </article>
 
@@ -52,6 +53,6 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ post: any }>()
+const props = defineProps<{ post: any, forceShowContent?: boolean }>()
 const config = useRuntimeConfig()
 </script>

components/activity/Carousel.vue

@@ -2,7 +2,7 @@
   <v-carousel v-if="!loading" show-arrows="hover" cycle hide-delimiters progress="primary">
     <v-carousel-item v-for="(item, i) in items" :key="i">
       <v-sheet color="rgba(0, 0, 0, .4)"  class="h-full w-full flex items-center justify-center post-container overflow-scroll">
-        <post-item class="mt-5 mb-2" :post="item" />
+        <post-item class="mt-5 mb-2" force-show-content :post="item" />
       </v-sheet>
     </v-carousel-item>
   </v-carousel>

components/attachment/Renderer.vue

@@ -17,8 +17,8 @@
       </v-col>
     </v-row>
   </v-sheet>
-  <v-img v-else-if="item.mimetype.split('/')[0] == 'image'" :src="getAttachmentUrl(item.id)" class="w-full h-full"
+  <v-img v-else-if="item.mimetype.split('/')[0] == 'image'" :src="getAttachmentUrl(item.id)" :alt="item.alt"
-         cover />
+         class="w-full h-full" cover />
   <video v-else-if="item.mimetype.split('/')[0] == 'video'" :src="getAttachmentUrl(item.id)" class="w-full h-full"
          controls />
   <v-sheet v-else color="rgba(0, 0, 0, .4)" height="calc(100% + 24px)" class="p-5">

layouts/default.vue

@@ -2,7 +2,7 @@
   <v-app-bar flat color="primary" scroll-behavior="hide">
     <v-container fluid class="mx-auto d-flex align-center justify-center px-8">
       <nuxt-link to="/" exact>
-        <v-avatar class="me-4 ms-1" color="transparent" size="32" :image="Logo" />
+        <v-img class="me-4 ms-1" width="32" height="32" alt="Logo" :src="Logo" />
       </nuxt-link>
 
       <div class="nav-links overflow-y-auto flex">

pages/index.vue

@@ -27,7 +27,7 @@
       </v-col>
       <v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">
         <div class="text-right flex flex-col items-end">
-          <h1 class="text-4xl font-bold">{{ t("indexActivities") }}</h1>
+          <h2 class="text-4xl font-bold">{{ t("indexActivities") }}</h2>
           <p class="text-lg mt-3 max-w-2/3">
             {{ t("indexActivitiesCaption") }}
           </p>
@@ -46,6 +46,20 @@ import { getLocale } from "~/utils/locale"
 
 const { t } = useI18n()
 
+useHead({
+  title: t("brandName"),
+})
+
+useSeoMeta({
+  title: t("brandName"),
+  description: t("indexIntroduce"),
+  ogTitle: t("brandName"),
+  ogDescription: t("indexIntroduce"),
+  ogUrl: useRuntimeConfig().public.siteUrl,
+  ogType: "website",
+  ogSiteName: "Solsynth Capital",
+})
+
 const { data: products } = await useAsyncData("products", () => {
   return queryContent("/products").where({ _locale: getLocale(), archived: { $ne: true } }).limit(5).find()
 })

server/routes/posts/feed.ts

@@ -66,12 +66,11 @@ export default defineEventHandler(async (event) => {
     })
   }
 
-  setResponseHeader(event, "Content-Type", "application/rss+xml")
-
   switch (queries.type) {
     case "json":
       return feed.json1()
     case "rss":
+      setResponseHeader(event, "Content-Type", "application/rss+xml; charset=utf-8")
       return feed.rss2()
     default:
       return feed.atom1()