1 hr / week 每週 1 小時

SEO & Web Analytics
Learning Roadmap SEO 與網站分析
學習路線圖

From zero accounts to a live monitored website. Click any phase to see the detail. 從零開始建立帳號，到擁有一個持續監測的網站。點擊任何階段查看詳情。

Phase 1

Create All Accounts建立所有帳號

Week 1第 1 週
→
Phase 2

Niche & Keyword Research利基定位與關鍵字研究

Week 2第 2 週
→
Phase 3

Site Design & Planning網站設計與規劃

Week 3第 3 週
→
Phase 4

Build the Homepage建立首頁

Week 4第 4 週
→
Phase 5

Build Remaining Pages建立其餘頁面

Week 5第 5 週
→
Phase 6

Deploy & Verify部署與驗證

Week 6第 6 週
→
Phase 7

Install PostHog & GA4安裝 PostHog 與 GA4

Week 7第 7 週
→
Phase 8

Meta Pixel & Site AuditMeta Pixel 與網站審查

Week 8第 8 週
→
Phase 9

Link GA4 to Ads & Final Checks連結 GA4 至廣告及最終檢查

Week 9第 9 週
→
Phase 10

Monitor, Analyze & Iterate監測、分析與持續優化

Week 10+第 10 週起
→
P1

Create All Accounts建立所有帳號

Week 1第 1 週
💡 Before signing up for anything, take a moment to understand what each tool does and why you are using it. This makes the setup steps much easier to remember. 在開始註冊之前，先花一點時間了解每個工具的功能及使用原因，這樣會讓設定步驟更容易記住。

Google SuiteGoogle 系列

  • Create a new Gmail address — this unlocks all other Google services automatically建立新的 Gmail 地址 — 自動開通所有其他 Google 服務
  • Access Gemini via the Google account — AI assistant for content and analysis透過 Google 帳號使用 Gemini — 用於內容創作與數據分析的 AI 助手
  • Sign up for Google Analytics 4 — tracks website traffic and sessions註冊 Google Analytics 4 — 追蹤網站流量及使用者工作階段
  • Sign up for Google Search Console — tracks keywords and search rankings註冊 Google Search Console — 追蹤關鍵字排名及搜尋表現
  • Create Google Ads account — needed for free Keyword Planner access. Skip all campaign setup prompts.建立 Google Ads 帳號 — 免費使用關鍵字規劃工具所需。跳過所有廣告活動設定提示。

Meta SuiteMeta 系列

  • Create a Facebook personal account first — required before anything else先建立 Facebook 個人帳號 — 其他所有步驟的前提
  • Create a Facebook Page under the personal account (niche brand page)在個人帳號下建立 Facebook 專頁（利基品牌專頁）
  • Create an Instagram account and link it to the FB Page建立 Instagram 帳號並連結至 Facebook 專頁
  • Create a Threads account (linked via Instagram)建立 Threads 帳號（透過 Instagram 連結）
  • Set up Meta Business Manager and connect FB Page + IG to it設定 Meta Business Manager 並連結 Facebook 專頁與 Instagram

Analytics & SEO Tools分析與 SEO 工具

AI ToolsAI 工具

  • Gemini — already available via Google account, no separate signup neededGemini — 透過 Google 帳號即可使用，無需另行註冊
  • Manus — sign up at manus.im, used for data analysis and content writingManus — 在 manus.im 註冊，用於數據分析及內容創作
Week 1 Output: Every core account created and accessible. Master tracker spreadsheet filled in. Screenshots taken for each dashboard. For CN platforms — register Xiaohongshu now. WeChat 公眾號, Weibo, Douyin, Zhihu, and Baidu can be set up when ready with the right phone number. 第 1 週成果：所有核心帳號建立完畢並可正常登入。帳號總覽表已填寫完成。每個儀表板已截圖存檔。中國平台方面——現在先完成小紅書的註冊；微信公眾號、微博、抖音、知乎及百度可於準備好合適電話號碼後再行設定。

Account Management Tips帳號管理技巧

