行业资讯栏目 SEO 评估报告

1. 背景

官网新增「行业资讯」路由页面（/article/），由销售部门编写文章内容，在前端渲染展示。需要评估当前技术栈是否支持文章内容被搜索引擎抓取和索引，确保文章详情页具备完善的 SEO 能力。

2. 当前技术架构分析

2.1 技术栈

项目	技术	版本
静态站点生成器	VitePress	^1.4.3
前端框架	Vue 3	^3.5.12
数据源	低代码平台 DB API	自研
部署方式	静态文件 + Nginx	-

2.2 VitePress 渲染机制

VitePress 采用 SSG（Static Site Generation） 模式，构建时将 .md 文件预渲染为静态 HTML。搜索引擎爬虫可以直接读取到 HTML 内容，对 Markdown 编写的静态内容天然具备良好的 SEO 支持。

2.3 当前文章页实现方式

src/article/index.md          → 文章列表页
.vitepress/components/CustomArticlePage.vue  → 列表组件

关键问题：当前文章数据是硬编码在 Vue 组件中的 ref([...])，并非来自 Markdown 文件或后端 API。

3. SEO 支持评估

3.1 文章列表页（/article/）— 基本支持

检查项	状态	说明
页面 TDK	✅	frontmatter 已配置 title、description、keywords
语义化 HTML	✅	使用了 <h1>、<h2>、<article>、<p> 等标签
SSG 预渲染	⚠️	组件中的数据在构建时会被渲染到 HTML，但分类筛选是客户端交互，爬虫只能抓到"全部"分类下的完整列表
sitemap	✅	VitePress 自动生成 sitemap.xml，包含 /article/

3.2 文章详情页 — 不支持

检查项	状态	说明
独立 URL	❌	不存在文章详情页，所有文章仅在列表页展示摘要
文章全文内容	❌	爬虫无法抓取文章完整内容，只能获取列表摘要
单篇文章 TDK	❌	无法为每篇文章设置独立的 title / description / keywords
结构化数据	❌	无 JSON-LD / Schema.org 标记（如 Article、BlogPosting）
OG / Twitter 标签	❌	无社交分享元数据
独立 URL 可分享	❌	无法分享或链接到某一篇具体文章

3.3 数据来源方式的 SEO 影响

当前项目存在两种数据来源模式：

数据来源	示例	SEO 友好度
Markdown 文件（静态）	各页面的 .md 文件	⭐⭐⭐⭐⭐ 构建时生成完整 HTML
Vue 组件硬编码数据	CustomArticlePage.vue 中的 articles ref	⭐⭐⭐⭐ 构建时也会渲染到 HTML
运行时 API 请求	CustomMarketDetail.vue 通过 db.js 请求	⭐ 爬虫无法获取动态加载内容

核心结论：如果文章由销售部门通过后台系统编写，数据通过 API 动态加载，则爬虫无法抓取文章内容。

4. 方案对比

方案 A：Markdown 文件方案（推荐）

原理：销售部门编写的文章以 Markdown 文件形式存入仓库，VitePress 构建时预渲染为静态 HTML。

src/article/
├── index.md                              # 文章列表页
├── low-code-cost-reduction.md           # 文章详情页 1
├── manufacturing-digital-transform.md   # 文章详情页 2
└── ...

每篇文章的 frontmatter：

---
title: 低代码开发平台如何助力企业降本增效
description: 低代码开发平台通过可视化拖拽、组件复用等能力，大幅降低软件开发门槛...
head:
  - - meta
    - name: keywords
      content: 低代码,降本增效,企业数字化
  - - meta
    - property: og:title
      content: 低代码开发平台如何助力企业降本增效
  - - meta
    - property: og:description
      content: 低代码开发平台通过可视化拖拽...
  - - meta
    - property: og:type
      content: article
layout: doc
---

# 低代码开发平台如何助力企业降本增效

正文内容...

优势：

• SEO 最优，构建时生成完整静态 HTML，爬虫可直接抓取
• 每篇文章有独立 URL，可被搜索引擎单独索引
• 自动纳入 sitemap.xml
• 支持完整的 TDK、OG 标签、结构化数据
• 无需额外依赖，VitePress 原生支持

劣势：

• 销售部门需要学习 Markdown 语法（或提供编辑工具）
• 每次发布文章需要提交代码并触发构建部署
• 不适合高频更新场景

适用场景：文章更新频率低（每周 1-3 篇），团队可接受 Git 工作流。

---

方案 B：CMS + 构建时数据拉取方案

原理：销售部门通过 CMS（如语雀、飞书文档、低代码平台后台）编写文章，VitePress 在构建时通过 API 拉取文章数据，生成静态页面。

利用 VitePress 的 Build-Time Data Loading 功能：

src/article/
├── index.md                    # 文章列表页
├── [id].md                     # 文章详情页模板（不支持，需变通）
├── [id].paths.js               # 动态路由参数生成
└── data/
    └── articles.data.js        # 构建时数据加载器

articles.data.js 示例：

// 构建时执行，从 API 拉取文章数据
export default {
  async load() {
    const response = await fetch('https://api.suconnect.com/articles')
    const articles = await response.json()
    return articles
  }
}

VitePress 支持的动态路由：

// [id].paths.js
export default {
  async paths() {
    const articles = await fetchArticles()
    return articles.map(article => ({
      params: { id: article.slug },
      content: article.content  // 注入 Markdown 内容
    }))
  }
}

优势：

• 销售部门可通过后台系统编写，无需接触代码
• 构建时生成静态 HTML，SEO 友好
• 每篇文章有独立 URL
• 自动纳入 sitemap

劣势：

