seo-optimizer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SEO Optimizer

SEO优化工具

Overview

概述

This skill provides comprehensive SEO optimization capabilities for HTML/CSS websites. It analyzes websites for SEO issues, implements best practices, and generates optimization reports covering all critical SEO aspects including meta tags, heading structure, image optimization, schema markup, mobile optimization, and technical SEO.

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

When to Use This Skill

适用场景

Use this skill when the user requests:

"Analyze my website for SEO issues"
"Optimize this page for SEO"
"Generate an SEO audit report"
"Fix SEO problems on my website"
"Add proper meta tags to my pages"
"Implement schema markup"
"Generate a sitemap"
"Improve my site's search engine rankings"
Any task related to search engine optimization for HTML/CSS websites

当用户提出以下需求时，可使用本技能：

"分析我的网站SEO问题"
"优化这个页面的SEO"
"生成SEO审计报告"
"修复我的网站SEO问题"
"为我的页面添加合适的元标签"
"实施Schema标记"
"生成站点地图"
"提升我的网站搜索引擎排名"
任何与HTML/CSS网站搜索引擎优化相关的任务

Workflow

工作流程

1. Initial SEO Analysis

1. 初始SEO分析

Start with comprehensive analysis using the SEO analyzer script:

bash

python scripts/seo_analyzer.py <directory_or_file>

This script analyzes HTML files and generates a detailed report covering:

Title tags (length, presence, uniqueness)
Meta descriptions (length, presence)
Heading structure (H1-H6 hierarchy)
Image alt attributes
Open Graph tags
Twitter Card tags
Schema.org markup
HTML lang attribute
Viewport and charset meta tags
Canonical URLs
Content length

Output Options:

Default: Human-readable text report with issues, warnings, and good practices
```
--json
```
: Machine-readable JSON format for programmatic processing

Example Usage:

bash

undefined

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

bash

python scripts/seo_analyzer.py <directory_or_file>

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

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

输出选项:

默认：包含问题、警告和最佳实践的易读性文本报告
```
--json
```
: 适用于程序化处理的机器可读JSON格式

使用示例:

bash

undefined

Analyze single file

分析单个文件

python scripts/seo_analyzer.py index.html

Analyze entire directory

分析整个目录

python scripts/seo_analyzer.py ./public

Get JSON output

获取JSON格式输出

python scripts/seo_analyzer.py ./public --json

undefined

python scripts/seo_analyzer.py ./public --json

undefined

2. Review Analysis Results

2. 查看分析结果

The analyzer categorizes findings into three levels:

Critical Issues (🔴) - Fix immediately:

Missing title tags
Missing meta descriptions
Missing H1 headings
Images without alt attributes
Missing HTML lang attribute

Warnings (⚠️) - Fix soon for optimal SEO:

Suboptimal title/description lengths
Multiple H1 tags
Missing Open Graph or Twitter Card tags
Missing viewport meta tag
Missing schema markup
Heading hierarchy issues

Good Practices (✅) - Already optimized:

Properly formatted elements
Correct lengths
Present required tags

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

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

缺失标题标签
缺失元描述
缺失H1标题
图片无alt文本
缺失HTML lang属性

警告（⚠️） - 尽快修复以获得最佳SEO效果：

标题/描述长度不理想
多个H1标签
缺失Open Graph或Twitter Card标签
缺失视口元标签
缺失Schema标记
标题层级问题

最佳实践（✅） - 已优化：

格式正确的元素
长度符合要求
必要标签已存在

3. Prioritize and Fix Issues

3. 优先级修复问题

Address issues in priority order:

按优先级顺序处理问题：

Priority 1: Critical Issues

优先级1：严重问题

Missing or Poor Title Tags:

html

<!-- Add unique, descriptive title to <head> -->
<title>Primary Keyword - Secondary Keyword | Brand Name</title>

Keep 50-60 characters
Include target keywords at the beginning
Make unique for each page