# Tip技巧 How to Do It如何執行 Tool / Resource工具／資源
1
Dedicated registration email專用註冊電郵
Create one Gmail address used only for platform signups. 建立一個專門用於平台註冊的 Gmail 地址，不要與個人郵件混用。 		Name it something like [email protected]. All verification emails and platform notifications go here.命名方式如 [email protected]，所有驗證郵件及平台通知均發送至此。 Gmail — created in this phaseGmail — 本階段建立
2
Master account tracker帳號總覽表
One spreadsheet logging every account — platform, login email, username, URL, date, verification method. 用一張試算表記錄所有帳號資料：平台、登入郵件、用戶名、網址、建立日期、驗證方式。 		Create a Google Sheet with these columns and fill it in as you register each account. Share with your trainer for review.建立 Google 試算表並在每次註冊後即時填寫。完成後分享給培訓導師審閱。 Google Sheets
3
Password manager密碼管理工具
Never reuse passwords. Use a password manager from day one. 切勿重複使用密碼。從第一天起就使用密碼管理工具。 		Install Bitwarden (free, open source) or use Google Password Manager built into Chrome. Store the master password offline in a safe place.安裝 Bitwarden（免費開源）或使用 Chrome 內建的 Google 密碼管理員。主密碼須另行離線保存於安全地方。 Bitwarden (free) · Google Password Manager（免費）· Google 密碼管理員
4
Consistent brand identity統一品牌形象
Use the same username, profile photo, bio, and website URL across every platform. 在所有平台使用相同的用戶名、頭像、簡介及網站連結。 		Before registering, decide on your brand handle, a square profile photo, and a 150-character bio. Copy-paste these into every platform.在開始註冊前，先確定品牌名稱、方形頭像及 150 字以內的簡介，然後複製貼上到每個平台。 Namecheckr — check username across all platforms同時檢查各平台用戶名是否可用
5
Dedicated browser profile專用瀏覽器個人檔案
Use one separate Chrome profile exclusively for all platform accounts. 建立一個專用的 Chrome 個人檔案，專門用於所有平台帳號。 		In Chrome, click your profile icon → Add → create a profile named "SEO Work". Log into all platforms only inside this profile.在 Chrome 點擊個人檔案圖示 → 新增 → 建立名為「SEO Work」的個人檔案，所有平台登入均在此進行。 Chrome Profiles — built into Chrome, freeChrome 個人檔案 — Chrome 內建，免費
6
Bookmark folder structure書籤資料夾結構
Organise all dashboards into Chrome bookmark folders for one-click access. 將所有儀表板整理到 Chrome 書籤資料夾，方便一鍵開啟。 		Create a "SEO Roadmap" bookmark folder with subfolders: Google Tools / Meta Tools / Analytics / SEO Tools / CN Platforms. Bookmark each dashboard immediately after registering.建立「SEO Roadmap」書籤資料夾，並設子資料夾：Google 工具 / Meta 工具 / 分析工具 / SEO 工具 / 中國平台。每次完成帳號後立即加入書籤。 Chrome Bookmarks — freeChrome 書籤 — 免費
7
Link accounts early儘早連結帳號
Connect all platforms that can talk to each other while accounts are fresh. 趁帳號剛建立時，儘快將可互相連結的平台連接起來。 		Priority connections: GA4 → GSC, FB Page → IG → Business Manager, Ahrefs → GSC, GA4 → Google Ads. Tick each off in your master tracker.優先連結：GA4 → GSC、FB 專頁 → IG → Business Manager、Ahrefs → GSC、GA4 → Google Ads。完成後在帳號總覽表打勾記錄。 Done inside each platform's admin panel在各平台的管理後台完成
8
Record verification methods記錄驗證方式
Note which verification method (HTML tag, file upload, DNS) was used for each platform. 記錄每個平台所使用的驗證方式（HTML 標籤、檔案上傳、DNS）。 		Add a "Verification Method" column to your master tracker. You will need this if you redeploy or migrate the site later.在帳號總覽表新增「驗證方式」欄位。日後重新部署或遷移網站時需要此資料。 Google Sheets master trackerGoogle 試算表帳號總覽表
9
Asset naming convention檔案命名規則
Use a consistent file naming format for screenshots and verification files from day one. 從第一天起統一使用一致的檔案命名格式來儲存截圖及驗證檔案。 		Format: [platform]_[type]_[YYYYMMDD]. Example: google_analytics_screenshot_20250101.png. Store everything in Google Drive.格式：[平台]_[類型]_[YYYYMMDD]。例如：google_analytics_screenshot_20250101.png。所有檔案存放於 Google Drive。 Google Drive — free 15GB免費 15GB
10
Weekly calendar reminder每週行事曆提醒
Set a fixed weekly reminder for the Phase 10 monitoring ritual before the habit slips. 現在就設定每週固定提醒，避免第 10 階段的監測習慣中斷。 		Create a recurring Monday event titled "SEO Weekly Review" with the five tools listed as the description. Set it now, not in week 10.建立每週一的重複行事曆事件「SEO 每週審查」，並在備註列出五個工具。現在設定，不要等到第 10 週才做。 Google Calendar — free免費

Before You Register — Tips & Common Problems開始前的注意事項與常見問題

Topic主題 What to Know須知 Problem問題 Solution解決方案
Network (HK)網絡（香港）
 HK internet is open — Google, Meta, and all global tools are fully accessible without a VPN.香港網絡開放，Google、Meta 及所有全球工具均可直接存取，無需 VPN。 Office or school networks may block signup pages or slow down SMS verification公司或學校網絡可能封鎖部分註冊頁面或減慢短訊驗證速度 Use personal mobile data when registering accounts for the first time — more reliable for SMS codes.首次註冊帳號時使用個人流動數據，短訊驗證碼接收更穩定。
Network (CN platforms)網絡（中國平台）
 CN platforms are accessible from HK but some features may be slow depending on your ISP.中國平台在香港可正常存取，但部分功能速度因網絡供應商而有所不同。 Baidu or Douyin loads slowly or shows errors on certain HK networks百度或抖音在部分香港網絡下載入緩慢或出現錯誤 Switch to mobile data. Do NOT use a VPN when registering CN accounts — it triggers fraud detection and can get your account banned.切換至流動數據。註冊中國平台帳號時切勿使用 VPN，否則會觸發防欺詐機制導致帳號被封。
Username用戶名
Naming strategy命名策略
 Your username is often permanent and public. Choose something consistent across all platforms.用戶名通常永久公開，應在所有平台使用一致的名稱。 Chosen username already taken across multiple platforms心儀的用戶名已被其他人在多個平台使用 Check availability first at Namecheckr.com. Add a short suffix if needed — e.g. yourbrand_hk.先到 Namecheckr.com 檢查可用性。如需要可加上後綴，例如 yourbrand_hk。
Username用戶名
What to avoid避免事項
 Avoid personal name, birth year, or phone number in usernames.避免在用戶名中使用個人姓名、出生年份或電話號碼。 Username contains personal info (e.g. john1990)用戶名包含個人資料（例如 john1990） Use your niche brand name instead. Keep it short and avoid special characters that some platforms reject.改用利基品牌名稱，保持簡短並避免部分平台不接受的特殊字符。
Password密碼
 You will create 15+ accounts this week. Never reuse the same password across platforms.本週將建立 15 個以上帳號，切勿在不同平台重複使用相同密碼。 Forgot which password was used for which account忘記哪個帳號使用了哪個密碼 Use Bitwarden or Google Password Manager. Store all credentials from day one.使用 Bitwarden 或 Google 密碼管理員，從第一天起記錄所有登入資料。
Phone Number電話號碼
SMS verification短訊驗證
 Most platforms require SMS verification. Use one consistent HK number across all global platforms.大多數平台需要短訊驗證，全球平台均使用同一個香港號碼。 SMS code not received or expired before entering未收到短訊驗證碼或輸入前已過期 Codes expire in 60–120 seconds. Have the form ready before requesting. Wait 60 seconds before requesting again if it fails.驗證碼有效期為 60–120 秒，請求前先準備好填寫表格。若失敗，等待 60 秒後再重新獲取。
