Skip to content

Commit 1c8b54d

Browse files
author
數據狂人
committed
feat(tech-seo): 完成技術SEO架構師專屬工作區建立與品質審計
- 建立 docs/tech-seo/ 專屬工作區目錄結構 - 新增 HTML 標準規範文檔 (html-standards.md) - 新增 Schema.org 實施指南 (schema-implementation.md) - 新增 效能優化指南 (performance-guide.md) - 完成 SEO 緊急審計報告 (seo-audit-report.md) 技術實施: - 基於 Context7 最新 HTML HEAD 最佳實踐 - 遵循 Schema.org 官方 JSON-LD 標準 - 實施 Core Web Vitals 目標值定義 - 建立完整的品質檢查流程 品質標準: - Lighthouse 100 分滿分要求 - W3C HTML 驗證通過 - Schema.org 驗證無誤 - 20年資深工程師品質標準 發現問題: - P0: 線上版本與開發版本不同步 (缺少SEO標籤) - P1: author 資訊需要統一 - P1: 版本號需要更新 下一步: 立即推送修復部署同步問題 執行人: 鐵漢阿強 (Iron Man Strong) 審計時間: 2025-08-17T02:07:02+08:00
1 parent 49b3f32 commit 1c8b54d

6 files changed

Lines changed: 2005 additions & 116 deletions

File tree

‎docs/tech-seo/html-standards.md‎

