Seo Optimizer

介绍

# SEO Optimizer

## 概述

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

## 何时使用此技能

当用户请求以下内容时，请使用此技能： - “分析我网站的 SEO 问题” - “优化此页面的 SEO” - “生成 SEO 审计报告” - “修复我网站上的 SEO 问题” - “为我的页面添加适当的元标签” - “实施 Schema 标记” - “生成站点地图” - “提高我网站的搜索引擎排名” - 与 HTML/CSS 网站搜索引擎优化相关的任何任务

## 工作流程

### 1. 初始 SEO 分析

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

```bash 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 格式

**使用示例**： ```bash # 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：严重问题

**缺少或质量不佳的标题标签**： ```html  <title>Primary Keyword - Secondary Keyword | Brand Name</title> ``` - 保持在 50-60 个字符之间 - 在开头包含目标关键词 - 使每个页面唯一

**缺少元描述**： ```html  <meta name="description" content="Clear, concise description that includes target keywords and encourages clicks. 150-160 characters."> ```

**缺少 H1 或存在多个 H1**： - 确保每个页面只有一个 H1 - H1 应描述主要主题 - 应与标题标签匹配或相关

**没有 Alt 文本的图像**： ```html  <img src="image.jpg" alt="Descriptive text explaining image content"> ```

**缺少 HTML Lang 属性**： ```html  <html lang="en"> ```

#### 优先级 2：重要优化

**Viewport 元标签**（对移动端 SEO 至关重要）： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ```

**Charset 声明**： ```html <meta charset="UTF-8"> ```

**Open Graph 标签**（用于社交媒体分享）： ```html <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 标签**： ```html <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**： ```html <link rel="canonical" href="https://example.com/preferred-url"> ```

#### 优先级 3：高级优化

**Schema 标记** - 有关详细实施，请参阅 `references/schema_markup_guide.md`。常见类型： - Organization（主页） - Article/BlogPosting（博客文章） - LocalBusiness（本地企业） - Breadcrumb（导航） - FAQ（常见问题页面） - Product（电子商务）

实施示例： ```html <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 站点地图：

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

**示例**： ```bash # 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) - 估算优先级和更新频率 (changefreq) 值 - 创建格式正确的 XML 站点地图

**生成后**： 1. 将 sitemap.xml 上传到网站根目录 2. 添加指向 robots.txt 的引用 3. 提交给 Google Search Console 和 Bing 网站管理员工具

### 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 富媒体结果测试工具进行测试：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. 持续优化

**定期维护**： - 添加新页面时更新站点地图 - 保持元描述新鲜且引人注目 - 确保新图像具有 alt 文本 - 为新内容类型添加 Schema 标记 - 在 Search Console 中监控问题 - 定期更新内容

## 常见优化模式

### 模式 1：新网站设置

对于全新的 HTML/CSS 网站：

1. 运行初始分析：`python scripts/seo_analyzer.py ./public` 2. 为所有页面添加基本元标签（标题、描述、viewport） 3. 确保正确的标题结构（每页一个 H1） 4. 为所有图像添加 alt 文本 5. 在主页上实施 Organization 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. 为所有图像添加 alt 文本 6. 实施 Article 或 BlogPosting Schema（参见 `references/schema_markup_guide.md`） 7. 添加 Open Graph 和 Twitter Card 标签以便于社交分享 8. 包含作者信息 9. 添加导航用的 Breadcrumb 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 元标签并确保移动端响应能力。

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 跟踪性能并发现问题 - **定期更新**：新鲜的内容表明网站活跃且有价值

## 快速参考命令

```bash # 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 ```

介绍

更多产品

Github

API Gateway

Xero