Phone Number電話號碼
CN platforms中國平台
 HK numbers (+852) are blocked from Baidu, Douyin, and Zhihu. These require a mainland +86 number.香港號碼（+852）無法在百度、抖音及知乎完成註冊，需要中國大陸號碼（+86）。 Registration shows "暫不支持港澳台地區注冊"顯示「暫不支持港澳台地區注冊」 Purchase a CN SIM card — available at Sham Shui Po or Lo Wu. Use it only for SMS verification.購買中國大陸 SIM 卡，可在深水埗或羅湖購買，只用作短訊驗證。
Email電郵
 Use one dedicated Gmail for all registrations. Keep it separate from personal email.所有平台均使用同一個專用 Gmail 地址，與個人郵件分開。 Verification email lands in spam or promotions folder驗證郵件落入垃圾郵件或推廣郵件資料夾 Check the Promotions tab in Gmail. Mark the first email from each platform as "Not Spam".查看 Gmail 的「推廣內容」標籤，並將每個平台的第一封郵件標記為「非垃圾郵件」。
Two-Factor Auth雙重驗證
 Enable 2FA on all accounts immediately after creation, especially Google and Meta.建立所有帳號後立即啟用雙重驗證，尤其是 Google 和 Meta 帳號。 Locked out because 2FA device is lost or changed因更換裝置或遺失裝置而無法登入 Save the backup codes provided when setting up 2FA. Use Google Authenticator or Authy rather than SMS-only 2FA.設定雙重驗證時保存備用代碼，建議使用 Google Authenticator 或 Authy，而非僅依賴短訊驗證。
Meta Account ReviewMeta 帳號審查
 New Facebook accounts can be flagged if they immediately set up business features.全新 Facebook 帳號若立即設定商業功能，可能被標記審查。 Meta asks for ID verification or restricts the account after setupMeta 要求身份驗證或設定後帳號被限制 Complete your personal Facebook profile (photo, basic info) before creating a Page or Business Manager.建立專頁或 Business Manager 前，先完善個人 Facebook 資料（頭像、基本資料）。
Google AdsGoogle Ads
 Google pushes you to create a paid campaign during signup. You only need the account for Keyword Planner.Google 在註冊過程中會引導你建立付費廣告，但你只需要帳號以使用關鍵字規劃工具。 Accidentally started a campaign or entered billing info不小心開始了廣告活動或輸入了帳單資料 Click "Switch to Expert Mode" at the bottom of the setup screen to skip campaign creation and access Keyword Planner for free.在設定頁面底部點擊「切換至專家模式」，跳過廣告活動建立步驟，免費使用關鍵字規劃工具。
WeChat 公眾號WeChat 公眾號
 HK entities can register a WeChat Service Account using HK Business Registration docs. Annual fee USD $99.香港公司可使用香港商業登記文件申請 WeChat 服務號，年費 99 美元。 Registration rejected at document verification step文件驗證步驟被拒絕 Ensure all uploaded documents have exactly matching business names. Registration is in Chinese — seek help if needed. Approval takes 1–2 weeks.確保所有上傳文件的公司名稱完全一致。註冊介面為中文，如有需要可尋求協助。審批需時 1–2 週。

Registration Requirements — All Platforms各平台註冊要求

Platform平台 Type類型 HK Registration香港可否註冊 Requirement要求 Difficulty難度 Roadmap路線圖
Gmail
Google Account
 Search / Email搜尋 / 電郵 ✅ Email + phone number電郵地址 + 電話號碼 Easy簡單 Core
Google Analytics 4
GA4
 Analytics分析 ✅ Google account required. Free.需要 Google 帳號，免費。 Easy簡單 Core
Google Search Console
GSC
 SEO ✅ Google account + live website to verifyGoogle 帳號 + 已上線網站以完成驗證 Easy簡單 Core
Google Ads
Keyword Planner
 Ads / SEO Tool廣告 / SEO 工具 ✅ Google account. No spend needed — skip campaign setup.Google 帳號。無需付費，跳過廣告活動設定。 Easy簡單 Core
Gemini
 AI ToolAI 工具 ✅ Included with Google account.Google 帳號已包含，無需另行註冊。 Easy簡單 Core
Facebook
Personal + Page
 Social社交媒體 ✅ Email + phone. Personal account first, then create Page.電郵 + 電話。先建立個人帳號，再建立專頁。 Easy簡單 Core
Instagram
 Social社交媒體 ✅ Email or phone. Link to FB Page after creation.電郵或電話。建立後連結至 Facebook 專頁。 Easy簡單 Core
Threads
 Social社交媒體 ✅ Instagram account required.需要 Instagram 帳號。 Easy簡單 Core
Meta Business Manager
 Ad Platform廣告平台 ✅ Facebook personal account first. Connect Page + IG inside.需先有 Facebook 個人帳號，再連結專頁與 Instagram。 Easy簡單 Core
PostHog
 Analytics分析 ✅ Email signup. Free cloud plan.電郵註冊，免費雲端方案。 Easy簡單 Core
Similarweb
 Competitive Research競爭研究 ✅ Email signup. Free tier.電郵註冊，免費方案。 Easy簡單 Core
Ahrefs Webmaster Tools
 SEO ✅ Email signup now. Site verification in Phase 6.現在先以電郵註冊，網站驗證於第 6 階段進行。 Easy簡單 Core
Ubersuggest
 SEO / KeywordSEO / 關鍵字 ✅ Email signup. Free tier.電郵註冊，免費方案。 Easy簡單 Core
Screaming Frog
 SEO AuditSEO 審查 ✅ Desktop app. No account needed. Free up to 500 URLs.桌面應用程式，無需帳號，免費版支援最多 500 個網址。 Easy簡單 Core