Lines changed: 391 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,391 @@
1+
# 🔧 HTML 標準規範 - 鐵漢阿強技術 SEO 實施標準
2+
3+
## 📋 文檔資訊
4+
5+
**建立時間**: 2025-08-17T01:57:37+08:00
6+
**負責人**: 鐵漢阿強 (Iron Man Strong)
7+
**版本**: v1.0.0
8+
**適用範圍**: ClickFun 專案技術 SEO 實施
9+
**標準來源**: [Context7:HTML HEAD Guide](https://github.com/joshbuchea/head)
10+
11+
---
12+
13+
## 🎯 HTML5 語義化標記標準
14+
15+
### 基礎文檔結構
16+
17+
```html
18+
<!DOCTYPE html>
19+
<html lang="zh-TW">
20+
<head>
21+
<!--
22+
必須優先設置的基礎標籤
23+
這兩個 meta 標籤必須放在 <head> 的最前面
24+
-->
25+
<meta charset="utf-8">
26+
<meta name="viewport" content="width=device-width, initial-scale=1">
27+
28+
<!-- 頁面標題 - SEO 核心要素 -->
29+
<title>ClickFun - 點擊樂趣遊戲 | 免費線上PWA遊戲</title>
30+
31+
<!-- 後續所有其他 head 元素 -->
32+
</head>
33+
<body>
34+
<!-- 語義化 HTML 結構 -->
35+
</body>
36+
</html>
37+
```
38+
39+
### 強制性 Meta 標籤清單
40+
41+
```html
42+
<!-- ✅ 基礎文檔設置 (必須優先) -->
43+
<meta charset="utf-8">
44+
<meta name="viewport" content="width=device-width, initial-scale=1">
45+
46+
<!-- ✅ SEO 核心標籤 -->
47+
<meta name="description" content="ClickFun 是免費線上點擊遊戲，支援 PWA 離線遊戲、TPS 計算，提供粉藍配色的現代化點擊體驗。立即開始測試您的點擊速度！">
48+
<meta name="keywords" content="點擊遊戲,ClickFun,Click Fun,PWA遊戲,免費遊戲,線上遊戲,TPS計算,點擊速度">
49+
<meta name="author" content="haotool">
50+
51+
<!-- ✅ 搜尋引擎指令 -->
52+
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">
53+
<meta name="googlebot" content="index, follow">
54+
55+
<!-- ✅ 標準化 URL -->
56+
<link rel="canonical" href="https://haotool.github.io/clickfun/">
57+
58+
<!-- ✅ 主題色彩 -->
59+
<meta name="theme-color" content="#f6a8d8">
60+
61+
<!-- ✅ 應用程式名稱 -->
62+
<meta name="application-name" content="ClickFun">
63+
```
64+
65+
---
66+
67+
## 🌐 Open Graph 最佳實踐
68+
69+
### Facebook Open Graph 標籤
70+
71+
```html
72+
<!-- ✅ 完整的 Open Graph 實施 -->
73+
<meta property="og:type" content="website">
74+
<meta property="og:title" content="ClickFun - 點擊樂趣遊戲 | 免費線上PWA遊戲">
75+
<meta property="og:description" content="免費線上點擊遊戲，支援PWA離線遊戲、TPS計算功能。現代化粉藍配色設計，跨平台相容，立即體驗最佳點擊樂趣！">
76+
<meta property="og:url" content="https://haotool.github.io/clickfun/">
77+
<meta property="og:site_name" content="ClickFun">
78+
<meta property="og:locale" content="zh_TW">
79+
80+
<!-- ✅ 社交媒體圖片 (1200x630 最佳尺寸) -->
81+
<meta property="og:image" content="https://haotool.github.io/clickfun/icons/og-image-1200x630.png">
82+
<meta property="og:image:width" content="1200">
83+
<meta property="og:image:height" content="630">
84+
<meta property="og:image:alt" content="ClickFun 點擊遊戲介面預覽 - 粉藍配色的現代化點擊體驗">
85+
86+
<!-- ✅ 應用程式特定標籤 -->
87+
<meta property="og:type" content="website">
88+
<meta property="article:author" content="haotool">
89+
```
90+
91+
### Twitter Cards 標籤
92+
93+
```html
94+
<!-- ✅ Twitter Cards 完整實施 -->
95+
<meta name="twitter:card" content="summary_large_image">
96+
<meta name="twitter:title" content="ClickFun - 點擊樂趣遊戲 | 免費線上PWA遊戲">
97+
<meta name="twitter:description" content="免費線上點擊遊戲，支援PWA離線遊戲、TPS計算。現代化設計，跨平台相容！">
98+
<meta name="twitter:image" content="https://haotool.github.io/clickfun/icons/twitter-card-1200x630.png">
99+
<meta name="twitter:image:alt" content="ClickFun 點擊遊戲介面 - 美觀的粉藍配色點擊體驗">
100+
101+
<!-- ✅ 如有 Twitter 帳號可加入 -->
102+
<!-- <meta name="twitter:site" content="@clickfun_game"> -->
103+
<!-- <meta name="twitter:creator" content="@haotool"> -->
104+
```
105+
106+
---
107+
108+
## 📱 PWA 專用 Meta 標籤
109+
110+
### iOS 專用標籤
111+
112+
```html
113+
<!-- ✅ iOS PWA 優化 -->
114+
<meta name="apple-mobile-web-app-title" content="ClickFun">
115+
<meta name="apple-mobile-web-app-capable" content="yes">
116+
<meta name="apple-mobile-web-app-status-bar-style" content="default">
117+
118+
<!-- ✅ iOS 圖示 -->
119+
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png">
120+
<link rel="apple-touch-startup-image" href="/icons/apple-startup-image.png">
121+
122+
<!-- ✅ 禁用電話號碼自動偵測 -->
123+
<meta name="format-detection" content="telephone=no">
124+
```
125+
126+
### Android 專用標籤
127+
128+
```html
129+
<!-- ✅ Android PWA 優化 -->
130+
<meta name="mobile-web-app-capable" content="yes">
131+
<meta name="theme-color" content="#f6a8d8">
132+
133+
<!-- ✅ Chrome 瀏覽器優化 -->
134+
<meta name="google" content="notranslate">
135+
```
136+
137+
### Windows 專用標籤
138+
139+
```html
140+
<!-- ✅ Windows 磁貼配置 -->
141+
<meta name="msapplication-TileColor" content="#f6a8d8">
142+
<meta name="msapplication-config" content="/browserconfig.xml">
143+
```
144+
145+
---
146+
147+
## 🔗 Resource Hints 和效能優化
148+
149+
### 資源預載與優化
150+
151+
```html
152+
<!-- ✅ DNS 預取和預連接 -->
153+
<link rel="dns-prefetch" href="//fonts.googleapis.com">
154+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
155+
156+
<!-- ✅ 關鍵資源預載 -->
157+
<link rel="preload" href="/style.css" as="style">
158+
<link rel="preload" href="/main.js" as="script">
159+
160+
<!-- ✅ 重要圖片預載 -->
161+
<link rel="preload" href="/icons/click-fun-hero.webp" as="image" type="image/webp">
162+
163+
<!-- ✅ 次要頁面預取 -->
164+
<link rel="prefetch" href="/about.html">
165+
```
166+
167+
### 安全性設置
168+
169+
```html
170+
<!-- ✅ 內容安全政策 -->
171+
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;">
172+
173+
<!-- ✅ 推薦者政策 -->
174+
<meta name="referrer" content="strict-origin-when-cross-origin">
175+
176+
<!-- ✅ 瀏覽器兼容性 -->
177+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
178+
```
179+
180+
---
181+
182+
## 🎯 品質檢查標準
183+
184+
### 每日必檢項目
185+
186+
```yaml
187+
HTML_Quality_Checklist:
188+
document_structure:
189+
- DOCTYPE html 聲明正確
190+
- lang 屬性設置為 zh-TW
191+
- charset 設為 utf-8 且位於最前面
192+
- viewport 設置正確且位於 charset 後面
193+
194+
meta_tags_validation:
195+
- title 長度 50-60 字符
196+
- description 長度 120-160 字符
197+
- keywords 數量 ≤ 10 個，相關性高
198+
- robots 指令正確設置
199+
200+
open_graph_validation:
201+
- 所有必要 og 標籤存在
202+
- og:image 尺寸為 1200x630
203+
- og:url 使用標準化 URL
204+
- og:locale 設置正確
205+
206+
twitter_cards_validation:
207+
- card 類型設為 summary_large_image
208+
- 圖片符合 Twitter 規範
209+
- 描述長度適中
210+
211+
pwa_optimization:
212+
- 所有 Apple 專用標籤設置
213+
- Android 主題色彩正確
214+
- manifest.json 連結存在
215+
```
216+
217+
### 自動化驗證腳本
218+
219+
```bash
220+
#!/bin/bash
221+
# HTML 標準驗證腳本
222+
223+
echo "🔧 開始 HTML 標準驗證..."
224+
225+
# 1. HTML 語法驗證
226+
html-validate index.html
227+
228+
# 2. Meta 標籤檢查
229+
echo "✅ 檢查必要 Meta 標籤..."
230+
if grep -q 'charset="utf-8"' index.html; then
231+
echo "✓ Charset 設置正確"
232+
else
233+
echo "✗ 缺少 charset 設置"
234+
fi
235+
236+
# 3. Open Graph 驗證
237+
echo "✅ 檢查 Open Graph 標籤..."
238+
if grep -q 'property="og:' index.html; then
239+
echo "✓ Open Graph 標籤存在"
240+
else
241+
echo "✗ 缺少 Open Graph 標籤"
242+
fi
243+
244+
# 4. Title 長度檢查
245+
TITLE_LENGTH=$(grep -o '<title>[^<]*' index.html | cut -d'>' -f2 | wc -c)
246+
if [ $TITLE_LENGTH -ge 50 ] && [ $TITLE_LENGTH -le 60 ]; then
247+
echo "✓ Title 長度適中 ($TITLE_LENGTH 字符)"
248+
else
249+
echo "⚠ Title 長度需調整 ($TITLE_LENGTH 字符)"
250+
fi
251+
252+
echo "🎯 HTML 標準驗證完成"
253+
```
254+
255+
---
256+
257+
## 📏 字符長度標準
258+
259+
### SEO 關鍵標籤長度限制
260+
261+
```yaml
262+
Character_Length_Standards:
263+
title:
264+
min: 50
265+
max: 60
266+
optimal: 55
267+
note: "包含品牌名稱和主要關鍵字"
268+
269+
meta_description:
270+
min: 120
271+
max: 160
272+
optimal: 155
273+
note: "包含行動呼籲和主要關鍵字"
274+
275+
meta_keywords:
276+
max_count: 10
277+
note: "相關性高於數量"
278+
279+
og_title:
280+
max: 95
281+
note: "Facebook 顯示限制"
282+
283+
og_description:
284+
min: 65
285+
max: 90
286+
note: "Facebook 預覽最佳長度"
287+
288+
twitter_title:
289+
max: 70
290+
note: "Twitter 卡片顯示限制"
291+
```
292+
293+
---
294+
295+
## 🚀 效能優化標準
296+
297+
### Core Web Vitals 目標
298+
299+
```yaml
300+
Performance_Targets:
301+
LCP: "< 2.5 秒"
302+
FID: "< 100 毫秒"
303+
CLS: "< 0.1"
304+
TTFB: "< 800 毫秒"
305+
306+
Resource_Optimization:
307+
html_size: "< 100KB"
308+
critical_css: "< 14KB (內聯)"
309+
meta_tags_count: "< 50 個"
310+
head_size: "< 50KB"
311+
```
312+
313+
### 最佳實踐清單
314+
315+
```html
316+
<!-- ✅ 資源載入順序優化 -->
317+
<head>
318+
<!-- 1. 基礎設置 (最高優先級) -->
319+
<meta charset="utf-8">
320+
<meta name="viewport" content="width=device-width, initial-scale=1">
321+
322+
<!-- 2. SEO 標籤 -->
323+
<title>頁面標題</title>
324+
<meta name="description" content="頁面描述">
325+
326+
<!-- 3. 社交媒體標籤 -->
327+
<meta property="og:title" content="...">
328+
329+
<!-- 4. 資源預載 -->
330+
<link rel="preload" href="critical.css" as="style">
331+
332+
<!-- 5. 樣式表 -->
333+
<link rel="stylesheet" href="style.css">
334+
335+
<!-- 6. 結構化數據 -->
336+
<script type="application/ld+json">...</script>
337+
338+
<!-- 7. 其他資源 -->
339+
</head>
340+
```
341+
342+
---
343+
344+
## 🛠️ 故障排除指南
345+
346+
### 常見問題與解決方案
347+
348+
#### 問題 1: Meta 標籤不被識別
349+
350+
**症狀**: Google Search Console 顯示缺少 description
351+
**原因**: Meta 標籤語法錯誤或位置不當
352+
**解決方案**:
353+
```html
354+
<!-- ❌ 錯誤寫法 -->
355+
<meta name=description content=遊戲描述>
356+
357+
<!-- ✅ 正確寫法 -->
358+
<meta name="description" content="遊戲描述">
359+
```
360+
361+
#### 問題 2: Open Graph 圖片不顯示
362+
363+
**症狀**: Facebook 分享時無預覽圖
364+
**原因**: 圖片尺寸或格式不符合規範
365+
**解決方案**:
366+
```html
367+
<!-- ✅ 正確的圖片設置 -->
368+
<meta property="og:image" content="https://domain.com/image.jpg">
369+
<meta property="og:image:width" content="1200">
370+
<meta property="og:image:height" content="630">
371+
<meta property="og:image:alt" content="圖片描述">
372+
```
373+
374+
#### 問題 3: PWA 不能正常安裝
375+
376+
**症狀**: 瀏覽器不顯示安裝提示
377+
**原因**: PWA meta 標籤設置不完整
378+
**解決方案**:
379+
```html
380+
<!-- ✅ 完整的 PWA 設置 -->
381+
<meta name="mobile-web-app-capable" content="yes">
382+
<meta name="apple-mobile-web-app-capable" content="yes">
383+
<link rel="manifest" href="/manifest.json">
384+
```
385+
386+
---
387+
388+
**文檔維護**: 鐵漢阿強 (Iron Man Strong)
389+
**最後更新**: 2025-08-17T01:57:37+08:00
390+
**下次檢視**: 2025-08-24T01:57:37+08:00
391+
**版本控制**: Git 追蹤所有變更

0 commit comments

Comments
 (0)