Skip to content

Commit f124a1f

Browse files
newbe36524newbe36524
committed
add seo
1 parent bf8165e commit f124a1f

41 files changed

Lines changed: 6969 additions & 46 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/ci.yml‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
name: CI
2+
3+
# Trigger workflow on pull requests to main branch
4+
on:
5+
pull_request:
6+
branches:
7+
- main
8+
9+
# Set permissions for CI and PR comments
10+
permissions:
11+
contents: read
12+
pull-requests: write
13+
14+
jobs:
15+
# CI job to verify build and run tests
16+
ci:
17+
name: Build and Test
18+
runs-on: ubuntu-latest
19+
20+
steps:
21+
# Step 1: Checkout repository code
22+
- name: Checkout
23+
uses: actions/checkout@v4
24+
25+
# Step 2: Setup Node.js 20 with npm caching
26+
- name: Setup Node.js
27+
uses: actions/setup-node@v4
28+
with:
29+
node-version: "20"
30+
cache: "npm"
31+
32+
# Step 3: Install dependencies using npm ci for clean, reproducible installs
33+
- name: Install dependencies
34+
run: npm ci
35+
36+
# Step 4: Build project and verify TypeScript compilation
37+
- name: Build
38+
run: npm run build
39+
40+
# Step 5: Run test suite using vitest
41+
- name: Test
42+
run: npm test
43+
44+
# Step 6: Report test results with PR comment
45+
- name: Comment PR with test results
46+
if: always()
47+
uses: actions/github-script@v7
48+
with:
49+
script: |
50+
const outcome = '${{ job.status }}';
51+
const emoji = outcome === 'success' ? '✅' : '❌';
52+
const message = `${emoji} CI check result: **${outcome === 'success' ? 'Passed' : 'Failed'}**
53+
54+
**Workflow**: CI
55+
**Status**: ${outcome}
56+
**Branch**: ${{ github.head_ref }}
57+
**Commit**: ${{ github.sha }}
58+
59+
${outcome === 'success' ?
60+
'All tests passed and build completed successfully.' :
61+
'Please check the logs for details and fix any issues before merging.'}`;
62+
63+
github.rest.issues.createComment({
64+
issue_number: context.issue.number,
65+
owner: context.repo.owner,
66+
repo: context.repo.repo,
67+
body: message
68+
});

‎README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ A modern Docker Compose configuration generator for Hagicode, built with React +
1313
- **Responsive Design**: Works on both desktop and mobile devices
1414
- **Local Storage Persistence**: Configuration saved to localStorage for convenience
1515
- **One-Click Copy/Download**: Copy generated YAML to clipboard or download as file
16+
- **SEO Optimized**: Full search engine optimization with meta tags, Open Graph, Twitter Cards, and structured data
17+
- **Multi-language Support**: Internationalization (i18n) with English and Chinese support
1618

1719
## Quick Start
1820

@@ -144,6 +146,63 @@ src/
144146
- Firefox (latest)
145147
- Safari (latest)
146148

149+
## SEO Configuration
150+
151+
The application includes comprehensive SEO (Search Engine Optimization) features:
152+
153+
### Features
154+
155+
- **Meta Tags**: Complete HTML meta tags for title, description, keywords
156+
- **Open Graph**: Enhanced social media sharing on Facebook, LinkedIn, etc.
157+
- **Twitter Cards**: Optimized card display when sharing on Twitter
158+
- **Structured Data**: JSON-LD Schema.org markup for WebApplication, SoftwareApplication, and Organization
159+
- **Sitemap**: XML sitemap for search engine crawlers (`/sitemap.xml`)
160+
- **Robots.txt**: Search engine crawler configuration (`/robots.txt`)
161+
- **Canonical URLs**: Prevents duplicate content issues
162+
- **Hreflang Tags**: Multi-language SEO support
163+
164+
### Customization
165+
166+
SEO configuration is centralized in `src/config/seo.ts`. You can customize:
167+
168+
- Site title and description
169+
- Keywords
170+
- Social media images
171+
- Default locale and alternate languages
172+
- Organization information
173+
174+
### Dynamic SEO Updates
175+
176+
SEO tags can be dynamically updated using the utility functions in `src/lib/seo/utils.ts`:
177+
178+
```typescript
179+
import { updateSEO } from './lib/seo/utils';
180+
181+
// Update SEO for specific pages
182+
updateSEO({
183+
title: 'Custom Page Title',
184+
description: 'Custom description',
185+
image: '/custom-image.png'
186+
});
187+
```
188+
189+
### Validation Tools
190+
191+
Test your SEO implementation with these online tools:
192+
193+
- **Google Lighthouse**: Built into Chrome DevTools - Tests SEO performance
194+
- **Facebook Sharing Debugger**: https://developers.facebook.com/tools/debug/
195+
- **Twitter Card Validator**: https://cards-dev.twitter.com/validator
196+
- **Google Rich Results Test**: https://search.google.com/test/rich-results
197+
- **Schema Markup Validator**: https://validator.schema.org/
198+
199+
### Adding a Custom Open Graph Image
200+
201+
To add a custom OG image:
202+
203+
1. Create an image at `public/og-image.png` (recommended size: 1200x630px)
204+
2. Update the `image` property in `src/config/seo.ts`
205+
147206
## License
148207