Surfer SEO Keyword Surfer
 Chrome ExtensionChrome 擴充功能 ✅ Chrome extension install. No account needed.安裝 Chrome 擴充功能，無需帳號。 Easy簡單 Core
Manus
 AI ToolAI 工具 ✅ Email signup at manus.im. Free tier.在 manus.im 以電郵註冊，免費方案。 Easy簡單 Core

CN Region — Recommended to Register中國地區 — 建議註冊

🇨🇳 The platforms below are recommended if you plan to reach Chinese-speaking audiences. They are not part of the core roadmap tasks. Some require a mainland China phone number — a CN SIM card purchased in HK (Sham Shui Po / Lo Wu) is the easiest workaround. 若計劃觸及中文用戶，建議註冊以下平台。這些平台不屬於核心路線圖任務。部分平台需要中國大陸電話號碼，可在香港深水埗或羅湖購買中國大陸 SIM 卡作為解決方案。
Platform平台 Equivalent對應平台 HK Can Register?香港可否註冊 Requirement要求 Difficulty難度
小紅書 Xiaohongshu
REDnote
 Instagram + Pinterest ✅ Yes可以 HK phone number works. No Chinese ID needed for personal account.香港電話號碼可用，個人帳號無需中國身份證。 Easy簡單
微信公眾號 WeChat
Official Account
 Facebook Page ⚠️ Conditional有條件 HK-registered business + documents required. Annual fee USD $99. Service Account only — not Subscription Account.需要香港已登記公司及相關文件，年費 99 美元。只可申請服務號，不可申請訂閱號。 Medium中等
微博 Weibo
 Twitter / X ⚠️ Limited有限制 Personal account possible with HK number but real-name verification for full features requires a CN ID.香港號碼可建立個人帳號，但完整功能的實名認證需要中國大陸身份證。 Medium中等
抖音 Douyin
 TikTok (CN version)（中國版） ❌ Hard困難 Requires mainland China phone number. HK numbers blocked. CN SIM card is the only workaround.需要中國大陸電話號碼，香港號碼不支援。唯一解決方案是使用中國大陸 SIM 卡。 Hard困難
知乎 Zhihu
 Quora ❌ Hard困難 Requires mainland China phone number for SMS verification.需要中國大陸電話號碼進行短訊驗證。 Hard困難
百度 Baidu
Webmaster Tools + Analytics
 Google (Search + Analytics)（搜尋 + 分析） ❌ Hard困難 Direct HK registration blocked — shows "暫不支持港澳台地區注冊". CN SIM workaround required.香港直接註冊不支援，顯示「暫不支持港澳台地區注冊」，需使用中國大陸 SIM 卡。 Hard困難

Links & Resources連結與資源

Create Gmail Account
Start here. One Google account unlocks Analytics, GSC, Ads, and Gemini.從這裡開始。一個 Google 帳號即可使用 Analytics、GSC、Ads 及 Gemini。
Guide
GA4 Setup Guide
Official Google guide to creating your first GA4 property.Google 官方指南，教你建立首個 GA4 資源。
Google Search Console
Free tool showing which keywords bring visitors to your site.免費工具，顯示哪些關鍵字為你的網站帶來訪客。
Google Ads (Keyword Planner)
Create account to access Keyword Planner. No ad spend needed.建立帳號以使用關鍵字規劃工具，無需廣告費用。
Create Facebook Page
Brand page for your niche site. Required before Business Manager.為你的利基網站建立品牌專頁，設定 Business Manager 前必須完成。
Meta Business Manager
Central hub connecting FB Page, Instagram, and Meta Pixel.連結 Facebook 專頁、Instagram 及 Meta Pixel 的管理中心。
PostHog
Free tier includes session recordings, heatmaps, and event tracking.免費方案包含工作階段錄影、熱點圖及事件追蹤。
Similarweb
Free tier shows competitor traffic estimates and top sources.免費方案顯示競爭對手流量估算及主要流量來源。
Ahrefs Webmaster Tools
Free for verified site owners. Backlinks, crawl errors, keyword data.已驗證網站擁有者免費使用。反向連結、爬取錯誤、關鍵字數據。
Tool
Screaming Frog SEO Spider
Free desktop crawler up to 500 URLs.免費桌面爬蟲工具，支援最多 500 個網址。
Tool
Surfer SEO Keyword Surfer
Free Chrome extension. Shows search volume in Google results.免費 Chrome 擴充功能，直接在 Google 搜尋結果顯示搜尋量。
Ubersuggest
Free keyword ideas, search volume, and difficulty scores.免費提供關鍵字建議、搜尋量及難度分數。
Manus
AI agent for data analysis and content writing.用於數據分析及內容創作的 AI 助手。
Tool
Google Gemini
AI assistant via your Google account. No separate signup needed.透過 Google 帳號使用的 AI 助手，無需另行註冊。
Tool
Bitwarden
Free open-source password manager. Install before registering anything else.免費開源密碼管理工具，建議在註冊其他帳號前先安裝。
Tool
Namecheckr
Check your brand username availability across all platforms at once.一次檢查品牌用戶名在所有平台的可用性。
P2

Niche & Keyword Research利基定位與關鍵字研究

Week 2第 2 週
💡 If you are unsure what niche to pick, here are some easy starting points: local food guide, hobby reviews, travel diary, budget living tips, fitness for beginners. Pick one and move on — you can always refine it later. 如果不確定選擇哪個利基，以下是一些容易上手的方向：本地美食指南、興趣產品評測、旅遊日記、節省生活技巧、初學者健身。選定一個然後繼續推進——之後仍可調整。

Pick a Niche選定利基主題

  • Pick a topic based on personal interest — consistency is easier when you care about the subject選擇自己感興趣的主題 — 對主題有熱情才能持之以恆
  • Check the niche has real search volume using Ubersuggest before committing使用 Ubersuggest 確認該主題有真實搜尋量，再作決定
  • Avoid niches that are too broad (e.g. "fitness") or too narrow (e.g. "left-handed golfers in Mong Kok")避免主題過於廣泛（如「健身」）或過於狹窄（如「旺角左撇子高爾夫球手」）

