發布檢查:此頁面準備好了嗎?
發布日會帶來頁面的大部分受眾,而第二天才修復會錯過他們中的大多數。在貼文發布前把它做好。
此清單適用於任何頁面。請保持不包含頁面名稱和頁面資料: 在此撰寫一個新的通用規則,並將頁面及其數字保留在專案自己的筆記中。
如何執行
- 命名頁面。 其類型(文章或故事、工具或遊戲、中心),一句話描述其工作,以及其步驟: 到達 → 可用 → 首次使用 → 主要動作 → 它起作用了 → 下一步。合併不適用的步驟。不要為了滿足檢查而添加輸入、數字或動作。
- 提供一個封鎖了分析的本地建置(
dist/或開發伺服器)。絕不要打開線上頁面。 - 在以下四個螢幕上逐一檢查所有項目。 標記每個項目的通過、失敗、未驗證或不適用,並附上原因。對於需要判斷的檢查,寫下你所看到的(你複述的句子、你查看的螢幕截圖),而不僅僅是「通過」。
- 封鎖問題: 修復它或獲得用戶的明確豁免,如果未驗證則需驗證。建議事項: 報告它;它不會阻止發布。
- 將結果寫在專案的筆記或任務板上, 計算全部 29 項檢查:
Launch check: 25 pass, 1 fail, 1 unverified, 2 N/A; blocker: U1 fail; recommendation: S3 unverified; N/A: U2 (no input), U3 (no waits)。
螢幕: 手機 390×844、平板 820×1180、筆電 1366×768、大桌面 1920×1080。逐一檢查每個螢幕;寬版面造成的移動不亞於窄版面。透過螢幕截圖確認版面失敗,因為僅靠原始碼無法顯示它們。
瀏覽器: 無頭 Chromium(Playwright)就足夠了,因為本地建置無需登入。在載入頁面之前,在該分頁上封鎖你的分析主機(page.route(/your-analytics-host/, r => r.abort())),這樣檢查就不會計入訪問次數。
依頁面類型:
- 文章或故事: 繼續滾動是下一步,因此 U2 為不適用,如果沒有等待內容則 U3 為不適用。
- 工具或遊戲: T2 涵蓋頁面上任何文字;首次使用必須給出真實結果。
- 中心: 回報是找到正確的東西,因此 T1 意味著每個連結都能實現其承諾。
鉤子
- H1 · 封鎖問題。僅憑每個尺寸下的第一個螢幕,你就能用一句話說出訪客能得到什麼。 回報,而不是主題。寫下那句話。如果你寫不出來,或者它只命名了主題,則此項失敗。
- H2 · 建議事項。第一個螢幕為陌生人提供了一個繼續的理由: 一個具體的發現、數字、結果或問題,並且是真實的。它對於從沒有上下文的貼文到達的人來說也應該有效。
- H3 · 建議事項。連結預覽做出同樣的承諾。
og:image、標題和描述說明回報。在建置中檢查標籤和圖片。 - H4 · 封鎖問題。第一個動作在每個尺寸下無需滾動即可見,並且看起來明顯是一個動作, 具有足夠的對比度。在滾動故事中,第一個動作是滾動:可見的滾動提示即算通過。
內容主體
- T1 · 封鎖問題。內容主體及時兌現了鉤子的承諾。 回報不會等到最後。如果頁面很長,應先提供簡短版本,其餘部分由訪客選擇。
- T2 · 封鎖問題。從頭到尾閱讀順暢。 像陌生人一樣按順序閱讀全部內容。每個部分都承接前一部分並有所補充,沒有冗餘內容,你可以用一句話複述整個內容。
- T3 · 建議事項。每個螢幕一個主要觀點或數字。 其餘部分放在表格或「更多」後面。如果頁面不呈現數字或發現,則為不適用。
- T4 · 封鎖問題。每個數字和主張都有來源,所有隱藏內容都能正常運作。 打開每個抽屜、分頁和摺疊面板,並跟隨每個來源連結。關閉的部分仍然是頁面的一部分。
- T5 · 建議事項。文案通過作者的風格規則和 AI 寫作檢測, 沒有留下任何佔位符、草稿或除錯文字。頁面文案以用戶的名義發布,因此請報告問題並詢問;不要獨自改寫。
螢幕
- S1 · 封鎖問題。在所有四個螢幕上、每個步驟下,它都看起來正常。 在每個步驟後截圖,並檢查每一張:沒有裁切、重疊或未設定樣式(腳本生成的元素可能遺漏範圍 CSS),沒有橫向滾動。在執行移動地圖的搜尋或選擇後,檢查結果是否落在未被面板覆蓋的部分,且在所有尺寸下都如此。
- S2 · 封鎖問題。所有文字在其渲染大小下都可讀。 測量它,不要用眼睛判斷,目標是 12 px 或更大。對於 SVG 圖表:字型大小 × 渲染寬度 ÷ viewBox 寬度。
- S3 · 建議事項。在手機上 2 秒內可用。 可用意味著第一個動作能夠工作的最早時間點。從載入開始計時,使用冷快取和指定的手機 CPU 與網路設定檔。未經限制的桌面運行無法證明手機通過。
- S4 · 封鎖問題。慢速載入和載入失敗都應看起來正常。 測試網路減速(CDP
Network.emulateNetworkConditions,9 / 1.6 / 0.75 / 0.4 Mbps)和載入失敗。為獲得準確時間,請使用像 CDN 那樣的壓縮方式提供服務;未壓縮的本地伺服器會誇大每次等待。從冷啟動開始,在每次載入移交過程中每 0.5 秒截圖一次,並檢查這些影格。用載入標籤保留最後一張好的圖片;回退僅用於失敗情況。標籤在載入期間和失敗後必須正確。如果沒有後期載入的內容,則為不適用。
使用
- U1 · 封鎖問題。在每個步驟之後,下一個控制項在頁面留下訪客的位置,於每個尺寸下都顯示在螢幕上。 分別測試進入每個步驟的每種方式(例如、輸入、點擊)。檢查每個滾動目標、固定標題和折疊處。
- U2 · 建議事項。在任何自由格式輸入旁,都有一個單擊的進入方式(範例或預設),並且事件會記錄使用了哪一種。如果沒有自由格式輸入,則為不適用。
- U3 · 封鎖問題。任何超過 2 秒的等待都應顯示進度,並以清晰的結果或清晰的錯誤結束。 在本地驅動延遲和失敗的回應。永不結束的旋轉器即為失敗。如果沒有動作需要等待,則為不適用。 在其腳本載入完成前顯示的控制項(例如用於惰性載入地圖的表單)必須能正常工作或排入佇列:在載入期間和載入失敗後使用它。未處理的表單提交會重新載入頁面。
下一步
- N1 · 建議事項。在成功的那一刻,有一個明確的下一步要做的事: 相關頁面、嘗試另一個、再玩一次。把它放在成功發生的地方,而不是頁尾。
- N2 · 建議事項。分享按鈕應傳送發現結果: WhatsApp、Facebook、X 和複製連結,每個都攜帶一個包含發現結果的書面句子,而不僅僅是標題,放置在結果出現的位置。該句子是公開文案,因此由用戶措辭:詢問。沒有發現結果的中心仍然需要用戶提供一個句子。不要獨自發明一個或將其標記為不適用。
share事件僅發送網路,從不發送文字或 URL。
搜尋
Google 的 AI 答案(AI Overviews、AI Mode)從普通的搜尋索引中獲取頁面:帶有摘要排名的頁面可能被引用,無需 AI 專用檔案或標記。結構化資料必須與頁面顯示的內容相符。
- F1 · 封鎖問題。頁面可以被索引: 一個標準網址,沒有遺留的
noindex,列在網站地圖中。內容過於單薄而無法排名的頁面(僅連結到其他地方的存根、空列表)應被排除在搜尋之外:使用noindex並從網站地圖中排除,且沒有其他語言版本指向它。 - F2 · 建議事項。標題說明頁面的內容, 而不僅僅是網站名稱,網站名稱放在結尾;描述是頁面自身的,不出現在其他頁面上。
- F3 · 建議事項。有一行可見文字說明誰製作了它、何時發布以及其資料的新鮮程度, 結構化資料中的發布日期與之相同。僅在內容真正變更時才更改修改日期。中心頁面為不適用。
- F4 · 封鎖問題。HTML 中的每個圖片都有來源和真實的 alt 文字, 包括僅在沒有 JavaScript 時顯示的圖片。空的
<img>即為失敗。 - F5 · 建議事項。基於資料建構的頁面應提供資料: 經過隱私檢查後的 CSV(僅包含頁面已顯示的欄位)、下載旁的授權條款行,以及
Dataset標記。影片應獲得帶有海報的VideoObject標記。如果頁面兩者都沒有,則為不適用。
發布後:在 Search Console 中為頁面請求索引(使用用戶的帳戶,因此請詢問),如果專案維護一個 AI 答案問題列表,則將頁面回答的問題添加到該列表中。
衡量
檢查假設使用注重隱私的事件追蹤器(Umami、Plausible 或類似工具)並搭配自訂事件。
- M1 · 封鎖問題。事件存在於要發布的建置中。 每個適用步驟一個事件,每個動作一個事件,成功是效果而不是點擊,
*-leave事件提供最遠的步驟和停留時間。 - M2 · 封鎖問題。事件透過真實的追蹤器觸發。 樁化的追蹤器函數可能隱藏遺失的事件。在正式主機名稱上執行真實的追蹤器,使用
context.route提供本地建置並攔截追蹤器的發送端點,以便沒有任何東西離開機器。驅動每個控制項,包括跳轉連結:每個事件描述其動作,失敗時不發送成功,跳過內容的跳轉不發送閱讀事件。在同一個分頁中跟蹤一個已追蹤的站外連結,並檢查*-leave事件仍然到達:在頁面卸載時啟動的請求可能會丟失,因此此類連結應在新分頁中開啟。 - M3 · 封鎖問題。事件列在專案的
docs/analytics.md中,包含上線時間,且漏斗規格位於docs/funnels/中(將其儲存在分析工具中需要用戶同意)。 - M4 · 封鎖問題。訪客輸入或選擇的任何內容都不會發送給分析工具: 頁面瀏覽中沒有哈希(排除哈希)、沒有查詢文字、沒有地點。僅傳送固定標籤和分桶。
- M5 · 封鎖問題。目標在發布前就已寫下(每個步驟預期達到的數字),以便發布後的審查有可比較的基準。
- M6 · 封鎖問題。代理程式保持離線, 因為它們的訪問計入真實流量。一個可以指向線上頁面的檢查腳本必須自己封鎖分析。