🔍 优化 Seo 功能

components/common/Footer.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 const localePath = useLocalePath()
+const {t} = useI18n()
 </script>
 <template>
   <footer class="text-gray-800 h-[10vh] bg-[#F1F3F4] dark:text-white  dark:bg-[#5b77af]">
     <div class="max-w-4xl mx-auto py-4 px-4 flex justify-between items-center">
       <div class="text-sm">
-        © 2024 Whois查询. All rights reserved.
+        {{ t('footer.text')}}
       </div>
       <div class="flex items-center space-x-4">
-        <NuxtLink :to="localePath('/api.html')" class="hover:underline">API文档</NuxtLink>
+        <NuxtLink :to="localePath('/api.html')" class="hover:underline">{{ t('footer.api') }}</NuxtLink>
         <NuxtLink to="https://github.com/7836246/Nuxt-Whois" class="hover:underline">
           <Icon name="ant-design:github-outlined" class="h-6 w-6" />
         </NuxtLink>

lang/en.ts

@@ -1,9 +1,25 @@
 export default defineI18nLocale(async locale => {
     return {
+        app: {
+            title: 'Nuxt Whois',
+        },
+        whois:{
+            title: 'Whois Query',
+            description: 'Query the Whois information of {domain}, including registrant contact information, domain status, DNS records and other detailed information. Quickly and accurately obtain domain ownership and registration information.',
+            keywords: 'Whois query, {domain}, domain information, domain owner, domain registration information'
+        },
+        dns:{
+            title: 'DNS Query',
+            description: 'Query the DNS records of {domain}, including A records, AAAA records, CNAME records, MX records, NS records, TXT records, etc.',
+            keywords: 'DNS query, {domain}, domain resolution, domain resolution record'
+        },
         index: {
             tips: 'The information you submit for your query will not be recorded!',
             placeholder: 'Please enter a domain name',
             onSubmit: 'Submit',
+            title: 'WHOIS and Dns Query Tool Website',
+            description: 'Provide domain WHOIS query, domain DNS query, domain registrar query, domain registration information query and other services',
+            keywords: 'Domain whois query, whois query, whois information query, whois query tool, whois query website, whois query api, whois query interface',
         },
         error:{
             formatDomain: 'Error formatting domain name',
@@ -35,6 +51,36 @@ export default defineI18nLocale(async locale => {
             dnssec: 'DNSSEC',
             //原始数据
             rawData: 'Raw Data',
+        },
+        footer: {
+            text: '© 2024 Whois Query. All rights reserved.',
+            api: 'API Documentation'
+        },
+        api: {
+            h1: 'Whois Key Information Extraction API',
+            //接口地址
+            url: 'API URL',
+            //请求方式
+            method: 'Request Method',
+            //请求参数
+            params: 'Request Parameters',
+            //输入参数
+            input: 'Input Parameters',
+            //输出参数
+            output: 'Output Parameters',
+            //返回处理后的whois字符串
+            whois: 'Returns the processed whois string',
+            //名称
+            name: 'Name',
+            //类型
+            type: 'Type',
+            //描述
+            desc: 'Description',
+            required: 'Required',
+            domain: 'Domain',
+            title: 'Whois Key Information Extraction API',
+            description: 'Extract key information from domain WHOIS information, including registrar, creation date, expiration date, DNS, status, etc.',
+            keywords: 'Domain whois query, whois query, whois information query, whois query tool, whois query website, whois query api, whois query interface',
         }
     }
 })

lang/tw.ts

@@ -1,9 +1,25 @@
 export default defineI18nLocale(async locale => {
     return {
+        app: {
+            title: 'Nuxt Whois',
+        },
+        whois:{
+            title: 'Whois查詢',
+            description: '查詢{domain}的Whois信息，包括註冊者聯繫方式、域名狀態、DNS記錄等詳細信息。快速、準確地獲取域名所有權和註冊信息。',
+            keywords: 'Whois查詢, {domain}, 域名信息, 域名所有者, 域名註冊信息'
+        },
+        dns:{
+            title: 'DNS查詢',
+            description: '查詢{domain}的DNS記錄，包括A記錄、AAAA記錄、CNAME記錄、MX記錄、NS記錄、TXT記錄等。',
+            keywords: 'DNS查詢, {domain}, 域名解析, 域名解析記錄'
+        },
         index: {
             tips: '您提交的查詢信息不會被記錄！',
             placeholder: '請輸入域名',
             onSubmit: '提交',
+            title: 'WHOIS與Dns查詢工具網站',
+            description: '提供域名WHOIS查詢、域名DNS查詢、域名註冊商查詢、域名註冊信息查詢等服務',
+            keywords: '域名whois查詢,whois查詢,whois信息查詢,whois查詢工具,whois查詢網站,whois查詢api,whois查詢接口',
         },
         error:{
             formatDomain: '域名格式錯誤',
@@ -35,6 +51,36 @@ export default defineI18nLocale(async locale => {
             dnssec: 'DNSSEC',
             //原始数据
             rawData: '原始資料',
+        },
+        footer: {
+            text: '© 2024 Whois查詢. All rights reserved.',
+            api: 'API文檔'
+        },
+        api: {
+            h1: 'Whois關鍵信息提取API',
+            //接口地址
+            url: '接口地址',
+            //请求方式
+            method: '請求方式',
+            //请求参数
+            params: '請求參數',
+            //输入参数
+            input: '輸入參數',
+            //输出参数
+            output: '輸出參數',
+            //返回处理后的whois字符串
+            whois: '返回處理後的whois字符串',
+            //名称
+            name: '名稱',
+            //类型
+            type: '類型',
+            //描述
+            desc: '描述',
+            required: '必填',
+            domain: '域名',
+            title: 'Whois關鍵信息提取API',
+            description: '提取域名WHOIS信息中的關鍵信息，包括註冊商、註冊日期、到期日期、DNS、狀態等。',
+            keywords: '域名whois查詢,whois查詢,whois信息查詢,whois查詢工具,whois查詢網站,whois查詢api,whois查詢接口',
         }
     }
 })

lang/zh.ts

@@ -1,9 +1,25 @@
 export default defineI18nLocale(async locale => {
     return {
+        app: {
+            title: 'Nuxt Whois',
+        },
+        whois:{
+            title: "Whois查询",
+            description: "查询{domain}的Whois信息，包括注册者联系方式、域名状态、DNS记录等详细信息。快速、准确地获取域名所有权和注册信息。",
+            keywords: "Whois查询, {domain}, 域名信息, 域名所有者, 域名注册信息"
+        },
+        dns:{
+            title: 'DNS查询',
+            description: '查询{domain}的DNS记录，包括A记录、AAAA记录、CNAME记录、MX记录、NS记录、TXT记录等。',
+            keywords: 'DNS查询, {domain}, 域名解析, 域名解析记录'
+        },
         index: {
             tips: '您提交的查询信息不会被记录！',
             placeholder: '请输入域名',
             onSubmit: '提交',
+            title: 'WHOIS与Dns查询工具网站',
+            description: '提供域名WHOIS查询、域名DNS查询、域名注册商查询、域名注册信息查询等服务',
+            keywords: '域名whois查询,whois查询,whois信息查询,whois查询工具,whois查询网站,whois查询api,whois查询接口',
         },
         error:{
             formatDomain: '域名格式错误',
@@ -36,6 +52,39 @@ export default defineI18nLocale(async locale => {
             dnssec: 'DNSSEC',
             //原始数据
             rawData: '原始数据',
+        },
+        footer: {
+            text: '© 2024 Whois查询. All rights reserved.',
+            //API文档
+            api: 'API文档'
+        },
+        api: {
+            h1: 'Whois关键信息提取API',
+            //接口地址
+            url: '接口地址',
+            //请求方式
+            method: '请求方式',
+            //请求参数
+            params: '请求参数',
+            //输入参数
+            input: '输入参数',
+            //输出参数
+            output: '输出参数',
+            //返回处理后的whois字符串
+            whois: '返回处理后的whois字符串',
+            //名称
+            name: '名称',
+            //类型
+            type: '类型',
+            //描述
+            desc: '描述',
+            //必选
+            required: '必选',
+            //域名
+            domain: '域名',
+            title: 'Whois关键信息提取API',
+            description: '提取域名WHOIS信息中的关键信息，包括注册商、注册日期、到期日期、DNS、状态等。',
+            keywords: '域名whois查询,whois查询,whois信息查询,whois查询工具,whois查询网站,whois查询api,whois查询接口',
         }
     }
 })

pages/api.html.vue

@@ -3,6 +3,19 @@ definePageMeta({
   layout: 'empty',
 })
 const localePath = useLocalePath()
+const {t} = useI18n()
+useHead({
+  title: t('api.title'),
+  meta: [
+    {
+      name: 'description',
+      content: t('api.description')
+    },{
+      name: 'keywords',
+      content: t('api.keywords')
+    }
+  ]
+})
 </script>
 
 <template>
@@ -13,14 +26,14 @@ const localePath = useLocalePath()
           <NuxtLink :to="localePath('/')" class="hover:text-white">
             <Icon name="ic:outline-home" class="h-6 w-6" /> <!-- 调整图标大小 -->
           </NuxtLink>
-          <span>Whois关键信息提取API</span>
+          <span>{{ t('api.h1') }}</span>
           <span></span> <!-- 占位符以保持标题居中 -->
         </div>
       </div>
 
     <div class="p-6">
         <div class="grid grid-cols-3 gap-4 mb-4">
-          <div class="font-semibold">接口地址</div>
+          <div class="font-semibold">{{ t('api.url') }}</div>
           <div class="col-span-2">/api/whois</div>
         </div>
 <!--        <div class="grid grid-cols-3 gap-4 mb-4">-->
@@ -28,26 +41,26 @@ const localePath = useLocalePath()
 <!--          <div class="col-span-2"><span class="count">156</span> 次</div>-->
 <!--        </div>-->
         <div class="grid grid-cols-3 gap-4 mb-4">
-          <div class="font-semibold">请求方式</div>
+          <div class="font-semibold">{{ t('api.method') }}</div>
           <div class="col-span-2">POST</div>
         </div>
         <div class="grid grid-cols-3 gap-4 mb-4">
-          <div class="font-semibold">返回格式</div>
+          <div class="font-semibold">{{ t('api.params') }}</div>
           <div class="col-span-2">String</div>
         </div>
       </div>
       <div class="px-6 py-4 border-t border-gray-200">
-        <div class="font-bold mb-2">输入参数</div>
+        <div class="font-bold mb-2">{{ t('api.input') }}</div>
         <div class="grid grid-cols-3 gap-4 mb-4">
-          <div class="font-semibold">名称</div>
-          <div class="font-semibold">类型</div>
-          <div class="font-semibold">描述</div>
+          <div class="font-semibold">{{ t('api.name') }}</div>
+          <div class="font-semibold">{{ t('api.type') }}</div>
+          <div class="font-semibold">{{ t('api.desc') }}</div>
         </div>
         <!-- 参数列表 -->
         <div class="grid grid-cols-3 gap-4 mb-4">
           <div>domain</div>
           <div>string</div>
-          <div>(必选) 域名</div>
+          <div>({{ t('api.required') }}) {{ t('api.domain') }}</div>
         </div>
 <!--        <div class="grid grid-cols-3 gap-4 mb-4">-->
 <!--          <div>whois</div>-->
@@ -66,8 +79,8 @@ const localePath = useLocalePath()
 <!--        </div>-->
       </div>
       <div class="px-6 py-4 border-t border-gray-200">
-        <div class="font-bold">输出参数</div>
-        <div class="mt-2">返回处理后的whois字符串</div>
+        <div class="font-bold">{{ t('api.output') }}</div>
+        <div class="mt-2">{{ t('api.whois') }}</div>
       </div>
     </div>
   </div>

pages/dns/[domain].html.vue

@@ -19,12 +19,14 @@ const styleStore = useStyleStore()
 styleStore.setIsPage(true)
 
 useHead({
-  title: `${domainData} - ${t('result.title')}`,
+  title: `${domainData} - ${t('dns.title')}`,
   meta: [
     {
-      hid: 'description',
       name: 'description',
-      content: t('result.description', {domain: domainData})
+      content: t('dns.description', { domain: domainData })
+    },{
+      name: 'keywords',
+      content: t('dns.keywords', { domain: domainData })
     }
   ]
 })

pages/index.vue

@@ -3,6 +3,20 @@ import {useStyleStore} from "~/stores/style";
 
 const styleStore = useStyleStore()
 styleStore.setIsPage(false)
+
+const {t} = useI18n()
+useHead({
+  title: `${t('index.title')} - ${t('app.title')}`,
+  meta: [
+    {
+      name: 'description',
+      content: t('index.description')
+    },{
+      name: 'keywords',
+      content: t('index.keywords')
+    }
+  ]
+})
 </script>
 
 <template>

pages/whois/[domain].html.vue

@@ -24,16 +24,20 @@ const showRawData = ref(false);
 const timeStore = useTimeStore()
 const styleStore = useStyleStore()
 styleStore.setIsPage(true)
+
 useHead({
-  title: `${domainData} - ${t('result.title')}`,
+  title: `${domainData} - ${t('whois.title')}`,
   meta: [
     {
-      hid: 'description',
       name: 'description',
-      content: t('result.description', {domain: domainData})
+      content: t('whois.description', { domain: domainData })
+    },{
+      name: 'keywords',
+      content: t('whois.keywords', { domain: domainData })
     }
   ]
 })
+
 </script>
 
 <template>