Competitor Research with Similarweb使用 Similarweb 進行競爭對手研究

  • Find 2–3 existing sites in the same niche找出同一利基領域的 2–3 個現有網站
  • Use Similarweb to check their monthly traffic, top sources, and top pages使用 Similarweb 查看其每月流量、主要流量來源及熱門頁面
  • Identify what content is working for them — this informs your own plan了解哪些內容對他們有效 — 為自己的內容規劃提供參考

Keyword Research關鍵字研究

Week 2 Output: One-page brief — niche topic, 5–10 target keywords with search volume, 2–3 competitor sites noted, rough 5-page site plan. 第 2 週成果：完成一頁簡報 — 利基主題、5–10 個目標關鍵字及搜尋量、2–3 個競爭對手網站，以及粗略的 5 頁網站規劃。

Links & Resources連結與資源

Tool
Google Keyword Planner
Free inside Google Ads. Find search volume and keyword ideas.Google Ads 內免費使用，查找搜尋量及關鍵字建議。
Guide
Ahrefs: Keyword Research for Beginners
Plain-English guide to finding and picking the right keywords.淺白易懂的關鍵字研究入門指南。
Tool
Ubersuggest
Enter any keyword to see volume, difficulty, and content ideas.輸入任何關鍵字，查看搜尋量、難度及內容靈感。
Guide
Similarweb: Competitor Analysis Guide
How to use Similarweb data to understand your competition.如何利用 Similarweb 數據了解競爭對手。
P3

Site Design & Planning網站設計與規劃

Week 3第 3 週
💡 Before writing any code, pick a design reference from the resources below. This is your blueprint — it removes guesswork and keeps your design consistent throughout the build. 在編寫任何程式碼之前，先從下方資源中選擇一個設計參考。這是你的藍圖——能消除猜測，並讓設計在整個開發過程中保持一致。

Choose a Design Reference選擇設計參考

  • Browse the design reference sites below — screenshot 1–2 designs you like瀏覽下方設計參考網站，截圖儲存 1–2 個你喜歡的設計
  • Note what appeals: layout, colours, font style, section structure記下吸引你的元素：版面、色彩、字型風格、版塊結構
  • Keep it realistic — pick something achievable with plain HTML and Tailwind保持務實 — 選擇可用純 HTML 和 Tailwind 實現的設計

Plan the Site Structure規劃網站結構

  • 5 pages: Home, About, and 3 content pages — one per target keyword5 個頁面：首頁、關於我們，以及 3 個內容頁面，各針對一個目標關鍵字
  • Sketch a rough wireframe on paper for each page用紙筆為每個頁面畫出粗略的線框圖
  • Plan navigation: what goes in the header, what links where規劃導航：標題欄放什麼，各連結指向哪裡

Draft Content with AI使用 AI 起草內容

  • Use Manus or Gemini to draft copy for each page based on the target keyword使用 Manus 或 Gemini 根據目標關鍵字為每個頁面起草文案
  • Keep prompts simple: "Write a 200-word intro for a page about [keyword] for a niche blog"提示詞保持簡單：「為一個關於 [關鍵字] 的利基部落格頁面撰寫 200 字引言」
  • Review and personalise the output — AI drafts need a human voice審閱並個人化 AI 生成的內容——AI 草稿需要加入人性化語氣

HTML + Tailwind IntroHTML + Tailwind 入門

  • Install VS Code — free code editor, no experience needed安裝 VS Code — 免費程式碼編輯器，無需任何經驗
  • Create a single index.html file with Tailwind loaded via CDN — no build tools needed建立單一 index.html 檔案，透過 CDN 載入 Tailwind — 無需任何建置工具
  • Practice: build a simple card and a navigation bar using Tailwind classes only練習：只使用 Tailwind 類別建立一個簡單卡片和導航欄
Week 3 Output: Design reference screenshot saved, wireframe for all 5 pages, AI-drafted copy for each page, working HTML file with Tailwind loaded and one practice component built. 第 3 週成果：設計參考截圖已儲存，5 個頁面的線框圖已完成，每個頁面的 AI 草稿文案已準備，Tailwind 已載入的 HTML 檔案及一個練習元件已建立。

Design Reference Sites設計參考網站

Tool
Godly.website
Curated gallery of well-designed websites.精選優質網站設計畫廊。
Tool
UIUX Pro Max
Design inspiration for clean, modern UI.簡潔現代介面設計靈感。
Tool
One Page Love
Gallery of single-page website designs.單頁網站設計畫廊。
Tool
Leadpages Templates
Professional landing page templates sorted by newest.按最新排序的專業著陸頁模板。
Tool
Wix Studio Templates
Wide range of polished templates across niches.各種利基的精美網站模板。
Tool
Salient Prebuilt Websites
Full prebuilt site designs with rich sections.包含豐富版塊的完整預建網站設計。
Tool
VS Code
Free code editor by Microsoft. Best for beginners.微軟出品的免費程式碼編輯器，最適合初學者。
Guide
Tailwind via CDN
Add one script tag to use Tailwind — no setup needed.加入一行 script 標籤即可使用 Tailwind，無需任何設定。
P4

Build the Homepage建立首頁

Week 4第 4 週
💡 Start with index.html only. Do not touch other pages yet. Focus on getting the homepage to match your design reference as closely as possible before moving on. 只從 index.html 開始，暫時不要碰其他頁面。專注讓首頁盡量貼近設計參考，再繼續下一步。

Build index.html建立 index.html

  • Start with the navigation bar — it will be reused on every page so build it first從導航欄開始——每個頁面都會用到，所以先建立好
  • Add the hero section — headline, subheadline, and a call-to-action button加入主視覺版塊——標題、副標題及行動呼籲按鈕
  • Add one content block below the hero using the drafted copy from Phase 3在主視覺下方加入一個內容版塊，使用第 3 階段起草的文案
  • Add a footer with basic links加入包含基本連結的頁尾
  • Use Tailwind utility classes throughout — no custom CSS needed at this stage全程使用 Tailwind 工具類別——此階段無需自訂 CSS

