⚡

SEO优化器Skill seo-optimizer

SEO优化器是一款专为HTML/CSS网站设计的搜索引擎优化工具。它能自动分析网站代码，识别并修复SEO问题，如缺失的元标签、标题结构、图片Alt属性等，并生成详细的优化报告。该工具支持实施结构化数据标记（Schema Markup）、生成XML站点地图（Sitemap）、优化移动端体验等高级功能，帮助网站提升在Google、百度等搜索引擎中的排名和可见性。关键词：SEO优化，网站分析，元标签，结构化数据，站点地图，搜索引擎排名。

前端开发 0 次安装 1 次浏览 更新于 2/28/2026

name: seo-optimizer description: 此技能应用于分析HTML/CSS网站以进行SEO优化、修复SEO问题、生成SEO报告或实施SEO最佳实践。当用户请求SEO审计、优化、元标签改进、结构化数据标记实现、站点地图生成或一般搜索引擎优化任务时使用。

SEO优化器

概述

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

何时使用此技能

当用户请求以下内容时使用此技能：

  • “分析我的网站的SEO问题”
  • “优化此页面的SEO”
  • “生成一份SEO审计报告”
  • “修复我网站上的SEO问题”
  • “为我的页面添加正确的元标签”
  • “实现结构化数据标记”
  • “生成一个站点地图”
  • “提高我网站的搜索引擎排名”
  • 任何与HTML/CSS网站的搜索引擎优化相关的任务

工作流程

1. 初始SEO分析

使用SEO分析器脚本开始全面分析：

python scripts/seo_analyzer.py <目录或文件>

此脚本分析HTML文件并生成详细报告，涵盖：

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

输出选项：

  • 默认：人类可读的文本报告，包含问题、警告和良好实践
  • --json：机器可读的JSON格式，用于程序化处理

使用示例：

# 分析单个文件
python scripts/seo_analyzer.py index.html

# 分析整个目录
python scripts/seo_analyzer.py ./public

# 获取JSON输出
python scripts/seo_analyzer.py ./public --json

2. 审查分析结果

分析器将发现的问题分为三个级别：

关键问题 (🔴) - 立即修复：

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

警告 (⚠️) - 为获得最佳SEO效果应尽快修复：

  • 标题/描述长度不理想
  • 多个H1标签
  • 缺少Open Graph或Twitter Card标签
  • 缺少viewport元标签
  • 缺少结构化数据标记
  • 标题层级问题

良好实践 (✅) - 已优化：

  • 格式正确的元素
  • 正确的长度
  • 存在必需的标签

3. 优先排序并修复问题

按优先级顺序处理问题：

优先级 1：关键问题

缺少或质量差的标题标签：

<!-- 在 <head> 中添加独特、描述性的标题 -->
<title>主要关键词 - 次要关键词 | 品牌名称</title>
  • 保持50-60个字符
  • 在开头包含目标关键词
  • 每个页面保持唯一

缺少元描述：

<!-- 在 <head> 中添加引人注目的描述 -->
<meta name="description" content="清晰、简洁的描述，包含目标关键词并鼓励点击。150-160个字符。">

缺少H1或多个H1：

  • 确保每个页面有且仅有一个H1
  • H1应描述主要主题
  • 应与标题标签匹配或相关

图片缺少替代文本：

<!-- 为所有图片添加描述性alt文本 -->
<img src="image.jpg" alt="描述图片内容的文本">

缺少HTML Lang属性：

<!-- 添加到打开的 <html> 标签 -->
<html lang="zh-CN">

优先级 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="您的页面标题">
<meta property="og:description" content="您的页面描述">
<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="您的页面标题">
<meta name="twitter:description" content="您的页面描述">
<meta name="twitter:image" content="https://example.com/image.jpg">

规范URL：

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

优先级 3：高级优化

结构化数据标记 - 请参考 references/schema_markup_guide.md 获取详细实现。常见类型：

  • Organization（组织，用于主页）
  • Article/BlogPosting（文章/博客文章）
  • LocalBusiness（本地企业）
  • Breadcrumb（面包屑导航）
  • FAQ（常见问题页面）
  • Product（产品，用于电子商务）

