SEO 的 CI/CD：将 SEO 测试集成到开发流程中
各位同学，大家好！今天我们要讨论一个非常重要且经常被忽视的话题：如何将 SEO 测试集成到我们的持续集成/持续交付 (CI/CD) 流程中。可能很多人认为 SEO 优化是市场营销团队的事情，跟开发关系不大。但实际上，如果我们在开发阶段就考虑到 SEO 的因素，就能大大提高网站的自然流量，降低营销成本。
为什么要在 CI/CD 中集成 SEO 测试？
传统的 SEO 优化往往是在网站上线后才进行，这会导致很多问题：
- 修复成本高： 如果上线后才发现 SEO 问题，需要修改代码、重新部署，成本很高。
- 上线时间延迟： 为了解决 SEO 问题，可能需要延迟上线时间，影响业务进度。
- 错过流量红利： 如果网站上线初期 SEO 不好，可能会错过流量红利期。
将 SEO 测试集成到 CI/CD 流程中，可以在开发阶段就发现并解决 SEO 问题，避免以上问题，提高网站的 SEO 效果。
SEO 测试的内容
在 CI/CD 流程中，我们需要关注以下几个方面的 SEO 测试：
- 技术 SEO： 检查网站的技术架构是否符合 SEO 最佳实践，例如：
- 网站速度
- 移动设备友好性
- URL 结构
- 站点地图
- robots.txt
- HTTPS
- 内容 SEO： 检查网站的内容是否符合 SEO 要求，例如：
- 关键词使用
- 标题和描述
- 内容质量
- 内部链接
- 外部链接
- 结构化数据： 检查网站是否使用了结构化数据，例如 Schema.org，以帮助搜索引擎更好地理解网站内容。
如何在 CI/CD 流程中集成 SEO 测试？
我们可以将 SEO 测试集成到 CI/CD 流程的各个阶段，例如：
- 代码提交阶段： 使用代码检查工具检查代码中是否存在 SEO 问题。
- 构建阶段： 使用构建工具生成网站的静态文件，并进行 SEO 测试。
- 测试阶段： 使用自动化测试工具对网站进行 SEO 测试。
- 部署阶段： 在部署前，对网站进行最后的 SEO 检查。
下面我们以一个简单的例子来说明如何在 CI/CD 流程中集成 SEO 测试。
示例：使用 Lighthouse 进行 SEO 测试
Lighthouse 是 Google 提供的一个开源的自动化工具，可以对网站进行性能、可访问性、最佳实践和 SEO 等方面的测试。我们可以使用 Lighthouse 来进行 SEO 测试，并将测试结果集成到 CI/CD 流程中。
1. 安装 Lighthouse
首先，我们需要安装 Lighthouse。可以使用 npm 或者 yarn 安装：
npm install -g lighthouse
# 或者
yarn global add lighthouse2. 创建 Lighthouse 配置文件
我们可以创建一个 Lighthouse 配置文件，来指定 Lighthouse 的配置项，例如：
// lighthouse.config.js
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000'], // 要测试的 URL
numberOfRuns: 3, // 运行次数
},
assert: {
preset: 'lighthouse:recommended', // 使用 Lighthouse 推荐的断言
assertions: {
'categories:seo': ['warn', { minScore: 0.9 }], // SEO 得分至少为 0.9，否则发出警告
'categories:performance': ['warn', { minScore: 0.8 }], // 性能得分至少为 0.8，否则发出警告
'categories:accessibility': ['warn', { minScore: 0.8 }], // 可访问性得分至少为 0.8，否则发出警告
'categories:best-practices': ['warn', { minScore: 0.9 }], // 最佳实践得分至少为 0.9，否则发出警告
},
},
upload: {
target: 'temporary-public-storage', // 将测试结果上传到临时公共存储
},
},
};在这个配置文件中，我们指定了要测试的 URL，运行次数，以及断言规则。断言规则用于判断测试结果是否符合预期。如果测试结果不符合断言规则，Lighthouse 会发出警告或者错误。
3. 集成到 CI/CD 流程
接下来，我们需要将 Lighthouse 集成到 CI/CD 流程中。以 GitHub Actions 为例，我们可以创建一个 GitHub Actions 配置文件：
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build # Assuming you have a build script
- name: Serve
run: npm run start & # Assuming you have a start script
- name: Run Lighthouse CI
run: |
npx lighthouse --config-path ./lighthouse.config.js这个 GitHub Actions 配置文件会在每次 push 或者 pull request 到 main 分支时运行。它会执行以下步骤：
- 检出代码
- 安装 Node.js
- 安装依赖
- 构建网站
- 启动网站
- 运行 Lighthouse CI
4. 查看测试结果
Lighthouse CI 会生成一个 HTML 报告，包含测试结果的详细信息。我们可以在 GitHub Actions 的 workflow 运行结果中找到这个报告。
代码示例：更详细的 Lighthouse 断言规则
除了使用 Lighthouse 推荐的断言规则外，我们还可以自定义断言规则，以更精确地控制 SEO 测试。例如，我们可以添加以下断言规则：
// lighthouse.config.js
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000'],
numberOfRuns: 3,
},
assert: {
preset: 'lighthouse:recommended',
assertions: {
// SEO 相关的断言
'document-title': ['warn', { maxLength: 60 }], // 标题长度不能超过 60 个字符
'meta-description': ['warn', { maxLength: 160 }], // 描述长度不能超过 160 个字符
'link-text': 'warn', // 所有链接都应该有文本
'image-alt': 'warn', // 所有图片都应该有 alt 属性
'canonical': 'warn', // 应该使用 canonical 标签
'http-status-code': ['warn', { failureThreshold: 'never' }], // 没有 HTTP 错误
'is-crawlable': 'warn', // 网站可以被爬取
'robots-txt-is-valid': 'warn', // robots.txt 文件有效
'tap-targets': 'off', // 禁用 touch targets 断言，因为它可能会误报
'uses-passive-event-listeners': 'off', // 禁用 passive event listeners 断言，因为它可能会误报
},
},
upload: {
target: 'temporary-public-storage',
},
},
};代码示例：使用 pa11y 进行可访问性测试
除了 Lighthouse，我们还可以使用 pa11y 等工具进行可访问性测试。pa11y 是一个命令行工具，可以对网站进行可访问性测试，并生成报告。
首先，我们需要安装 pa11y：
npm install -g pa11y
# 或者
yarn global add pa11y然后，我们可以创建一个 pa11y 配置文件：
// pa11y.config.js
module.exports = {
urls: ['http://localhost:3000'],
standard: 'WCAG2AA', // 使用 WCAG 2.0 AA 标准
ignore: [
'WCAG2AA.Principle1.Guideline1_1.1_1_1.H37', // 忽略 H37 规则
],
};最后，我们可以将 pa11y 集成到 CI/CD 流程中：
# .github/workflows/accessibility.yml
name: Accessibility CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
accessibility:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build # Assuming you have a build script
- name: Serve
run: npm run start & # Assuming you have a start script
- name: Run pa11y
run: |
pa11y --config pa11y.config.js --reporter html > pa11y-report.html
- name: Upload pa11y report
uses: actions/upload-artifact@v3
with:
name: pa11y-report
path: pa11y-report.html这个 GitHub Actions 配置文件会在每次 push 或者 pull request 到 main 分支时运行。它会执行以下步骤：
- 检出代码
- 安装 Node.js
- 安装依赖
- 构建网站
- 启动网站
- 运行 pa11y
- 上传 pa11y 报告
表格：SEO 测试工具对比
| 工具 | 功能 | 优点 | 缺点 |
|---|---|---|---|
| Lighthouse | 性能、可访问性、最佳实践、SEO 测试 | Google 官方工具，功能强大，易于使用，免费 | 有些测试项可能不够精确，需要自定义断言规则 |
| pa11y | 可访问性测试 | 专注可访问性测试，报告详细，可配置性高 | 需要手动配置，对 SEO 的支持有限 |
| Screaming Frog | 网站爬虫，可以发现网站的技术 SEO 问题 | 功能强大，可以爬取大量页面，发现各种 SEO 问题 | 收费，需要安装客户端 |
| Semrush | 关键词研究、竞争对手分析、网站审计 | 功能全面，可以进行各种 SEO 分析 | 收费，价格较高 |
| Google Search Console | 网站在 Google 搜索中的表现 | 可以查看网站的索引情况、关键词排名、流量数据 | 数据有一定的延迟，只能查看 Google 搜索的数据 |
一些最佳实践
- 尽早开始 SEO 测试： 越早开始 SEO 测试，修复问题的成本就越低。
- 自动化 SEO 测试： 将 SEO 测试集成到 CI/CD 流程中，实现自动化测试。
- 持续监控 SEO 效果： 定期监控网站的 SEO 效果，及时发现并解决问题。
- 与 SEO 专家合作： 如果你对 SEO 不熟悉，可以与 SEO 专家合作，获取专业的指导。
总结
将 SEO 测试集成到 CI/CD 流程中，可以帮助我们提高网站的 SEO 效果，降低营销成本，提高业务价值。希望今天的讲解能帮助大家更好地理解 SEO 的重要性，并在实际工作中应用 SEO 最佳实践。
快速回顾与展望
通过自动化工具如 Lighthouse 和 pa11y，我们可以将 SEO 测试无缝集成到 CI/CD 流程中，确保每次代码变更都符合 SEO 最佳实践。这不仅降低了修复成本，还提高了网站的整体性能和可访问性，为用户提供更好的体验。未来，我们可以探索更多高级的 SEO 测试方法，例如模拟用户行为、分析竞争对手策略等，进一步提升网站的 SEO 效果。