SEO Basics on the Homepage首頁基本 SEO 設定

  • Add a descriptive <title> tag containing your primary keyword加入包含主要關鍵字的描述性 <title> 標籤
  • Add a <meta name="description"> tag — 150 characters summarising the page加入 <meta name="description"> 標籤——以 150 字概括頁面內容
  • Make sure the H1 contains the primary keyword naturally確保 H1 標題自然地包含主要關鍵字
Week 4 Output: Completed index.html with nav, hero, content block, and footer. Title tag and meta description added. Matches the design reference visually. 第 4 週成果：完成包含導航欄、主視覺、內容版塊及頁尾的 index.html，已加入 title 標籤及 meta description，視覺效果與設計參考相符。

Links & Resources連結與資源

Guide
Tailwind via CDN
One script tag to add Tailwind — no install needed.一行 script 標籤即可使用 Tailwind，無需安裝。
Guide
Google: Title Tag Best Practices
How to write title tags that rank well and attract clicks.如何撰寫有助排名及吸引點擊的 title 標籤。
Guide
Google: Meta Description Guide
How to write meta descriptions for search results.如何撰寫出現在搜尋結果的 meta description。
Tool
Manus
Ask Manus to help write or improve your title tags and meta descriptions.請 Manus 協助撰寫或改善 title 標籤及 meta description。
P5

Build Remaining Pages建立其餘頁面

Week 5第 5 週
💡 Copy the homepage structure as the starting point for each new page. Change the content and keyword focus, keep the layout and navigation identical. 以首頁結構為基礎建立每個新頁面，更換內容和關鍵字重點，保持版面和導航一致。

Build about.html + 3 Content Pages建立 about.html 及 3 個內容頁面

  • Create about.html — who you are, what the site is about, why you created it建立 about.html — 介紹自己、網站主題及建立原因
  • Create 3 content pages, one per target keyword from Phase 2建立 3 個內容頁面，各針對第 2 階段的一個目標關鍵字
  • Each content page: H1 with keyword, 300+ words, internal links to other pages每個內容頁面：包含關鍵字的 H1、300 字以上內容、連結至其他頁面的內部連結
  • Copy the nav and footer from index.html — keep them identical across all pages複製 index.html 的導航欄和頁尾，保持所有頁面一致

SEO on Each Page每個頁面的 SEO 設定

  • Each page must have a unique <title> tag and meta description每個頁面必須有獨特的 <title> 標籤及 meta description
  • Target keyword appears in the H1, first paragraph, and at least one subheading目標關鍵字出現在 H1、第一段落及至少一個子標題中
  • Add alt text to all images describing what the image shows為所有圖片加入描述圖片內容的 alt 文字
Week 5 Output: All 5 pages built. Each has a unique title, meta description, and keyword-focused content. Navigation works across all pages. 第 5 週成果：5 個頁面全部建立完成，各有獨特的 title、meta description 及以關鍵字為核心的內容，所有頁面導航正常運作。

Links & Resources連結與資源

Guide
Ahrefs: On-Page SEO Guide
Complete checklist for optimising each page.優化每個頁面的完整檢查清單。
Guide
Google: Image Alt Text Best Practices
How to write alt text for SEO and accessibility.如何撰寫有助 SEO 及可及性的 alt 文字。
Tool
Google Gemini
Expand or improve content based on target keywords.根據目標關鍵字擴展或改善頁面內容。
Tool
Manus
Generate content drafts and SEO suggestions.生成內容草稿及 SEO 建議。
P6

Deploy & Verify部署與驗證

Week 6第 6 週
💡 Cloudflare Pages deployment is drag and drop — you do not need any technical knowledge to get a live URL. Getting the site live is the most important milestone so far. Cloudflare Pages 部署只需拖放——無需任何技術知識即可獲得正式網址。讓網站上線是目前最重要的里程碑。

Deploy to Cloudflare Pages部署至 Cloudflare Pages

  • Sign up for a free Cloudflare account at pages.cloudflare.com在 pages.cloudflare.com 註冊免費 Cloudflare 帳號
  • Go to Pages → Create a project → Upload assets (drag and drop your folder)進入 Pages → 建立專案 → 上傳資產（拖放你的資料夾）
  • Site goes live instantly with a .cloudflare.dev URL網站即時以 .cloudflare.dev 網址上線
  • Optional: connect a custom domain if you have one可選：如有自訂網域可連結

Verify in Google Search Console在 Google Search Console 驗證

  • Add the live URL as a new property in Google Search Console在 Google Search Console 將正式網址新增為資源
  • Verify ownership via HTML tag — add one meta tag to index.html, redeploy透過 HTML 標籤驗證所有權——在 index.html 加入一個 meta 標籤後重新部署
  • Generate a sitemap.xml and upload to Cloudflare, then submit in GSC生成 sitemap.xml 並上傳至 Cloudflare，然後在 GSC 提交
  • Request indexing for the homepage under URL Inspection在網址審查工具中為首頁申請索引

Verify in Ahrefs Webmaster Tools在 Ahrefs Webmaster Tools 驗證

  • Log into Ahrefs and add your live site URL登入 Ahrefs 並新增正式網站網址
  • Verify ownership — same HTML tag method works驗證所有權——同樣使用 HTML 標籤方式
  • Backlink and crawl data starts collecting from this point反向連結及爬取數據從此時開始收集
Week 6 Output: Live website on Cloudflare Pages. Verified in GSC and Ahrefs. Sitemap submitted. Indexing requested. 第 6 週成果：網站已在 Cloudflare Pages 上線，已在 GSC 及 Ahrefs 完成驗證，Sitemap 已提交，已申請索引。

Links & Resources連結與資源