• 需要开发构建时数据加载器
• 文章发布后需要触发重新构建（可通过 Webhook 自动化）
• 需要后端提供文章 API（或对接现有低代码平台 DB）
• 构建时间随文章数量增长

适用场景：文章通过后台系统管理，需要非技术人员可操作。

---

方案 C：SSR 服务端渲染方案（不推荐）

原理：将 VitePress 替换为支持 SSR 的框架（如 Nuxt.js），或在 VitePress 之外额外部署 SSR 服务处理文章详情页。

优势：

• 实时数据，无需重新构建
• 适合高频更新

劣势：

• 需要重构整个项目或部署额外的 Node.js 服务
• VitePress 本身不支持 SSR 运行时模式
• 增加运维复杂度和服务器成本
• 与当前纯静态部署架构不兼容

不推荐原因：改造成本过高，与现有架构冲突大。

---

方案 D：预渲染 + 客户端水合方案

原理：构建时为每篇文章生成静态 HTML 骨架（包含关键 SEO 信息），运行时再通过 API 加载完整内容。

优势：

• 爬虫可获取基本信息（标题、摘要、关键词）
• 支持客户端动态更新

劣势：

• 爬虫只能获取骨架内容，无法获取文章全文
• 实现复杂度高
• SEO 效果不如方案 A/B

5. 推荐方案

首选：方案 A（Markdown 文件方案）

理由：

1. SEO 效果最佳：构建时生成完整静态 HTML，每篇文章都有独立 URL 和完整 TDK
2. 零额外依赖：VitePress 原生支持，无需引入新框架或服务
3. 与现有架构完全兼容：当前项目所有页面都是 Markdown + Vue 组件模式
4. 实现成本最低：只需创建文章 Markdown 文件和一个详情页组件

备选：方案 B（CMS + 构建时拉取）

如果销售部门无法接受 Markdown 工作流，可采用方案 B。需要：

• 后端提供文章列表/详情 API（可复用现有低代码平台 DB）
• 开发 VitePress data loader
• 配置 CI/CD Webhook，文章发布后自动触发构建

6. 方案 A 实施要点

6.1 目录结构

src/article/
├── index.md                                    # 列表页（现有）
├── low-code-cost-reduction.md                 # 文章 1
├── manufacturing-digital-transform.md         # 文章 2
├── gov-info-security.md                       # 文章 3
└── ...

6.2 文章详情页模板

每篇文章使用统一的自定义布局组件 CustomArticleDetail.vue，通过 frontmatter 传入元数据：

---
title: 文章标题（会作为页面 <title>）
description: 文章描述（会作为 <meta name="description">）
date: 2025-12-20
category: lowcode
tags:
  - 低代码
  - 企业数字化
author: 速众科技
head:
  - - meta
    - name: keywords
      content: 低代码,降本增效
  - - meta
    - property: og:title
      content: 文章标题
  - - meta
    - property: og:type
      content: article
  - - script
    - type: application/ld+json
    - |
      {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "文章标题",
        "datePublished": "2025-12-20",
        "author": { "@type": "Organization", "name": "速众科技" }
      }
---

# 文章标题

正文内容...

6.3 列表页改造

将 CustomArticlePage.vue 中的硬编码数据改为从 Markdown 文件的 frontmatter 自动收集（使用 VitePress 的 createContentLoader API）：

// .vitepress/data/articles.data.js
import { createContentLoader } from 'vitepress'

export default createContentLoader('article/*.md', {
  transform(rawData) {
    return rawData
      .filter(page => page.url !== '/article/')  // 排除列表页本身
      .sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
      .map(page => ({
        title: page.frontmatter.title,
        description: page.frontmatter.description,
        date: page.frontmatter.date,
        category: page.frontmatter.category,
        tags: page.frontmatter.tags,
        url: page.url,
      }))
  }
})

6.4 SEO 优化清单

优化项	说明
独立 URL	每篇文章 /article/xxx.html，可被搜索引擎单独索引
TDK	通过 frontmatter 自动设置 title / description / keywords
OG 标签	frontmatter head 中配置 og:title、og:description、og:type、og:url
结构化数据	JSON-LD Article / BlogPosting schema
sitemap	VitePress 自动将新 .md 文件纳入 sitemap.xml
面包屑	详情页组件中添加面包屑导航（首页 > 行业资讯 > 文章标题）
内链	列表页中每篇文章卡片链接到详情页
图片 ALT	文章中的图片添加 alt 描述文本

6.5 销售部门发文流程

1. 销售编写文章内容（Word/飞书/语雀等）
2. 技术人员将内容转为 Markdown 文件，填写 frontmatter
3. 提交到 Git 仓库
4. CI/CD 自动构建部署
5. 文章上线，搜索引擎自动抓取

如果希望降低技术门槛，可后续考虑开发一个简单的文章管理后台（方案 B），自动将文章内容写入 Markdown 文件并触发构建。

7. 结论

项目	当前状态	改造后
文章列表页 SEO	⚠️ 基本支持	✅ 数据从 data loader 加载，构建时完整渲染
文章详情页 SEO	❌ 不存在详情页	✅ 每篇文章独立 URL + 完整 HTML
文章 TDK	❌ 仅列表页有	✅ 每篇文章独立 TDK
结构化数据	❌ 无	✅ JSON-LD Article schema
sitemap 收录	⚠️ 仅列表页	✅ 每篇文章独立收录
社交分享	❌ 无	✅ OG / Twitter 标签

VitePress 完全支持文章 SEO 需求，无需更换技术栈。 核心要点是为每篇文章创建独立的 Markdown 文件，利用 VitePress 的 SSG 能力生成静态 HTML，确保搜索引擎爬虫可以完整抓取文章内容。