seo-optimizer

SEO 优化器

概述

此技能为 HTML/CSS 网站提供全面的 SEO 优化功能。它会分析网站中的 SEO 问题、实施最佳实践，并生成优化报告，涵盖所有关键 SEO 方面，包括元标签、标题结构、图片优化、Schema 标记、移动端优化和技术 SEO。

何时使用此技能

在用户提出以下请求时使用此技能：

• “分析我的网站是否存在 SEO 问题”
• “优化此页面的 SEO”
• “生成 SEO 审核报告”
• “修复我网站上的 SEO 问题”
• “为我的页面添加适当的元标签”
• “实施 Schema 标记”
• “生成站点地图”
• “提升我网站在搜索引擎中的排名”
• 任何与 HTML/CSS 网站搜索引擎优化相关的任务

工作流

1. 初步 SEO 分析

首先使用 SEO 分析器脚本进行全面分析：

python scripts/seo_analyzer.py <directory_or_file>

此脚本会分析 HTML 文件并生成详细报告，涵盖以下内容：

• 标题标签（长度、是否存在、是否唯一）
• 元描述（长度、是否存在）
• 标题结构（H1-H6 层级）
• 图片 alt 属性
• Open Graph 标签
• Twitter Card 标签
• Schema.org 标记
• HTML lang 属性
• viewport 和 charset 元标签
• 规范 URL
• 内容长度

输出选项：

• 默认：易于阅读的文本报告，包含问题、警告和良好实践
• --json：便于程序处理的 JSON 格式

使用示例：

# Analyze single file
python scripts/seo_analyzer.py index.html

# Analyze entire directory
python scripts/seo_analyzer.py ./public

# Get JSON output
python scripts/seo_analyzer.py ./public --json

2. 查看分析结果

分析器会将结果分为三个级别：

严重问题（🔴）——立即修复：

• 缺少标题标签
• 缺少元描述
• 缺少 H1 标题
• 图片缺少 alt 属性
• 缺少 HTML lang 属性

警告（⚠️）——尽快修复，以优化 SEO：

• 标题或描述长度不理想
• 存在多个 H1 标签
• 缺少 Open Graph 或 Twitter Card 标签
• 缺少 viewport 元标签
• 缺少 Schema 标记
• 标题层级存在问题

良好实践（✅）——已完成优化：

• 元素格式正确
• 长度合适
• 包含必需的标签

3. 排定问题优先级并修复

按优先级顺序处理问题：

优先级 1：严重问题

缺少或不理想的标题标签：

<title>Primary Keyword - Secondary Keyword | Brand Name</title>

• 保持在 50-60 个字符
• 在开头包含目标关键词
• 确保每个页面的标题都不相同

缺少元描述：

<meta name="description" content="Clear, concise description that includes target keywords and encourages clicks. 150-160 characters.">

缺少 H1 或存在多个 H1：

• 确保每个页面恰好有一个 H1
• H1 应描述主题
• 内容应与标题标签一致或相关

图片缺少 alt 文本：

<img src="image.jpg" alt="Descriptive text explaining image content">

缺少 HTML lang 属性：

<html lang="en">

优先级 2：重要优化

Viewport 元标签（对移动端 SEO 至关重要）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

字符集声明：

<meta charset="UTF-8">

Open Graph 标签（用于社交媒体分享）：

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page-url">
<meta property="og:type" content="website">

Twitter Card 标签：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">
<meta name="twitter:image" content="https://example.com/image.jpg">

规范 URL：

<link rel="canonical" href="https://example.com/preferred-url">

优先级 3：高级优化

Schema 标记——详细实现方法请参阅 references/schema_markup_guide.md。常见类型：

• Organization（主页）
• Article/BlogPosting（博客文章）
• LocalBusiness（本地商家）
• Breadcrumb（导航）
• FAQ（常见问题页面）
• Product（电子商务）

实现示例：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": "2024-01-15",
  "image": "https://example.com/image.jpg"
}
</script>

4. 生成或更新站点地图

修复问题后，生成 XML 站点地图：

python scripts/generate_sitemap.py <directory> <base_url> [output_file]

示例：

# Generate sitemap for website
python scripts/generate_sitemap.py ./public https://example.com

# Specify output location
python scripts/generate_sitemap.py ./public https://example.com ./public/sitemap.xml

此脚本会：

• 自动查找所有 HTML 文件
• 生成正确的 URL
• 添加 lastmod 日期
• 估算 priority 和 changefreq 值
• 创建格式正确的 XML 站点地图

生成后：

1. 将 sitemap.xml 上传到网站根目录
2. 在 robots.txt 中添加引用
3. 提交到 Google Search Console 和 Bing Webmaster Tools

5. 更新 robots.txt

使用 assets/robots.txt 中的模板并进行自定义：

User-agent: *
Allow: /

# Block sensitive directories
Disallow: /admin/
Disallow: /private/

# Reference your sitemap
Sitemap: https://yourdomain.com/sitemap.xml

将 robots.txt 放在网站根目录中。

6. 验证与测试

修复完成后：

本地测试：

1. 再次运行 SEO 分析器，验证修复效果
2. 检查所有关键问题是否已解决
3. 确保没有引入新问题

在线测试：

1. 将更改部署到生产环境
2. 使用 Google Rich Results Test 测试：https://search.google.com/test/rich-results
3. 验证 Schema 标记：https://validator.schema.org/
4. 检查移动设备友好性：https://search.google.com/test/mobile-friendly
5. 在 Google Search Console 中监控

7. 持续优化

定期维护：