Cloudflare Pages
Free hosting. Drag and drop to get a live URL.免費靜態網站託管，拖放即可獲得正式網址。
Guide
Cloudflare Pages: Direct Upload Guide
Official step-by-step for drag and drop deployment.拖放部署的官方逐步指南。
Guide
GSC: Verify Your Site
How to verify ownership using an HTML tag.如何使用 HTML 標籤驗證網站所有權。
Tool
XML Sitemaps Generator
Free online tool to generate sitemap.xml in seconds.免費線上工具，數秒內生成 sitemap.xml。
Tool
Ahrefs Webmaster Tools
Verify your live site to start tracking backlinks.驗證正式網站以開始追蹤反向連結。
Guide
Google: Build and Submit a Sitemap
What a sitemap is and how to submit it to GSC.什麼是 Sitemap 及如何提交至 GSC。
P7

Install PostHog & GA4安裝 PostHog 與 GA4

Week 7第 7 週
💡 This week is mostly copying and pasting two script tags into your HTML head. PostHog tracks what users do on the page. GA4 tracks where they came from. Both are needed together. 本週主要是將兩段 script 標籤複製貼上到 HTML head。PostHog 追蹤用戶在頁面上的行為，GA4 追蹤流量來源，兩者需要同時使用。

Install PostHog安裝 PostHog

  • Log into PostHog → Project Settings → copy the JavaScript snippet登入 PostHog → 專案設定 → 複製 JavaScript 片段
  • Paste the snippet inside the <head> tag of every HTML page將片段貼入每個 HTML 頁面的 <head> 標籤內
  • Redeploy to Cloudflare Pages重新部署至 Cloudflare Pages
  • Visit the live site, then open PostHog Live Events — confirm your visit appears瀏覽正式網站後，開啟 PostHog 即時事件——確認你的造訪已記錄

Install GA4安裝 GA4

  • Google Analytics → Admin → Data Streams → copy the gtag.js snippetGoogle Analytics → 管理員 → 資料串流 → 複製 gtag.js 片段
  • Paste the snippet inside the <head> tag of every HTML page將片段貼入每個 HTML 頁面的 <head> 標籤內
  • Visit the live site, then open GA4 Realtime report — confirm your visit appears瀏覽正式網站後，開啟 GA4 即時報告——確認你的造訪已記錄
Week 7 Output: PostHog and GA4 both installed on every page and confirmed live in real-time dashboards. 第 7 週成果：PostHog 及 GA4 已安裝至每個頁面，並在即時儀表板確認數據正常流入。

Links & Resources連結與資源

Guide
PostHog: Add Snippet to HTML
Official guide to installing the PostHog snippet.PostHog 官方安裝指南。
Guide
PostHog: Session Replay Guide
How to watch user recordings to see where visitors scroll.如何觀看用戶錄影，了解訪客的瀏覽行為。
Guide
GA4: Add Tag to Website
Step-by-step for installing the GA4 tag manually.手動安裝 GA4 標籤的逐步指南。
Guide
GA4: Understanding Reports
Guide to reading GA4 reports — traffic, engagement, pages.閱讀 GA4 報告的指南——流量、互動及頁面數據。
P8

Meta Pixel & Site AuditMeta Pixel 與網站審查

Week 8第 8 週
💡 The Meta Pixel builds an audience from your visitors for future social campaigns. The Screaming Frog audit finds technical issues that could be hurting your SEO — fix them before they compound. Meta Pixel 將訪客建立成受眾，用於日後的社交廣告活動。Screaming Frog 審查能找出影響 SEO 的技術問題——及早修復，避免問題累積。

Install Meta Pixel安裝 Meta Pixel

Run Screaming Frog Audit執行 Screaming Frog 審查

  • Open Screaming Frog → enter the live URL → start crawl開啟 Screaming Frog → 輸入正式網址 → 開始爬取
  • Check for: broken links, missing title tags, missing meta descriptions, duplicate content檢查：失效連結、缺少的 title 標籤、缺少的 meta description、重複內容
  • Fix all issues found and redeploy to Cloudflare Pages修復所有發現的問題後重新部署至 Cloudflare Pages
  • Re-crawl to confirm all issues are resolved重新爬取以確認所有問題已解決
Week 8 Output: Meta Pixel installed and verified. Screaming Frog audit completed, all issues fixed, site redeployed. 第 8 週成果：Meta Pixel 已安裝並驗證，Screaming Frog 審查已完成，所有問題已修復，網站已重新部署。

Links & Resources連結與資源

Guide
Meta Pixel: Setup Guide
Official Meta guide to creating and installing a Pixel.Meta 官方建立及安裝像素指南。
Tool
Meta Pixel Helper (Chrome)
Verify your Pixel is firing correctly on each page.確認像素在每個頁面正確觸發。
Tool
Screaming Frog SEO Spider
Free desktop crawler for finding broken links and missing tags.免費桌面爬蟲，用於找出失效連結及缺少的標籤。
Guide
Screaming Frog: User Guide
How to read each report tab in Screaming Frog.如何閱讀 Screaming Frog 各報告標籤的數據。
P9

Link GA4 to Ads & Final Checks連結 GA4 至廣告及最終檢查

Week 9第 9 週
💡 This is the final setup week. After this, all tools are connected and collecting data. Use this week to also do a full check of the site before moving into the ongoing monitoring phase. 這是最後一個設定週。完成後所有工具均已連接並收集數據。本週同時對網站進行全面檢查，再進入持續監測階段。

Link GA4 to Google Ads連結 GA4 至 Google Ads

  • GA4 Admin → Product Links → Google Ads Links → Link AccountGA4 管理員 → 產品連結 → Google Ads 連結 → 連結帳號
  • Select the Google Ads account created in Phase 1選擇第 1 階段建立的 Google Ads 帳號
  • This enables conversion tracking and audience sharing此連結啟用轉換追蹤及受眾共享功能
  • No ad spend needed — just confirm the link status shows as Active無需廣告費用——只需確認連結狀態顯示為「已啟用」

Final Site Checks最終網站檢查

  • Visit every page and click every link — confirm nothing is broken瀏覽每個頁面並點擊所有連結——確認沒有失效連結
  • Check the site on mobile — does it look correct on a phone?在手機上檢查網站——顯示是否正確？
  • Confirm all 5 tools are collecting data: GSC, GA4, PostHog, Meta Pixel, Ahrefs確認所有 5 個工具正在收集數據：GSC、GA4、PostHog、Meta Pixel、Ahrefs
  • Check GSC Coverage report for any crawl errors查看 GSC 覆蓋範圍報告，確認沒有爬取錯誤
Week 9 Output: GA4 linked to Google Ads. All 5 tools confirmed active. Site passes mobile-friendly test. No crawl errors in GSC. 第 9 週成果：GA4 已連結至 Google Ads，所有 5 個工具確認正常運作，網站通過手機版測試，GSC 無爬取錯誤。

Links & Resources連結與資源

Guide
Link GA4 to Google Ads
Official guide to connecting GA4 and Google Ads.連結 GA4 和 Google Ads 的官方指南。
Tool
Google Search Console
Check Coverage report for crawl errors.查看覆蓋範圍報告以確認爬取錯誤。
Tool
Google Mobile-Friendly Test
Check if your site passes Google's mobile requirements.檢查網站是否符合 Google 的手機版要求。
Guide
Google: Mobile-First Indexing
Why mobile-friendliness matters for SEO.為什麼手機版友好對 SEO 至關重要。
P10

Monitor, Analyze & Iterate監測、分析與持續優化

Week 10+第 10 週起
💡 Treat this as a fixed weekly ritual. Open the same tools in the same order every week. The goal is to build a habit — not just reading dashboards, but taking one concrete action on your site after each review. 將此視為固定的每週習慣。每週按相同順序開啟相同工具。目標是建立習慣——不只是閱讀數據，而是每次審查後對網站採取一個具體行動。

Weekly Review Ritual (in order)每週審查流程（按順序執行）

  • Step 1 — GSC: Which keywords have impressions but low clicks? Which pages rank 8–15? Those are the easiest wins to improve first步驟 1 — GSC：哪些關鍵字有曝光但點擊率低？哪些頁面排名在第 8–15 位？這些是最容易改善的切入點
  • Step 2 — GA4: Where is traffic coming from? Which pages have the most sessions? Which have high bounce rate?步驟 2 — GA4：流量從哪裡來？哪些頁面的工作階段最多？哪些頁面的跳出率偏高？
  • Step 3 — PostHog: Watch session recordings — where do users scroll and stop? Check heatmaps for click patterns步驟 3 — PostHog：觀看工作階段錄影——用戶在哪裡滾動停止？查看熱點圖了解點擊模式
  • Step 4 — Ahrefs: Any new backlinks? Any crawl errors? Check every two weeks步驟 4 — Ahrefs：有新的反向連結嗎？有爬取錯誤嗎？每兩週檢查一次
  • Step 5 — Similarweb: Once per month — compare traffic growth vs competitors步驟 5 — Similarweb：每月一次——與競爭對手比較流量增長

Using Manus & Gemini for Analysis使用 Manus 和 Gemini 進行分析

  • Copy GSC keyword data or GA4 summary into Manus or Gemini將 GSC 關鍵字數據或 GA4 摘要複製至 Manus 或 Gemini
  • Ask: "Which of these pages should I improve first and why?" or "Write a better meta description for this page targeting this keyword"詢問：「我應該先改善哪個頁面，原因是什麼？」或「為這個頁面針對此關鍵字撰寫更好的 meta description」
  • Use AI output as a starting point — always personalise before publishing將 AI 輸出作為起點——發布前始終需要個人化修改

What to Present Each Week每週需展示的成果

  • One screenshot from each tool with a short explanation of what you noticed每個工具各一張截圖，附上你觀察到的重點說明
  • One change made to the site based on last week's data根據上週數據對網站作出的一項改動
  • One thing planned for next week based on this week's findings根據本週發現計劃下週執行的一件事

Common Mistakes to Avoid常見錯誤需要避免

  • Checking traffic every day and panicking — SEO results take 2–3 months minimum每天查看流量並感到焦慮——SEO 成效最少需要 2–3 個月才會顯現
  • Only looking at GA4 and ignoring PostHog — GA4 shows volume, PostHog shows behaviour只看 GA4 而忽略 PostHog——GA4 顯示流量數量，PostHog 顯示用戶行為
  • Writing new content before fixing existing weak pages — improving a ranking page is faster在修復現有弱頁之前就創作新內容——優化已有排名的頁面比從頭開始更快見效
Week 10+ Output: Weekly review habit established. One new or improved content piece per cycle. You can explain what the data means and what action you took as a result. 第 10 週起成果：每週審查習慣已建立，每個週期完成一篇新內容或改善現有內容，能夠解釋數據含義及相應採取的行動。

Links & Resources連結與資源

Tool
Google Search Console
Check keyword impressions, clicks, and position data.查看關鍵字曝光次數、點擊數及排名數據。
Guide
GA4: Understanding Reports
Official guide to reading GA4 reports.閱讀 GA4 報告的官方指南。
Guide
PostHog: Session Replay Guide
Watch user recordings to identify where visitors drop off.觀看用戶錄影，找出訪客離開的頁面位置。
Tool
Ahrefs Webmaster Tools
Monitor backlinks and crawl health. Check every 2 weeks.監測反向連結及爬取狀況，每兩週檢查一次。
Tool
Manus
Paste in analytics data and ask for insights or content ideas.貼入分析數據，詢問洞察或內容建議。
Tool
Google Gemini
Alternative to Manus for data interpretation and content drafting.Manus 的替代選擇，用於數據解讀及內容起草。
Guide
Ahrefs: SEO Basics Guide
Comprehensive beginner guide to all core SEO concepts.涵蓋所有核心 SEO 概念的全面入門指南。
Guide
Backlinko: SEO Techniques
Practical techniques for improving rankings.提升排名的實用技巧。