Missing Meta Descriptions:

html

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

Missing H1 or Multiple H1s:

Ensure exactly ONE H1 per page
H1 should describe the main topic
Should match or relate to title tag

Images Without Alt Text:

html

<!-- Add descriptive alt text to all images -->
<img src="image.jpg" alt="Descriptive text explaining image content">

Missing HTML Lang Attribute:

html

<!-- Add to opening <html> tag -->
<html lang="en">

缺失或劣质标题标签:

html

<!-- 在<head>中添加独特且描述性的标题 -->
<title>主关键词 - 次要关键词 | 品牌名称</title>

长度保持在50-60字符
开头包含目标关键词
每个页面的标题需唯一

缺失元描述:

html

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

缺失H1或多个H1:

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

图片无alt文本:

html

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

缺失HTML lang属性:

html

<!-- 添加到<html>起始标签 -->
<html lang="en">

Priority 2: Important Optimizations

优先级2：重要优化

Viewport Meta Tag (critical for mobile SEO):

html

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

Charset Declaration:

html

<meta charset="UTF-8">

Open Graph Tags (for social media sharing):

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 Tags:

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">

Canonical URL:

html

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

视口元标签（对移动端SEO至关重要）:

html

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

字符集声明:

html

<meta charset="UTF-8">

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

html

<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标签:

html

<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:

html

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

Priority 3: Advanced Optimization

优先级3：高级优化

Schema Markup - Refer to

references/schema_markup_guide.md

for detailed implementation. Common types:

Organization (homepage)
Article/BlogPosting (blog posts)
LocalBusiness (local businesses)
Breadcrumb (navigation)
FAQ (FAQ pages)
Product (e-commerce)

Example implementation:

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>

Schema标记 - 参考

references/schema_markup_guide.md

获取详细实现方法。常见类型：

Organization（首页）
Article/BlogPosting（博客文章）
LocalBusiness（本地商家）
Breadcrumb（导航）
FAQ（FAQ页面）
Product（电商产品）

实现示例:

html

<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. Generate or Update Sitemap

4. 生成或更新站点地图

After fixing issues, generate an XML sitemap:

bash

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

Example:

bash

undefined

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

bash

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

示例:

bash

undefined

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


The script:
- Automatically finds all HTML files
- Generates proper URLs
- Includes lastmod dates
- Estimates priority and changefreq values
- Creates properly formatted XML sitemap

**After generation**:
1. Upload sitemap.xml to website root
2. Add reference to robots.txt
3. Submit to Google Search Console and Bing Webmaster Tools

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和必应网站管理员工具

5. Update robots.txt

5. 更新robots.txt

Use the template from

assets/robots.txt

and customize:

User-agent: *
Allow: /

使用

assets/robots.txt

中的模板并自定义：

User-agent: *
Allow: /

Block sensitive directories

屏蔽敏感目录

Disallow: /admin/ Disallow: /private/

Reference your sitemap

引用你的站点地图

Sitemap: https://yourdomain.com/sitemap.xml


Place robots.txt in website root directory.

Sitemap: https://yourdomain.com/sitemap.xml


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

6. Verify and Test

6. 验证与测试

After implementing fixes:

Local Testing:

Run the SEO analyzer again to verify fixes
Check that all critical issues are resolved
Ensure no new issues were introduced

Online Testing:

Deploy changes to production
Test with Google Rich Results Test: https://search.google.com/test/rich-results
Validate schema markup: https://validator.schema.org/
Check mobile-friendliness: https://search.google.com/test/mobile-friendly
Monitor in Google Search Console

实施修复后：

本地测试:

再次运行SEO分析工具验证修复效果
确认所有严重问题已解决
确保未引入新问题

在线测试:

将更改部署到生产环境
使用Google富媒体结果测试：https://search.google.com/test/rich-results
验证Schema标记：https://validator.schema.org/
检查移动端友好性：https://search.google.com/test/mobile-friendly
在Google Search Console中监控

