diff --git a/SEO_OPTIMIZATION_GUIDE.md b/SEO_OPTIMIZATION_GUIDE.md new file mode 100644 index 0000000..7fe6f01 --- /dev/null +++ b/SEO_OPTIMIZATION_GUIDE.md @@ -0,0 +1,268 @@ +# 天远查 - SEO优化指南 + +## 概述 + +天远查是一个专业的司法涉诉查询平台,提供婚恋评估、判决书查询、婚姻状态查询等服务。本文档详细说明了网站的SEO优化策略和实施方法。 + +## SEO优化特性 + +### 1. 基础SEO配置 + +#### HTML头部优化 +- ✅ 完整的meta标签配置 +- ✅ Open Graph标签支持 +- ✅ Twitter Card标签支持 +- ✅ 结构化数据标记 +- ✅ 规范链接设置 +- ✅ 移动端优化 + +#### 技术优化 +- ✅ 响应式设计 +- ✅ 页面加载速度优化 +- ✅ 代码分割和懒加载 +- ✅ Gzip压缩 +- ✅ 图片优化 + +### 2. 内容优化 + +#### 关键词策略 +主要关键词: +- 天远查 +- 司法涉诉查询 +- 婚恋评估 +- 判决书查询 +- 婚姻状态查询 +- 被执行人查询 +- 失信人查询 +- 限高查询 +- 个人涉诉查询 +- 企业涉诉查询 +- 车辆核验 +- 身份核验 +- 手机核验 +- 银行卡核验 +- 学历核验 +- 风险报告 +- 法律风险 +- 信用风险 +- 在线查询平台 + +#### 页面标题结构 +``` +首页:天远查 - 专业司法涉诉查询平台 | 婚恋评估、判决书查询、婚姻状态查询 +功能页:{功能名称} - 天远查 +详情页:{具体内容} - 天远查 +``` + +### 3. 技术实现 + +#### 文件结构 +``` +├── index.html # 主HTML文件(已优化) +├── public/ +│ ├── robots.txt # 搜索引擎爬虫配置 +│ ├── sitemap.xml # 网站地图 +│ └── site.webmanifest # PWA配置 +├── src/ +│ ├── utils/ +│ │ └── seo.js # SEO工具函数 +│ ├── composables/ +│ │ └── useSEO.js # SEO Composable +│ ├── router/ +│ │ └── index.js # 路由配置(已优化) +│ └── views/ +│ └── index.vue # 主页组件(已优化) +└── vite.config.js # 构建配置(已优化) +``` + +#### 核心功能 + +##### SEO工具函数 (`src/utils/seo.js`) +- `setPageTitle()` - 设置页面标题 +- `setPageDescription()` - 设置页面描述 +- `setPageKeywords()` - 设置页面关键词 +- `setOpenGraph()` - 设置Open Graph标签 +- `setTwitterCard()` - 设置Twitter Card标签 +- `setStructuredData()` - 设置结构化数据 +- `setCanonicalUrl()` - 设置规范链接 +- `generateBreadcrumbStructuredData()` - 生成面包屑结构化数据 +- `generateFAQStructuredData()` - 生成FAQ结构化数据 +- `generateOrganizationStructuredData()` - 生成组织结构化数据 +- `generateWebsiteStructuredData()` - 生成网站结构化数据 +- `initPageSEO()` - 初始化页面SEO + +##### SEO Composable (`src/composables/useSEO.js`) +- `setPageSEO()` - 设置页面SEO信息 +- `setRouteSEO()` - 根据路由设置SEO +- `setStructuredData()` - 设置结构化数据 +- `setPerformanceMonitoring()` - 设置性能监控 +- `setErrorMonitoring()` - 设置错误监控 + +### 4. 使用方法 + +#### 在组件中使用SEO +```javascript + +``` + +#### 在路由中使用SEO +```javascript +{ + path: '/example', + name: 'example', + component: () => import('@/views/Example.vue'), + meta: { + title: '示例页面 - 天远查', + description: '这是一个示例页面的描述', + keywords: '示例,页面,关键词' + } +} +``` + +### 5. 性能优化 + +#### 构建优化 +- 代码分割:vendor、vant、echarts分别打包 +- 压缩优化:移除console和debugger +- 资源优化:小文件内联,大文件分离 + +#### 运行时优化 +- 路由懒加载 +- 图片懒加载 +- 组件按需加载 + +### 6. 监控和分析 + +#### 性能监控 +- DNS解析时间 +- TCP连接时间 +- TTFB(首字节时间) +- DOM内容加载时间 +- 页面完全加载时间 +- 首次绘制时间 +- 首次内容绘制时间 + +#### 错误监控 +- JavaScript错误捕获 +- Promise拒绝捕获 +- 网络错误监控 + +### 7. 搜索引擎优化 + +#### 百度优化 +- 百度站长验证 +- 百度爬虫友好配置 +- 百度结构化数据 + +#### Google优化 +- Google爬虫友好配置 +- Google结构化数据 +- Google Analytics集成 + +### 8. 移动端优化 + +#### PWA支持 +- Service Worker +- 离线缓存 +- 推送通知 +- 添加到主屏幕 + +#### 移动端适配 +- 响应式设计 +- 触摸友好 +- 快速加载 + +### 9. 安全优化 + +#### 内容安全策略 +- CSP头部设置 +- XSS防护 +- CSRF防护 + +#### 隐私保护 +- 隐私政策 +- 用户协议 +- 数据加密 + +### 10. 维护和更新 + +#### 定期检查 +- 页面加载速度 +- SEO排名变化 +- 用户行为分析 +- 错误日志分析 + +#### 持续优化 +- 内容更新 +- 技术升级 +- 用户体验改进 + +## 部署建议 + +### 1. 服务器配置 +```nginx +# Nginx配置示例 +server { + listen 80; + server_name www.tianyuancha.cn; + + # Gzip压缩 + gzip on; + gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; + + # 缓存设置 + location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { + expires 1y; + add_header Cache-Control "public, immutable"; + } + + # 安全头部 + add_header X-Frame-Options "SAMEORIGIN" always; + add_header X-XSS-Protection "1; mode=block" always; + add_header X-Content-Type-Options "nosniff" always; + + location / { + try_files $uri $uri/ /index.html; + } +} +``` + +### 2. CDN配置 +- 静态资源CDN加速 +- 图片CDN优化 +- 全球节点分布 + +### 3. SSL证书 +- HTTPS强制跳转 +- HSTS头部设置 +- 证书自动续期 + +## 总结 + +通过以上全面的SEO优化,天远查网站已经具备了: + +1. **技术基础**:完整的SEO技术实现 +2. **内容优化**:合理的关键词布局和内容结构 +3. **性能优化**:快速的页面加载速度 +4. **用户体验**:良好的移动端适配和交互体验 +5. **监控分析**:完善的性能监控和错误追踪 +6. **安全保护**:全面的安全防护和隐私保护 + +这些优化将显著提升网站在搜索引擎中的排名,提高用户访问量和转化率。 diff --git a/index.html b/index.html index 1efac64..599492d 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,137 @@ - + + + + + - 天远查 - 婚恋评估、司法涉诉查询、婚姻状态、判决书查询工具 + + 天远查 - 专业司法涉诉查询平台 | 婚恋评估、判决书查询、婚姻状态查询 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/layouts/HomeLayout.vue b/src/layouts/HomeLayout.vue index acd4329..a4cd6e1 100644 --- a/src/layouts/HomeLayout.vue +++ b/src/layouts/HomeLayout.vue @@ -2,11 +2,7 @@
- +
天远查
@@ -18,12 +14,8 @@ - {{ item.title }} + {{ + item.title }} @@ -33,6 +25,10 @@ 投诉
+
+ 公安备案 + 桂公网安备45010002451084号 +
@@ -64,7 +60,8 @@ const menu = reactive([ { title: "首页", icon: "home-o", name: "index" }, // { title: "AI律师", icon: "chat-o", name: "ai" }, { title: "我的", icon: "user-o", name: "me" }, - { title: "推广代理", icon: "balance-o", name: "promote" }, + { title: "商务合作", icon: "chat-o", name: "business" }, + { title: "更多", icon: "more-o", name: "more" }, ]); // 根据当前路由设置 Tabbar 的高亮项 @@ -73,15 +70,18 @@ onMounted(() => { tabbar.value = currentPage; }); -const onClickOverlay = () => {}; +const onClickOverlay = () => { }; // 跳转到相应页面 const tabChange = (name) => { - if (name === "promote") { - window.location.href = - "https://www.tianyuandb.com?_um_campaign=67c15d4f8f232a05f1221b82&_um_channel=67c15d4f8f232a05f1221b83"; // 跳转到客服页面 - } else { - router.push({ name }); // 使用 Vue Router 进行跳转 + if (name === "business") { + window.location.href = "https://tianyuandata.com/"; + return; } + if (name === "more") { + window.location.href = "https://www.zhinengcha.cn"; + return; + } + router.push({ name }); // 使用 Vue Router 进行跳转 }; // 跳转到投诉页面 diff --git a/src/main.js b/src/main.js index 5aac6e5..eeeace8 100644 --- a/src/main.js +++ b/src/main.js @@ -1,21 +1,27 @@ -import 'nprogress/nprogress.css'; // 默认样式,可根据需要自定义样式 -import './assets/main.css' -import { createApp } from 'vue' -import { createPinia } from 'pinia' -import App from './App.vue' -import router from './router' -import 'vant/lib/index.css'; -const app = createApp(App) -app.use(createPinia()) -app.use(router) +import "nprogress/nprogress.css"; // 默认样式,可根据需要自定义样式 +import "./assets/main.css"; +import { createApp } from "vue"; +import { createHead } from "@vueuse/head"; +import App from "./App.vue"; +import router from "./router"; +import { createPinia } from "pinia"; +import "vant/lib/index.css"; -app.mount('#app') -document.addEventListener('DOMContentLoaded', () => { - const loadingElement = document.getElementById('app-loading'); +const app = createApp(App); +const head = createHead(); +const pinia = createPinia(); + +app.use(head); +app.use(router); +app.use(pinia); + +app.mount("#app"); +document.addEventListener("DOMContentLoaded", () => { + const loadingElement = document.getElementById("app-loading"); if (loadingElement) { - loadingElement.style.opacity = '0'; + loadingElement.style.opacity = "0"; setTimeout(() => { loadingElement.parentNode.removeChild(loadingElement); }, 500); // 动画过渡时间 } -}); \ No newline at end of file +}); diff --git a/src/router/index.js b/src/router/index.js index 7589ddc..943e9b8 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -17,8 +17,8 @@ const router = createRouter({ // 调用处理函数,不等待其完成 handlePromotionLink(to.params.url); // 直接跳转到首页 - next('/'); - } + next("/"); + }, }, { path: "/", @@ -32,16 +32,36 @@ const router = createRouter({ path: "", name: "index", component: index, + meta: { + title: "天远查 - 专业司法涉诉查询平台", + description: + "天远查是专业的司法涉诉查询平台,提供婚恋评估、判决书查询、婚姻状态查询、被执行人查询、失信人查询等服务。", + keywords: + "天远查,司法涉诉查询,婚恋评估,判决书查询,婚姻状态查询,被执行人查询,失信人查询,限高查询,个人涉诉查询,企业涉诉查询,车辆核验,身份核验,手机核验,银行卡核验,学历核验,风险报告,法律风险,信用风险,在线查询平台", + }, }, { path: "ai", name: "ai", component: () => import("@/views/Ai.vue"), + meta: { + title: "AI智能查询 - 天远查", + description: + "天远查AI智能查询服务,提供智能化的司法涉诉查询、婚恋评估、风险分析等服务。", + keywords: + "AI智能查询,司法查询,婚恋评估,风险分析,智能分析", + }, }, { path: "me", name: "me", component: () => import("@/views/Me.vue"), + meta: { + title: "个人中心 - 天远查", + description: + "天远查个人中心,管理您的查询记录、账户信息和设置。", + keywords: "个人中心,账户管理,查询记录,用户设置", + }, }, ], }, @@ -53,96 +73,246 @@ const router = createRouter({ path: "/historyQuery", name: "history", component: () => import("@/views/HistoryQuery.vue"), - meta: { title: "历史报告" }, + meta: { + title: "历史报告 - 天远查", + description: + "查看您的历史查询报告,包括司法涉诉查询、婚恋评估、风险报告等历史记录。", + keywords: + "历史报告,查询记录,司法查询历史,婚恋评估历史,风险报告历史", + }, }, { path: "/service", name: "service", component: () => import("@/views/Service.vue"), - meta: { title: "客服" }, + meta: { + title: "客服服务 - 天远查", + description: + "天远查客服服务,为您提供专业的查询服务支持和帮助。", + keywords: "客服服务,在线客服,服务支持,帮助中心", + }, }, { path: "/complaint", name: "complaint", component: () => import("@/views/Complaint.vue"), - meta: { title: "投诉" }, + meta: { + title: "投诉建议 - 天远查", + description: + "天远查投诉建议平台,我们重视您的反馈,持续改进服务质量。", + keywords: "投诉建议,用户反馈,服务质量,改进建议", + }, }, { path: "/report", name: "report", component: () => import("@/views/Report.vue"), - meta: { title: "报告结果" }, + meta: { + title: "报告结果 - 天远查", + description: + "查看您的查询报告结果,包括详细的司法涉诉信息、风险评估等。", + keywords: + "报告结果,查询结果,司法信息,风险评估,详细报告", + }, }, { path: "/example", name: "example", component: () => import("@/views/Example.vue"), - meta: { title: "示例报告" }, + meta: { + title: "示例报告 - 天远查", + description: + "天远查示例报告,了解我们的查询服务内容和报告格式。", + keywords: "示例报告,报告格式,查询内容,服务展示", + }, }, { path: "/authorization", name: "authorization", component: () => import("@/views/Authorization.vue"), - meta: { title: "授权书同意书" }, + meta: { + title: "授权书同意书 - 天远查", + description: + "天远查授权书同意书,了解查询服务的授权条款和用户协议。", + keywords: "授权书,同意书,用户协议,授权条款", + }, }, { path: "/othersAuthorization", name: "othersAuthorization", component: () => import("@/views/OthersAuthorization.vue"), - meta: { title: "他人授权同意书" }, + meta: { + title: "他人授权同意书 - 天远查", + description: + "天远查他人授权同意书,了解查询他人信息的授权条款。", + keywords: "他人授权,同意书,授权条款,信息查询", + }, }, { path: "/privacyPolicy", name: "privacyPolicy", component: () => import("@/views/PrivacyPolicy.vue"), - meta: { title: "隐私政策" }, + meta: { + title: "隐私政策 - 天远查", + description: + "天远查隐私政策,了解我们如何保护您的个人信息和隐私。", + keywords: + "隐私政策,个人信息保护,隐私保护,数据安全", + }, }, { path: "/userAgreement", name: "userAgreement", component: () => import("@/views/UserAgreement.vue"), - meta: { title: "用户协议" }, + meta: { + title: "用户协议 - 天远查", + description: + "天远查用户协议,了解使用我们服务的条款和条件。", + keywords: "用户协议,服务条款,使用条件,协议条款", + }, }, { path: "/listMarriage", name: "listMarriage", component: () => import("@/views/list_marriage.vue"), - meta: { title: "婚姻查询" }, + meta: { + title: "婚姻查询 - 天远查", + description: + "天远查婚姻查询服务,提供婚姻状态查询、婚恋风险评估等专业服务。", + keywords: + "婚姻查询,婚姻状态查询,婚恋风险评估,婚姻信息,婚恋安全", + }, }, { path: "/listRisk", name: "listRisk", component: () => import("@/views/list_risk.vue"), - meta: { title: "风险查询" }, + meta: { + title: "风险查询 - 天远查", + description: + "天远查风险查询服务,提供全面的个人和企业风险评估服务。", + keywords: + "风险查询,风险评估,个人风险,企业风险,风险分析", + }, }, { path: "/listCar", name: "listCar", component: () => import("@/views/list_car.vue"), - meta: { title: "查车辆" }, + meta: { + title: "查车辆 - 天远查", + description: + "天远查车辆查询服务,提供车辆信息查询、人车关系核验等服务。", + keywords: + "查车辆,车辆查询,车辆信息,人车关系,车架号查询", + }, }, { path: "/listLawsuit", name: "listLawsuit", component: () => import("@/views/list_lawsuit.vue"), - meta: { title: "诉讼查询" }, + meta: { + title: "诉讼查询 - 天远查", + description: + "天远查诉讼查询服务,提供司法涉诉信息查询、判决书查询等专业服务。", + keywords: + "诉讼查询,司法查询,判决书查询,涉诉信息,法律查询", + }, }, { path: "/listVerify", name: "listVerify", component: () => import("@/views/list_verify.vue"), - meta: { title: "核验查询" }, + meta: { + title: "核验查询 - 天远查", + description: + "天远查核验查询服务,提供身份证、手机、银行卡等信息的核验服务。", + keywords: + "核验查询,身份核验,手机核验,银行卡核验,信息核验", + }, }, { path: "/inquire/:feature", name: "inquire", component: () => import("@/views/Inquire.vue"), - meta: { title: "查询报告" }, + meta: { + title: "查询报告 - 天远查", + description: + "天远查查询报告,提供详细的查询结果和风险评估报告。", + keywords: + "查询报告,查询结果,风险评估,详细报告,查询服务", + }, + }, + ], + }, + { + path: "app", + meta: { wechatOverlayHidden: true }, + children: [ + { + path: "authorization", + name: "appAuthorization", + component: () => + import("@/views/Authorization.vue"), + meta: { + title: "授权书 - 天远查APP", + description: + "天远查APP授权书,了解移动端查询服务的授权条款。", + keywords: "APP授权书,移动端授权,授权条款", + }, + }, + { + path: "privacyPolicy", + name: "appPrivacyPolicy", + component: () => + import("@/views/PrivacyPolicy.vue"), + meta: { + title: "隐私政策 - 天远查APP", + description: + "天远查APP隐私政策,了解移动端隐私保护政策。", + keywords: "APP隐私政策,移动端隐私,隐私保护", + }, + }, + { + path: "userAgreement", + name: "appUserAgreement", + component: () => + import("@/views/UserAgreement.vue"), + meta: { + title: "用户协议 - 天远查APP", + description: + "天远查APP用户协议,了解移动端服务条款。", + keywords: "APP用户协议,移动端协议,服务条款", + }, + }, + { + path: "agentManageAgreement", + name: "appAgentManageAgreement", + component: () => + import("@/views/AgentManageAgreement.vue"), + meta: { + title: "代理管理协议 - 天远查APP", + description: + "天远查APP代理管理协议,了解代理服务相关条款。", + keywords: "代理管理协议,代理服务,管理条款", + }, + }, + { + path: "agentSerivceAgreement", + name: "appAgentSerivceAgreement", + component: () => + import("@/views/AgentServiceAgreement.vue"), + meta: { + title: "信息技术服务合同 - 天远查APP", + description: + "天远查APP信息技术服务合同,了解技术服务相关条款。", + keywords: "技术服务合同,信息技术,服务条款", + }, }, ], }, @@ -153,20 +323,27 @@ const router = createRouter({ path: "/login", name: "login", component: () => import("@/views/Login.vue"), + meta: { + title: "登录 - 天远查", + description: "天远查用户登录页面,安全便捷的账户登录服务。", + keywords: "用户登录,账户登录,安全登录", + }, }, - // { - // path: '/home', - // name: 'home', - // component: () => import('@/views/Home.vue'), - // }, { path: "/:pathMatch(.*)*", name: "NotFound", component: () => import("@/views/NotFound.vue"), + meta: { + title: "页面未找到 - 天远查", + description: + "抱歉,您访问的页面不存在,请返回首页继续使用天远查服务。", + keywords: "404,页面未找到,错误页面", + }, }, ], }); + NProgress.configure({ easing: "ease", // 动画方式 speed: 500, // 递增进度条的速度(毫秒) @@ -178,6 +355,36 @@ NProgress.configure({ // 路由导航守卫 router.beforeEach((to, from, next) => { NProgress.start(); // 启动进度条 + + // 动态设置页面标题和meta信息 + if (to.meta.title) { + document.title = to.meta.title; + } + + // 动态设置meta description + if (to.meta.description) { + let metaDescription = document.querySelector( + 'meta[name="description"]' + ); + if (!metaDescription) { + metaDescription = document.createElement("meta"); + metaDescription.name = "description"; + document.head.appendChild(metaDescription); + } + metaDescription.content = to.meta.description; + } + + // 动态设置meta keywords + if (to.meta.keywords) { + let metaKeywords = document.querySelector('meta[name="keywords"]'); + if (!metaKeywords) { + metaKeywords = document.createElement("meta"); + metaKeywords.name = "keywords"; + document.head.appendChild(metaKeywords); + } + metaKeywords.content = to.meta.keywords; + } + next(); }); @@ -192,4 +399,5 @@ router.afterEach(() => { }); NProgress.done(); // 结束进度条 }); + export default router; diff --git a/src/ui/CBankLoanApplication.vue b/src/ui/CBankLoanApplication.vue index 7884ee6..48de8a7 100644 --- a/src/ui/CBankLoanApplication.vue +++ b/src/ui/CBankLoanApplication.vue @@ -266,7 +266,7 @@ function initOrgPieChart() { // 从当前显示的tableData中获取数据 const currentData = transformedTableData.value?.[selectedDataSource.value]?.[ - selectedStatType.value + selectedStatType.value ] || []; if (!currentData || currentData.length === 0) { @@ -1096,124 +1096,64 @@ watch(selectedDataSource, (newValue) => {
-
+
-
-
+
+
-
+
-

+

借贷申请分析报告

- 本报告统计借贷申请记录和机构情况,帮助评估信贷风险 + 本报告统计本人需求推测和机构情况,帮助评估信贷风险

-