实现示例：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "author": {
    "@type": "Person",
    "name": "作者姓名"
  },
  "datePublished": "2024-01-15",
  "image": "https://example.com/image.jpg"
}
</script>

4. 生成或更新站点地图

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

python scripts/generate_sitemap.py <目录> <基础URL> [输出文件]

示例：

# 为网站生成站点地图
python scripts/generate_sitemap.py ./public https://example.com

# 指定输出位置
python scripts/generate_sitemap.py ./public https://example.com ./public/sitemap.xml

该脚本：

  • 自动查找所有HTML文件
  • 生成正确的URL
  • 包含最后修改日期
  • 估算优先级和更新频率值
  • 创建格式正确的XML站点地图

生成后：

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

5. 更新robots.txt

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

User-agent: *
Allow: /

# 阻止敏感目录
Disallow: /admin/
Disallow: /private/

# 引用您的站点地图
Sitemap: https://yourdomain.com/sitemap.xml

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

6. 验证和测试

实施修复后：

本地测试：

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

在线测试：

  1. 将更改部署到生产环境
  2. 使用Google富媒体搜索结果测试：https://search.google.com/test/rich-results
  3. 验证结构化数据标记：https://validator.schema.org/
  4. 检查移动设备友好性：https://search.google.com/test/mobile-friendly
  5. 在Google Search Console中监控

7. 持续优化

定期维护：

  • 添加新页面时更新站点地图
  • 保持元描述新鲜且引人注目
  • 确保新图片有alt文本
  • 为新内容类型添加结构化数据标记
  • 监控Search Console中的问题
  • 定期更新内容

常见优化模式

模式 1：新网站设置

对于全新的HTML/CSS网站：

  1. 运行初始分析：python scripts/seo_analyzer.py ./public
  2. 为所有页面添加基本元标签（标题、描述、viewport）
  3. 确保正确的标题结构（每个页面一个H1）
  4. 为所有图片添加alt文本
  5. 在主页上实现组织架构标记
  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. 为适当的页面实现结构化数据标记
  6. 使用更新重新生成站点地图
  7. 使用分析器验证修复
  8. 部署并监控

模式 3：单页面优化

对于优化特定页面：

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

模式 4：博客文章优化

对于博客文章和文章：

  1. 确保标题唯一（50-60个字符）并包含目标关键词
  2. 撰写引人注目的元描述（150-160个字符）
  3. 使用单个H1作为文章标题
  4. 为章节使用正确的H2/H3层级
  5. 为所有图片添加alt文本
  6. 实现Article或BlogPosting结构化数据（参见 references/schema_markup_guide.md）
  7. 为社交分享添加Open Graph和Twitter Card标签
  8. 包含作者信息
  9. 为导航添加面包屑结构化数据

参考资料

详细指南

references/seo_checklist.md： 涵盖所有SEO方面的综合清单：

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

参考此文件获取任何SEO元素的详细规范。

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

  • JSON-LD实现（推荐格式）
  • 10+种常见结构化数据类型及示例
  • Organization, LocalBusiness, Article, BlogPosting, FAQ, Product等
  • 每种类型的必需属性
  • 最佳实践和常见错误
  • 验证工具和资源

为任何内容类型实现结构化数据标记时参考此指南。

脚本

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元标签并确保移动端响应性。

  4. 可访问性 = SEO：可访问的网站（alt文本、语义HTML、正确的标题）排名更好。

  5. 质量优于数量：实质性、有价值的内容比单薄的内容排名更好。目标是全面的页面。

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

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

  8. 定期更新：SEO是持续的过程。保持内容新鲜，监控分析数据，并适应算法变化。

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

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

最大化影响的技巧

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

快速参考命令

# 分析单个文件
python scripts/seo_analyzer.py index.html

# 分析整个网站
python scripts/seo_analyzer.py ./public

# 生成站点地图
python scripts/generate_sitemap.py ./public https://example.com

# 获取JSON分析输出
python scripts/seo_analyzer.py ./public --json