7. Ongoing Optimization

7. 持续优化

Regular maintenance:

Update sitemap when adding new pages
Keep meta descriptions fresh and compelling
Ensure new images have alt text
Add schema markup to new content types
Monitor Search Console for issues
Update content regularly

定期维护:

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

Common Optimization Patterns

常见优化模式

Pattern 1: New Website Setup

模式1：新网站搭建

For a brand new HTML/CSS website:

Run initial analysis:
```
python scripts/seo_analyzer.py ./public
```
Add essential meta tags to all pages (title, description, viewport)
Ensure proper heading structure (one H1 per page)
Add alt text to all images
Implement organization schema on homepage

Generate sitemap:

python scripts/generate_sitemap.py ./public https://yourdomain.com

Create robots.txt from template
Deploy and submit sitemap to search engines

针对全新的HTML/CSS网站：

运行初始分析：
```
python scripts/seo_analyzer.py ./public
```
为所有页面添加必要的元标签（标题、描述、视口）
确保正确的标题结构（每个页面一个H1）
为所有图片添加alt文本
在首页实施Organization Schema

生成站点地图：

python scripts/generate_sitemap.py ./public https://yourdomain.com

从模板创建robots.txt
部署并向搜索引擎提交站点地图

Pattern 2: Existing Website Audit

模式2：现有网站审计

For an existing website needing optimization:

Run comprehensive analysis:
```
python scripts/seo_analyzer.py ./public
```
Identify and prioritize issues (critical first)
Fix critical issues across all pages
Add missing Open Graph and Twitter Card tags
Implement schema markup for appropriate pages
Regenerate sitemap with updates
Verify fixes with analyzer
Deploy and monitor

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

运行全面分析：
```
python scripts/seo_analyzer.py ./public
```
识别并确定问题优先级（先处理严重问题）
修复所有页面的严重问题
添加缺失的Open Graph和Twitter Card标签
为相应页面实施Schema标记
重新生成更新后的站点地图
使用分析工具验证修复效果
部署并监控

Pattern 3: Single Page Optimization

模式3：单页面优化

For optimizing a specific page:

Analyze specific file:

python scripts/seo_analyzer.py page.html

Fix identified issues
Optimize title and meta description for target keywords
Ensure proper heading hierarchy
Add appropriate schema markup for page type
Verify with analyzer
Update sitemap if new page

针对特定页面的优化：

分析特定文件：

python scripts/seo_analyzer.py page.html

修复识别出的问题
针对目标关键词优化标题和元描述
确保正确的标题层级
为页面类型添加合适的Schema标记
使用分析工具验证
如果是新页面，更新站点地图

Pattern 4: Blog Post Optimization

模式4：博客文章优化

For blog posts and articles:

Ensure unique title (50-60 chars) with target keyword
Write compelling meta description (150-160 chars)
Use single H1 for article title
Implement proper H2/H3 hierarchy for sections
Add alt text to all images
Implement Article or BlogPosting schema (see
```
references/schema_markup_guide.md
```
)
Add Open Graph and Twitter Card tags for social sharing
Include author information
Add breadcrumb schema for navigation

针对博客文章：

确保标题唯一（50-60字符）并包含目标关键词
撰写有吸引力的元描述（150-160字符）
使用单个H1作为文章标题
为章节实施正确的H2/H3层级
为所有图片添加alt文本
实施Article或BlogPosting Schema（参考
```
references/schema_markup_guide.md
```
）
添加用于社交媒体分享的Open Graph和Twitter Card标签
包含作者信息
为导航添加面包屑Schema

Reference Materials

参考资料

Detailed Guides

详细指南

references/seo_checklist.md
: Comprehensive checklist covering all SEO aspects:

Title tags and meta descriptions guidelines
Heading structure best practices
Image optimization techniques
URL structure recommendations
Internal linking strategies
Page speed optimization
Mobile optimization requirements
Semantic HTML usage
Complete technical SEO checklist

Reference this for detailed specifications on any SEO element.

references/schema_markup_guide.md
: Complete guide for implementing schema.org structured data:

JSON-LD implementation (recommended format)
10+ common schema types with examples
Organization, LocalBusiness, Article, BlogPosting, FAQ, Product, etc.
Required properties for each type
Best practices and common mistakes
Validation tools and resources

Reference this when implementing schema markup for any content type.

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

脚本

scripts/seo_analyzer.py
: Python script for automated SEO analysis. Analyzes HTML files for common issues and generates detailed reports. Can output text or JSON format. Deterministic and reliable for repeated analysis.

scripts/generate_sitemap.py
: Python script for generating XML sitemaps. Automatically crawls directories, estimates priorities and change frequencies, and generates properly formatted sitemaps ready for submission to search engines.

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

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

Assets

资源

assets/robots.txt
: Template robots.txt file with common configurations and comments. Customize for specific needs and place in website root directory.

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

Key Principles

核心原则

User-First: Optimize for users first, search engines second. Good user experience leads to better SEO.
Unique Content: Every page should have unique title, description, and H1. Duplicate content hurts SEO.
Mobile-First: Google uses mobile-first indexing. Always include viewport meta tag and ensure mobile responsiveness.
Accessibility = SEO: Accessible websites (alt text, semantic HTML, proper headings) rank better.
Quality Over Quantity: Substantial, valuable content ranks better than thin content. Aim for comprehensive pages.
Technical Foundation: Fix critical technical issues (missing tags, broken structure) before advanced optimization.
Structured Data: Schema markup helps search engines understand content and can lead to rich results.
Regular Updates: SEO is ongoing. Keep content fresh, monitor analytics, and adapt to algorithm changes.
Natural Language: Write for humans using natural language. Avoid keyword stuffing.
Validation: Always validate changes with testing tools before deploying to production.

用户优先: 先为用户优化，再考虑搜索引擎。良好的用户体验会带来更好的SEO效果。
内容唯一: 每个页面的标题、描述和H1都应唯一。重复内容会损害SEO。
移动端优先: Google采用移动端优先索引。始终包含视口元标签并确保移动端响应性。
可访问性=SEO: 可访问的网站（含alt文本、语义HTML、正确标题）排名更好。
质量胜于数量: 丰富、有价值的内容比单薄内容排名更好。目标是打造全面的页面。
技术基础: 在进行高级优化前，先修复严重的技术问题（缺失标签、结构损坏）。
结构化数据: Schema标记帮助搜索引擎理解内容，可带来富媒体结果。
定期更新: SEO是持续的过程。保持内容新鲜，监控分析数据，适应算法变化。
自然语言: 为人类撰写内容，使用自然语言。避免关键词堆砌。
验证: 部署到生产环境前，始终使用测试工具验证更改。

Tips for Maximum Impact

最大化效果的技巧

Start with critical issues: Fix missing title tags and meta descriptions first - these have the biggest impact
Be consistent: Apply optimizations across all pages, not just homepage
Use semantic HTML: Use proper HTML5 semantic tags (
```
<header>
```
,
```
<nav>
```
,
```
<main>
```
,
```
<article>
```
,
```
<aside>
```
,
```
<footer>
```
)
Optimize images: Compress images, use descriptive filenames, always include alt text
Internal linking: Link to related pages with descriptive anchor text
Page speed matters: Fast-loading pages rank better
Test on mobile: Majority of searches are mobile - ensure excellent mobile experience
Monitor Search Console: Use Google Search Console to track performance and identify issues
Update regularly: Fresh content signals active, valuable websites

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

Quick Reference Commands

快速参考命令

bash

undefined

bash

undefined

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

获取JSON格式的分析输出

python scripts/seo_analyzer.py ./public --json

undefined

python scripts/seo_analyzer.py ./public --json

undefined