- Added comprehensive SEO meta tags in index.html for improved search engine visibility, including Open Graph and Twitter Card tags. - Created a sitemap.xml for better indexing of site tools, generated automatically via a new script (generate-sitemap.ts). - Introduced robots.txt to manage crawler access and specified sitemap location. - Updated package.json to include a build step for sitemap generation and added tsx as a dependency. - Documented SEO optimizations and usage instructions in a new SEO-README.md file.
172 lines
4.0 KiB
Markdown
172 lines
4.0 KiB
Markdown
# SEO 优化说明
|
||
|
||
本项目已完成基础 SEO 优化,以下是已实施的改动。
|
||
|
||
## 已完成的优化项
|
||
|
||
### 1. HTML Meta 标签优化 ✅
|
||
|
||
在 `index.html` 中添加了完整的 SEO 元数据:
|
||
|
||
- **基础 Meta 标签**
|
||
- title, description, keywords
|
||
- author, theme-color
|
||
- canonical URL
|
||
|
||
- **Open Graph 标签**(社交媒体分享优化)
|
||
- og:type, og:url, og:title
|
||
- og:description, og:image, og:site_name
|
||
|
||
- **Twitter Card 标签**
|
||
- twitter:card, twitter:title
|
||
- twitter:description, twitter:image
|
||
|
||
- **结构化数据**(JSON-LD)
|
||
- Schema.org WebSite 类型标记
|
||
- 提升搜索引擎理解能力
|
||
|
||
### 2. SEO 配置文件 ✅
|
||
|
||
- **`public/robots.txt`** - 搜索引擎爬虫规则
|
||
- 允许所有爬虫访问
|
||
- 指定 sitemap 位置
|
||
|
||
- **`public/sitemap.xml`** - 站点地图(自动生成)
|
||
- 包含所有工具页面 URL
|
||
- 设置更新频率和优先级
|
||
- 通过 `scripts/generate-sitemap.ts` 自动生成
|
||
|
||
- **`public/manifest.json`** - PWA 配置
|
||
- 支持渐进式 Web 应用
|
||
- 改善移动端体验
|
||
|
||
### 3. 构建流程优化 ✅
|
||
|
||
- **`package.json`**
|
||
- 构建时自动生成 sitemap
|
||
- 添加 tsx 依赖用于运行生成脚本
|
||
|
||
## 文件清单
|
||
|
||
### 新增文件
|
||
```
|
||
public/
|
||
├── robots.txt # 爬虫规则
|
||
├── sitemap.xml # 站点地图(自动生成)
|
||
└── manifest.json # PWA 配置
|
||
|
||
scripts/
|
||
└── generate-sitemap.ts # Sitemap 生成脚本
|
||
```
|
||
|
||
### 修改文件
|
||
```
|
||
index.html # 添加 SEO meta 标签和结构化数据
|
||
package.json # 添加 sitemap 生成命令
|
||
```
|
||
|
||
## 使用说明
|
||
|
||
### 开发
|
||
```bash
|
||
pnpm install # 安装依赖
|
||
pnpm dev # 启动开发服务器
|
||
```
|
||
|
||
### 构建
|
||
```bash
|
||
pnpm run build # 构建项目(自动生成 sitemap)
|
||
pnpm run generate:sitemap # 单独生成 sitemap
|
||
```
|
||
|
||
### 部署前检查
|
||
|
||
⚠️ **重要:部署前必须更新配置文件中的域名!**
|
||
|
||
需要将以下文件中的 `https://litek.typist.cc` 替换为你的实际域名:
|
||
|
||
1. **`index.html`**
|
||
- canonical URL
|
||
- Open Graph URL 和 image
|
||
- Twitter Card image
|
||
- Structured Data URL
|
||
|
||
2. **`public/robots.txt`**
|
||
- Sitemap URL
|
||
|
||
3. **`scripts/generate-sitemap.ts`**
|
||
- BASE_URL 常量
|
||
|
||
更新后重新构建:
|
||
```bash
|
||
pnpm run build
|
||
```
|
||
|
||
## SEO 验证
|
||
|
||
### 部署后验证
|
||
|
||
1. **提交 sitemap 到 Google Search Console**
|
||
- 访问 https://search.google.com/search-console
|
||
- 添加网站资源
|
||
- 提交 sitemap: `https://你的域名/sitemap.xml`
|
||
|
||
2. **测试结构化数据**
|
||
- 访问 https://validator.schema.org/
|
||
- 输入网站 URL
|
||
- 检查是否有错误
|
||
|
||
3. **测试 Open Graph 预览**
|
||
- Facebook: https://developers.facebook.com/tools/debug/
|
||
- Twitter: https://cards-dev.twitter.com/validator
|
||
|
||
4. **性能测试**
|
||
- Google PageSpeed Insights: https://pagespeed.web.dev/
|
||
- 目标分数: SEO > 95
|
||
|
||
## 可访问的 URL
|
||
|
||
部署后,以下 URL 应该可以正常访问:
|
||
|
||
- `https://你的域名/` - 主页
|
||
- `https://你的域名/robots.txt` - 爬虫规则
|
||
- `https://你的域名/sitemap.xml` - 站点地图
|
||
- `https://你的域名/manifest.json` - PWA 配置
|
||
- `https://你的域名/tool/uuid` - UUID 工具
|
||
- `https://你的域名/tool/json` - JSON 工具
|
||
- `https://你的域名/tool/base64` - Base64 工具
|
||
- `https://你的域名/tool/network/dns` - DNS 工具
|
||
- ... 其他工具页面
|
||
|
||
## 添加新工具时更新 SEO
|
||
|
||
当添加新工具时,需要更新 `scripts/generate-sitemap.ts`:
|
||
|
||
```typescript
|
||
const tools = [
|
||
// 现有工具...
|
||
{ path: '/tool/你的新工具', priority: '0.9' },
|
||
];
|
||
```
|
||
|
||
然后重新构建项目。
|
||
|
||
## SEO 效果预期
|
||
|
||
- **1-2 周**:搜索引擎开始索引页面
|
||
- **1-2 月**:主要关键词开始有排名
|
||
- **3-6 月**:稳定的搜索排名和自然流量增长
|
||
|
||
## 技术栈
|
||
|
||
- React 19 + TypeScript
|
||
- Vite (Rolldown)
|
||
- React Router v7
|
||
- Radix UI + Tailwind CSS 4
|
||
- Nginx
|
||
|
||
## 联系方式
|
||
|
||
需要更多工具或有建议?联系:litek@mail.typist.cc
|
||
|