• 添加新页面时更新站点地图
• 保持元描述新颖且有吸引力
• 确保新图片都有替代文本
• 为新的内容类型添加 Schema 标记
• 在 Search Console 中监控问题
• 定期更新内容

常见优化模式

模式 1：新网站设置

对于全新的 HTML/CSS 网站：

1. 运行初始分析：python scripts/seo_analyzer.py ./public
2. 为所有页面添加必要的元标签（标题、描述、视口）
3. 确保标题结构正确（每页一个 H1）
4. 为所有图片添加替代文本
5. 在主页上实现组织 Schema
6. 生成站点地图：python scripts/generate_sitemap.py ./public https://yourdomain.com
7. 根据模板创建 robots.txt
8. 部署并向搜索引擎提交站点地图

模式 2：现有网站审计

对于需要优化的现有网站：

1. 运行全面分析：python scripts/seo_analyzer.py ./public
2. 找出问题并确定优先级（先处理关键问题）
3. 修复所有页面上的关键问题
4. 添加缺失的 Open Graph 和 Twitter Card 标签
5. 为适用的页面实现 Schema 标记
6. 根据更新内容重新生成站点地图
7. 使用分析器验证修复效果
8. 部署并监控

模式 3：单页优化

优化特定页面时：

1. 分析指定文件：python scripts/seo_analyzer.py page.html
2. 修复发现的问题
3. 针对目标关键词优化标题和元描述
4. 确保标题层级正确
5. 根据页面类型添加适当的 Schema 标记
6. 使用分析器验证
7. 如果是新页面，则更新站点地图

模式 4：博客文章优化

优化博客文章和其他文章时：

1. 确保标题唯一（50-60 个字符）并包含目标关键词
2. 撰写有吸引力的元描述（150-160 个字符）
3. 文章标题使用单个 H1
4. 为各个版块设置正确的 H2/H3 层级
5. 为所有图片添加替代文本
6. 实现 Article 或 BlogPosting Schema（参见 references/schema_markup_guide.md）
7. 添加 Open Graph 和 Twitter Card 标签以便在社交媒体上分享
8. 包含作者信息
9. 添加用于导航的面包屑 Schema

参考资料

详细指南

references/seo_checklist.md： 涵盖 SEO 各个方面的完整检查清单：

• 标题标签和元描述指南
• 标题结构最佳实践
• 图片优化技巧
• URL 结构建议
• 内部链接策略
• 页面速度优化
• 移动设备优化要求
• 语义化 HTML 的使用
• 完整的技术 SEO 检查清单

查询此文档，了解任何 SEO 要素的详细规范。

references/schema_markup_guide.md： 实现 schema.org 结构化数据的完整指南：

• JSON-LD 实现（推荐格式）
• 10 多种常见 Schema 类型及示例
• Organization、LocalBusiness、Article、BlogPosting、FAQ、Product 等
• 各类型的必需属性
• 最佳实践和常见错误
• 验证工具和资源

为任何内容类型实现 Schema 标记时，请参考此文档。

脚本

scripts/seo_analyzer.py： 用于自动化 SEO 分析的 Python 脚本。分析 HTML 文件中的常见问题并生成详细报告。可输出文本或 JSON 格式。分析结果确定可靠，可用于重复分析。

scripts/generate_sitemap.py： 用于生成 XML 站点地图的 Python 脚本。自动爬取目录、估算优先级和更新频率，并生成格式正确、可直接提交给搜索引擎的站点地图。

资源

assets/robots.txt： 包含常见配置和注释的 robots.txt 模板。根据具体需求进行自定义，并放置在网站根目录中。

核心原则

1. 用户优先：首先为用户优化，其次才是搜索引擎。良好的用户体验会带来更好的 SEO 效果。

2. 内容独特：每个页面都应有独特的标题、描述和 H1。重复内容会损害 SEO。

3. 移动优先：Google 使用移动优先索引。始终包含 viewport meta 标签，并确保网站适配移动设备。

4. 无障碍访问 = SEO：无障碍网站（包含 alt 文本、语义化 HTML 和规范的标题）排名更好。

5. 重质量，不重量：内容充实、有价值的页面比内容单薄的页面排名更好。应打造内容全面的页面。

6. 夯实技术基础：在进行高级优化之前，先修复关键技术问题（如缺少标签、结构损坏）。

7. 结构化数据：Schema 标记有助于搜索引擎理解内容，并可能带来富媒体搜索结果。

8. 定期更新：SEO 是一项持续工作。保持内容新鲜、监控分析数据，并适应算法变化。

9. 自然语言：使用自然语言为读者写作。避免关键词堆砌。

10. 验证：部署到生产环境之前，务必使用测试工具验证更改。

实现最大效果的技巧

• 从关键问题入手：先修复缺少的 title 标签和 meta 描述——这些问题影响最大
• 保持一致：在所有页面上应用优化，而不只是首页
• 使用语义化 HTML：使用适当的 HTML5 语义标签（<header>、<nav>、<main>、<article>、<aside>、<footer>）
• 优化图片：压缩图片，使用描述性文件名，并始终添加 alt 文本
• 内部链接：使用描述性的锚文本链接到相关页面
• 页面速度很重要：加载速度快的页面排名更好
• 在移动设备上测试：大多数搜索来自移动设备——确保提供出色的移动体验
• 监控 Search Console：使用 Google Search Console 跟踪效果并发现问题
• 定期更新：新鲜内容表明网站活跃且有价值

快速参考命令

# Analyze single file
python scripts/seo_analyzer.py index.html

# Analyze entire website
python scripts/seo_analyzer.py ./public

# Generate sitemap
python scripts/generate_sitemap.py ./public https://example.com

# Get JSON analysis output
python scripts/seo_analyzer.py ./public --json