fix: SEO

Chilfish · Mar 2, 2024 · b59ef39 · b59ef39
1 parent ef8c91e
commit b59ef39
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 7 deletions.
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="/icon.png" type="image/svg+xml">
-  <title>Weibo</title>
+  <title>Weibo Archiver</title>
   <meta name="naive-ui-style" />
 </head>
 <body class="font-sans dark:text-white dark:bg-hex-121212">

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -15,6 +15,7 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@unhead/vue": "^1.8.10",
     "@weibo-archiver/ui": "workspace:^"
   }
 }
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
@@ -1,5 +1,35 @@
 <script setup lang="ts">
+const user = useStorage('meta', { name: '' })
 
+const appName = 'Weibo-Archiver'
+const title = computed(() => {
+  const { name } = user.value
+  return name ? `@${name} - ${appName}` : `${appName} - 备份你的微博`
+})
+
+const description = `${appName} 一个微博备份工具，在账号被完全夹没前未雨绸缪 😭。`
+const ogImage = 'https://p.chilfish.top/weibo/cover.webp'
+
+useHead({
+  title,
+})
+
+useSeoMeta({
+  title,
+  description,
+  ogDescription: description,
+  ogImage,
+  ogImageAlt: appName,
+  ogSiteName: appName,
+  ogType: 'website',
+  ogUrl: 'https://weibo.chilfish.top',
+  ogLocale: 'zh_CN',
+  ogTitle: title,
+  twitterCard: 'summary_large_image',
+  twitterTitle: title,
+  twitterDescription: description,
+  twitterCreator: 'chilllish',
+})
 </script>
 
 <template>

diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { createHead } from '@unhead/vue'
 import { type RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 
@@ -8,6 +9,7 @@ import 'uno.css'
 import '@ui/shared.css'
 
 const app = createApp(App)
+const head = createHead()
 
 const routes: RouteRecordRaw[] = [
   {
@@ -32,4 +34,5 @@ const router = createRouter({
 app
   .use(router)
   .use(createPinia())
+  .use(head)
   .mount('#app')
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
@@ -1,6 +1,7 @@
 import path from 'node:path'
 import { defineConfig } from 'vite'
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import { unheadVueComposablesImports } from '@unhead/vue'
 
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
@@ -18,6 +19,7 @@ export default defineConfig({
       ...autoImportConfig,
       imports: [
         ...autoImportConfig.imports as any[],
+        unheadVueComposablesImports,
         {
           'naive-ui': [
             'useDialog',

diff --git a/packages/ui/src/Profile.vue b/packages/ui/src/Profile.vue
@@ -12,6 +12,8 @@ const isMe = computed(() => {
 
 const avatar = computed(() => {
   const url = props.user.profile_image_url
+  if (!url)
+    return '/placeholder.webp'
 
   if (isMe.value)
     return replaceImg(url)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml