# SEO Guard

**Repository Path**: EricGuosx/seo-guard

## Basic Information

- **Project Name**: SEO Guard
- **Description**: 专业SEO检测工具（Google Core Web Vitals 检测，SEO 友好性检测，结构化数据检测）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-22
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: SEO, APP

## README

# SEOGuard - 专业SEO检测工具

<div align="center">

![SEOGuard Logo](src/assets/seoguard-logo.png)

**基于 Electron 开发的专业 SEO 检测工具**

支持 Google Core Web Vitals 性能检测、SEO 友好性分析和结构化数据检测

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Electron](https://img.shields.io/badge/Electron-Latest-blue.svg)](https://electronjs.org/)
[![Node.js](https://img.shields.io/badge/Node.js-14+-green.svg)](https://nodejs.org/)

</div>

## ✨ 功能特性

### 🚀 Tab 1: Google Core Web Vitals 检测
- **LCP (Largest Contentful Paint)**: 最大内容绘制时间检测
- **FID (First Input Delay)**: 首次输入延迟检测  
- **CLS (Cumulative Layout Shift)**: 累积布局偏移检测
- **详细性能指标**: FCP、SI、TTI、TBT 等完整性能分析
- **Google 标准评分**: 基于 Google PageSpeed Insights 的评分标准
- **智能优化建议**: 提供具体的 HTML/CSS/JavaScript 代码示例
- **问题资源识别**: 精确定位影响性能的具体文件和资源

### 🔍 Tab 2: SEO 友好性检测
- **基础 SEO 元素**: 标题、描述、H1-H6 标签检测
- **技术 SEO**: 字符编码、语言设置、视口配置、Canonical URL
- **图片 SEO**: Alt 属性、图片优化、懒加载检测
- **移动友好性**: 响应式设计、移动端适配检测
- **社交媒体**: Open Graph、Twitter Cards 元数据检测
- **结构化数据**: Schema.org 标记检测
- **性能相关**: 图片懒加载、资源优化建议

### 📊 Tab 3: 结构化数据检测
- **多格式支持**: JSON-LD、Microdata、RDFa 格式检测
- **CDATA 兼容**: 支持各种 CDATA 包装格式
- **富媒体预览**: 预览搜索结果中的富媒体显示效果
- **验证和分析**: 数据有效性验证和完整性分析
- **优化建议**: 针对性的结构化数据优化建议
- **代码检测**: 支持直接粘贴代码进行检测

## 🚀 快速开始

### 📋 系统要求
- **Node.js**: 版本 14.0 或更高
- **npm**: 版本 6.0 或更高
- **操作系统**: Windows 10+, macOS 10.14+, Linux (Ubuntu 18.04+)

### 📦 安装步骤

1. **克隆项目**
```bash
git clone https://gitee.com/EricGuosx/seo-guard.git
cd seo-guard
```

2. **安装依赖**
```bash
npm install
```

3. **配置 API 密钥** (可选)
```bash
# 编辑 src/main.js 文件
# 将 YOUR_PAGESPEED_API_KEY 替换为你的 Google PageSpeed Insights API 密钥
```

4. **启动应用**
```bash
# 开发模式
npm start

# 或使用批处理文件 (Windows)
start.bat
```

### 🔧 API 配置 (可选)

SEOGuard 可以在没有 API 密钥的情况下运行（演示模式），但配置 API 密钥可以获得真实的检测数据：

1. 访问 [Google Cloud Console](https://console.cloud.google.com/)
2. 创建新项目或选择现有项目
3. 启用 **PageSpeed Insights API**
4. 创建 **API 密钥**
5. 在 `src/main.js` 中替换 API 密钥

### 📱 打包应用

```bash
# 安装 electron-builder (如果未安装)
npm install -g electron-builder

# 打包当前平台
npm run build

# 打包所有平台
npm run build:all
```

## 📖 使用指南

### 🎯 Google Core Web Vitals 检测
1. 启动应用后，默认在 **"Google CWV检测"** 标签页
2. 在 URL 输入框中输入要检测的网站地址（如：`https://example.com`）
3. 点击 **"开始检测"** 按钮
4. 等待检测完成，查看详细的性能分析报告：
   - **核心指标**: LCP、FID、CLS 评分和数值
   - **详细指标**: FCP、SI、TTI、TBT 等
   - **优化建议**: 具体的代码示例和实施方案
   - **问题资源**: 影响性能的具体文件列表

### 🔍 SEO 友好性检测
1. 切换到 **"SEO友好性检测"** 标签页
2. 输入要分析的网站 URL
3. 点击 **"开始检测"** 按钮
4. 查看全面的 SEO 分析报告：
   - **基础 SEO**: 标题、描述、H标签分析
   - **技术 SEO**: 编码、语言、视口等技术指标
   - **图片优化**: Alt 属性、图片 SEO 检测
   - **移动友好**: 响应式设计检测
   - **优化建议**: 详细的 SEO 改进建议

### 📊 结构化数据检测
1. 切换到 **"结构化数据检测"** 标签页
2. 选择检测方式：
   - **URL 检测**: 输入网站 URL 进行在线检测
   - **代码检测**: 直接粘贴 HTML 代码或 JSON-LD 数据
3. 点击对应的 **"开始检测"** 按钮
4. 查看结构化数据分析：
   - **数据概览**: 发现的 Schema 数量和类型
   - **富媒体预览**: 搜索结果显示效果预览
   - **验证结果**: 数据有效性和完整性分析
   - **优化建议**: 结构化数据改进建议

## 🛠️ 技术栈

### 核心技术
- **[Electron](https://electronjs.org/)**: 跨平台桌面应用框架
- **[Node.js](https://nodejs.org/)**: JavaScript 运行环境
- **[Axios](https://axios-http.com/)**: HTTP 请求库
- **[Cheerio](https://cheerio.js.org/)**: 服务端 jQuery 实现，用于 HTML 解析

### API 集成
- **[Google PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/get-started)**: 性能检测数据源
- **Schema.org**: 结构化数据标准

### 前端技术
- **HTML5**: 现代化的用户界面
- **CSS3**: 响应式设计和动画效果
- **Vanilla JavaScript**: 原生 JavaScript，无框架依赖

## 📁 项目结构

```
seoguard/
├── src/                          # 源代码目录
│   ├── main.js                   # Electron 主进程
│   ├── assets/                   # 资源文件
│   │   ├── favicon.svg           # 应用图标
│   │   └── icon.ico              # Windows 图标
│   └── renderer/                 # 渲染进程
│       ├── index.html            # 主界面 HTML
│       ├── styles.css            # 样式文件
│       ├── script.js             # 主要 JavaScript 逻辑
│       └── script-fix.js         # 修复和增强功能
├── package.json                  # 项目配置和依赖
├── package-lock.json             # 依赖锁定文件
├── start.bat                     # Windows 启动脚本
├── .gitignore                    # Git 忽略文件
└── README.md                     # 项目说明文档
```

## 🔧 开发指南

### 添加新功能
1. **后端逻辑**: 在 `src/main.js` 中添加 IPC 处理函数
2. **前端逻辑**: 在 `src/renderer/script.js` 中添加调用逻辑
3. **用户界面**: 在 `src/renderer/index.html` 中添加 UI 元素
4. **样式设计**: 在 `src/renderer/styles.css` 中添加样式

### 自定义配置
- **API 密钥**: 在 `src/main.js` 中配置 Google API 密钥
- **样式主题**: 在 `src/renderer/styles.css` 中自定义颜色和布局
- **检测规则**: 在 `src/main.js` 中修改 SEO 检测逻辑

### 调试模式
```bash
# 启动开发者工具
npm start -- --dev

# 或在代码中添加
mainWindow.webContents.openDevTools();
```

## 🌟 特色功能

### 智能演示模式
- 无需 API 密钥即可体验完整功能
- 提供真实的优化建议和代码示例
- 自动检测 API 配置状态

### 专业级分析
- 基于 Google SEO 标准的评分体系
- 详细的 HTML/CSS/JavaScript 代码示例
- 针对性的优化建议和实施方案

### 用户友好界面
- 现代化的响应式设计
- 直观的标签页导航
- 实时的检测进度显示

## ⚠️ 注意事项

### API 使用限制
- **Google PageSpeed Insights API** 有每日请求限制
- 建议合理使用，避免频繁请求同一 URL
- 无 API 密钥时自动切换到演示模式

### 网络要求
- 检测功能需要稳定的网络连接
- 某些网站可能有 CORS 限制，影响 SEO 检测
- 建议在良好的网络环境下使用

### 安全建议
- 请妥善保管 API 密钥，不要提交到公共仓库
- 建议使用环境变量存储敏感信息
- 定期更新依赖包以确保安全性

## 🤝 贡献指南

欢迎贡献代码和建议！请遵循以下步骤：

1. Fork 本项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系与支持

### 开发者信息
- **开发者**: Eric Guo
- **邮箱**: 18337177020@163.com
- **技术支持**: eric.guo

### 获取帮助
- 🐛 **问题报告**: 请在 GitHub Issues 中提交
- 💡 **功能建议**: 欢迎提出新功能想法
- 🚀 **定制开发**: 支持企业级定制开发

### 技术交流
- 📧 **邮件支持**: 18337177020@163.com
- 🔧 **技术咨询**: 有任何使用问题或建议，请联系开发者

## 📈 更新日志

### v1.0.0 (2025-01-06)
- 🎉 **SEOGuard 初始版本发布**
- ✨ **Google Core Web Vitals 检测**: 完整的性能分析功能
- 🔍 **SEO 友好性检测**: 全面的 SEO 分析工具
- 📊 **结构化数据检测**: 支持多种格式的 Schema 检测
- 🎨 **现代化 UI**: 响应式设计，专业级用户界面
- 🛠️ **智能演示模式**: 无需 API 密钥即可体验完整功能
- 📝 **详细优化建议**: 提供具体的代码示例和实施方案

---

<div align="center">

**⭐ 如果这个项目对你有帮助，请给它一个 Star！**

Made with ❤️ by [Eric Guo](mailto:18337177020@163.com)

</div>