149208
MIT

‎index.html‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,37 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Hagicode Docker Compose Builder</title>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
8+
<!-- Basic Meta Tags -->
9+
<title>Hagicode Docker Compose Builder - Visual Docker Compose Generator</title>
10+
<meta name="description" content="A powerful visual tool for creating and managing Docker Compose configurations. Build, customize, and export your docker-compose.yml files with an intuitive interface." />
11+
<meta name="keywords" content="docker, docker compose, docker-compose, yaml generator, docker builder, container orchestration, devops tools, docker ui, compose builder" />
12+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
13+
14+
<!-- Canonical URL -->
15+
<link rel="canonical" href="https://hagicode-org.github.io/docker-compose-builder/" />
16+
17+
<!-- Open Graph Meta Tags -->
18+
<meta property="og:title" content="Hagicode Docker Compose Builder - Visual Docker Compose Generator" />
19+
<meta property="og:description" content="A powerful visual tool for creating and managing Docker Compose configurations. Build, customize, and export your docker-compose.yml files with an intuitive interface." />
20+
<meta property="og:image" content="https://hagicode-org.github.io/docker-compose-builder/og-image.png" />
21+
<meta property="og:url" content="https://hagicode-org.github.io/docker-compose-builder/" />
22+
<meta property="og:type" content="website" />
23+
<meta property="og:locale" content="en" />
24+
<meta property="og:site_name" content="Hagicode Docker Compose Builder" />
25+
26+
<!-- Twitter Card Meta Tags -->
27+
<meta name="twitter:card" content="summary_large_image" />
28+
<meta name="twitter:title" content="Hagicode Docker Compose Builder - Visual Docker Compose Generator" />
29+
<meta name="twitter:description" content="A powerful visual tool for creating and managing Docker Compose configurations. Build, customize, and export your docker-compose.yml files with an intuitive interface." />
30+
<meta name="twitter:image" content="https://hagicode-org.github.io/docker-compose-builder/og-image.png" />
31+
32+
<!-- Alternate Language Links -->
33+
<link rel="alternate" hreflang="en" href="https://hagicode-org.github.io/docker-compose-builder/" />
34+
<link rel="alternate" hreflang="zh-CN" href="https://hagicode-org.github.io/docker-compose-builder/?lang=zh-CN" />
35+
<link rel="alternate" hreflang="x-default" href="https://hagicode-org.github.io/docker-compose-builder/" />
836
</head>
937
<body>
1038
<div id="root"></div>

‎openspec/changes/archive/2026-02-01-seo-infrastructure-setup/proposal.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Change: 添加基础 SEO 基础设施
2+
3+
## Why
4+
5+
当前站点缺乏基础的搜索引擎优化（SEO）配置，导致搜索引擎爬虫无法有效抓取和索引网站内容。这会影响站点的可见性，使得目标用户难以通过搜索引擎发现和使用本 Docker Compose Builder 工具。
6+
7+
## What Changes
8+
9+
- 为所有页面添加完整的 HTML meta 标签（title, description, keywords, viewport）
10+
- 实现 Open Graph 协议标签（og:title, og:description, og:image, og:url）
11+
- 配置 Twitter Card 标签以增强社交媒体分享体验
12+
- 创建 `robots.txt` 文件，明确爬虫访问规则
13+
- 生成 `sitemap.xml`，列出所有可索引页面
14+
- 添加 JSON-LD 格式的 Schema.org 结构化数据标记
15+
- 将 SEO 配置参数化，支持站点级和页面级覆盖
16+
17+
## Impact
18+
19+
- Affected specs: seo (新增)
20+
- Affected code:
21+
- `index.html` - 添加基础 meta 标签
22+
- `public/` - 新增 robots.txt 和 sitemap.xml
23+
- `src/main.tsx` - 动态更新页面 meta 标签
24+
- `src/config/seo.ts` - SEO 配置文件（新建）
25+
- `src/lib/seo/` - SEO 工具函数（新建）
26+
- `vite.config.ts` - 构建时生成 sitemap

‎openspec/changes/archive/2026-02-01-seo-infrastructure-setup/specs/seo/spec.md‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
## ADDED Requirements
2+
3+
### Requirement: HTML Meta 标签配置
4+
5+
系统 SHALL 为所有页面提供完整的 HTML meta 标签配置，包括标题、描述、关键词等基础 SEO 元素。
6+
7+
#### Scenario: 基础 meta 标签渲染
8+
- **WHEN** 用户访问站点任何页面
9+
- **THEN** 页面 head 中包含正确的 charset 标签
10+
- **AND** 包含 viewport 标签用于响应式设计
11+
- **AND** 包含 X-UA-Compatible 标签确保 IE 兼容性
12+
13+
#### Scenario: 页面标题和描述
14+
- **WHEN** 用户访问站点主页
15+
- **THEN** 页面 title 标签显示 "Hagicode Docker Compose Builder"
16+
- **AND** meta description 标签提供站点功能摘要
17+
- **AND** meta keywords 标签包含核心关键词（docker, compose, generator, hagicode）
18+
19+
#### Scenario: Canonical URL
20+
- **WHEN** 页面加载完成
21+
- **THEN** head 中包含 canonical link 标签
22+
- **AND** canonical URL 指向当前页面的规范 URL
23+
24+
### Requirement: Open Graph 协议支持
25+
26+
系统 SHALL 实现 Open Graph 协议标签，确保站点链接在社交媒体平台正确展示。
27+
28+
#### Scenario: Open Graph 基础标签
29+
- **WHEN** 页面加载完成
30+
- **THEN** head 中包含 og:title 标签，值为页面标题
31+
- **AND** 包含 og:description 标签，值为页面描述
32+
- **AND** 包含 og:type 标签，值为 "website"
33+
- **AND** 包含 og:url 标签，值为当前页面 URL
34+
35+
#### Scenario: Open Graph 图片
36+
- **WHEN** 页面加载完成
37+
- **THEN** head 中包含 og:image 标签
38+
- **AND** og:image 指向站点的默认分享图片
39+
- **AND** 包含 og:image:alt 标签提供图片描述
40+
41+
#### Scenario: 站点名称
42+
- **WHEN** 页面加载完成
43+
- **THEN** head 中包含 og:site_name 标签
44+
- **AND** 值为 "Hagicode Docker Compose Builder"
45+
46+
### Requirement: Twitter Card 支持
47+
48+
系统 SHALL 配置 Twitter Card 标签，优化在 Twitter 平台的分享体验。
49+
50+
#### Scenario: Twitter Card 基础标签
51+
- **WHEN** 页面加载完成
52+
- **THEN** head 中包含 twitter:card 标签，值为 "summary_large_image"
53+
- **AND** 包含 twitter:site 标签指向站点 Twitter 账号（如有）
54+
- **AND** 包含 twitter:creator 标签（如有）
55+
56+
#### Scenario: Twitter Card 内容
57+
- **WHEN** 页面加载完成
58+
- **THEN** head 中包含 twitter:title 标签
59+
- **AND** 包含 twitter:description 标签
60+
- **AND** 包含 twitter:image 标签
61+
- **AND** 所有标签值与 Open Graph 标签保持一致
62+
63+
### Requirement: 搜索引擎指引
64+
65+
系统 SHALL 提供 robots.txt 和 sitemap.xml 文件，明确搜索引擎爬虫的访问规则和站点结构。
66+
67+
#### Scenario: robots.txt 文件
68+
- **WHEN** 搜索引擎爬虫访问 /robots.txt
69+
- **THEN** 返回有效的 robots.txt 文件
70+
- **AND** 允许所有爬虫访问站点（User-agent: * Allow: /）
71+
- **AND** 包含 sitemap.xml 的引用
72+
73+
#### Scenario: sitemap.xml 文件
74+
- **WHEN** 搜索引擎爬虫访问 /sitemap.xml
75+
- **THEN** 返回有效的 sitemap.xml 文件
76+
- **AND** 包含站点主页 URL
77+
- **AND** 包含每个页面的 lastmod 时间戳
78+
- **AND** 包含每个页面的 priority 优先级
79+
80+
#### Scenario: Sitemap 自动更新
81+
- **WHEN** 执行生产构建
82+
- **THEN** 系统自动生成或更新 sitemap.xml
83+
- **AND** sitemap.xml 包含最新的页面列表
84+
- **AND** 文件放置在 dist 目录根目录
85+
86+
### Requirement: Schema.org 结构化数据
87+
88+
系统 SHALL 通过 JSON-LD 格式提供 Schema.org 结构化数据，帮助搜索引擎理解站点内容。
89+
90+
#### Scenario: WebApplication 结构化数据
91+
- **WHEN** 页面加载完成
92+
- **THEN** head 中包含 @type 为 "WebApplication" 的 JSON-LD
93+
- **AND** 包含应用名称 "Hagicode Docker Compose Builder"
94+
- **AND** 包含应用描述
95+
- **AND** 包含应用 URL
96+
- **AND** 包含应用类别（"UtilitiesApplication", "DeveloperApplication"）
97+
98+
#### Scenario: SoftwareApplication 结构化数据
99+
- **WHEN** 页面加载完成
100+
- **THEN** head 中包含 @type 为 "SoftwareApplication" 的 JSON-LD
101+
- **AND** 包含应用名称和描述
102+
- **AND** 包含操作系统要求（"Web Browser"）
103+
- **AND** 包含应用许可（"MIT"）
104+
- **AND** 包含应用评分或评价（如有）
105+
106+
#### Scenario: Organization 结构化数据
107+
- **WHEN** 页面加载完成
108+
- **THEN** head 中包含 @type 为 "Organization" 的 JSON-LD
109+
- **AND** 包含组织名称 "Hagicode"
110+
- **AND** 包含组织 URL
111+
- **AND** 包含 logo URL（如有）
112+
113+
### Requirement: 多语言 SEO 支持
114+
115+
系统 SHALL 支持多语言环境下的 SEO 配置，包括 hreflang 标签和本地化的 meta 标签内容。
116+
117+
#### Scenario: hreflang 标签
118+
- **WHEN** 页面加载完成
119+
- **THEN** head 中包含每个支持语言的 hreflang 标签
120+
- **AND** hreflang 标签指向对应语言的 URL
121+
- **AND** 包含 x-default 标签指向默认语言版本
122+
123+
#### Scenario: 多语言 meta 内容
124+
- **WHEN** 用户切换语言
125+
- **THEN** 页面 title 更新为当前语言版本
126+
- **AND** meta description 更新为当前语言版本
127+
- **AND** og:title 和 og:description 同步更新
128+
- **AND** Twitter Card 标签同步更新
129+
130+
#### Scenario: lang 属性
131+
- **WHEN** 用户切换语言
132+
- **THEN** html 标签的 lang 属性更新为当前语言代码
133+
- **AND** 值为有效的 BCP 47 语言标签（如 "en", "zh-CN"）
134+
135+
### Requirement: SEO 配置参数化
136+
137+
系统 SHALL 提供可配置的 SEO 设置，支持站点级默认配置和页面级覆盖。
138+
139+
#### Scenario: 站点级默认配置
140+
- **WHEN** 应用初始化
141+
- **THEN** 从配置文件加载站点级 SEO 默认配置
142+
- **AND** 默认配置包括站点名称、描述、关键词、图片等
143+
- **AND** 默认配置应用于所有页面
144+
145+
#### Scenario: 页面级覆盖
146+
- **WHEN** 需要为特定页面定制 SEO 标签
147+
- **THEN** 支持在页面组件中定义页面级 SEO 配置
148+
- **AND** 页面级配置优先级高于站点级默认配置
149+
- **AND** 仅覆盖指定的字段，其他字段使用默认值
150+
151+
#### Scenario: SEO 配置更新
152+
- **WHEN** 通过编程方式调用 SEO 工具函数
153+
- **THEN** 工具函数动态更新页面的 meta 标签
154+
- **AND** 更新包括 title, description, og 标签, twitter 标签等
155+
- **AND** 更新立即生效，无需重新加载页面
156+
157+
### Requirement: SEO 验证工具支持
158+
159+
系统 SHALL 生成的 SEO 标签和结构化数据应符合主流验证工具的标准。
160+
161+
#### Scenario: Lighthouse SEO 分数
162+
- **WHEN** 使用 Google Lighthouse 测试站点
163+
- **THEN** SEO 分数达到 90 分以上
164+
- **AND** 所有基础 SEO 检查通过
165+
- **AND** 无阻塞 SEO 的问题
166+
167+
#### Scenario: 社交媒体调试器
168+
- **WHEN** 使用 Facebook Sharing Debugger 测试
169+
- **THEN** 所有 Open Graph 标签正确解析
170+
- **AND** 预览图片正确显示
171+
- **WHEN** 使用 Twitter Card Validator 测试
172+
- **THEN** 所有 Twitter Card 标签正确解析
173+
- **AND** Card 预览正确显示
174+
175+
#### Scenario: 结构化数据验证
176+
- **WHEN** 使用 Google Rich Results Test 测试
177+
- **THEN** 所有 JSON-LD 结构化数据有效
178+
- **AND** 无语法错误或警告
179+
- **AND** 至少检测到一种富媒体结果类型（WebApplication 或 SoftwareApplication）

0 commit comments

Comments
 (0)