一個晚上重做 6 個網站的紀錄

這是我一個人做網站、經營網站,並記錄當天工作的第一篇日誌。這次寫的是 2026 年 10 月 18 日下午 5 點 22 分到隔天凌晨 0 點 50 分,把同一個儲存庫(monorepo)裡的 6 個網站一起整修的過程。

用數字看這個晚上

以下是從 git 紀錄量出來的數值。

我自己經營的是 site30cut(本站)、Calcmoa、字數統計、韓國國定假日 4 個網站,另外 2 個是咖啡店客戶與到府汽車美容客戶的網站。

1. 只有一頁,搜尋時能被找到的地方也只有一個

一開始的問題很單純。所有內容都放在首頁一頁裡,不管搜尋什麼關鍵字,能抵達的網址都只有首頁。所以我替每個網站依主題拆出子頁面——介紹、流程、價格、常見問題、聯絡——並提供 4 種語言(韓文、英文、日文、繁體中文)。同時也擴充了網站地圖的更新日期(lastmod)與 RSS,因為 Naver 讀 RSS,Google 則主要讀網站地圖。

同一段時間,我也寫了一支以唯讀方式查詢 Search Console 與 GA4 的腳本。它會挑出有曝光卻排名偏低、或沒有點擊的頁面,用來決定下一步要補強什麼。實際數字等資料累積後,會在下一篇日誌說明。

2. 同一個選單不要做六次

先替到府汽車美容客戶做的左側展開選單(群組手風琴、選單搜尋、同義詞與韓文初聲搜尋、ESC 與焦點鎖定)很好用,於是我把它搬進共用套件。現在每個網站只要在 nav.config.ts 寫下群組和同義詞,6 個網站就會以相同方式運作。

輸入提示也用同樣方式整理。計算機、字數工具、休假規劃器原本各自處理「空白、超出範圍、數字格式錯誤」的提示,現在合併成一個共用的 form-kit,行為與文字維持不變。

3. 用動態圖解取代文字

說明段落一長,大家就會跳過。所以製作流程改成 5 個步驟的時間軸,貸款試算結果改成本金與利息的甜甜圈圖,連假改成月曆色帶。原本的文字沒有刪掉,而是收在「查看詳情」裡。動畫只在出現在畫面上時播放;在作業系統開啟「減少動態效果」的使用者,看到的是靜止畫面。

4. 把表情符號換成圖示

選單和圖解裡到處都是表情符號,不同裝置顯示的樣子不一樣,老實說也很像自動產生的。我把它們換成 115 種 Lucide 圖示(ISC 授權),6 個網站共用同一個 Icon 元件。

5. 看起來很小,卻不能漏掉的事

• PWA 第一階段:6 個網站都加上了網頁資訊清單與圖示。刻意不加 Service Worker——安裝條件不需要它,而快取卡住舊畫面的風險更大。
• 圖片出處:客戶網站的照片換成沒有品牌標誌與車牌的免費照片,並在各網站的介紹頁寫上出處與攝影者。
• 手機橫向溢出:進場動畫的起始位置讓 390px 的畫面被撐到 426px,用 overflow-x: clip 解決。

接下來要做的事

新的子頁面是否真的被搜尋引擎收錄,幾天後會用 Search Console 的資料確認,這份日誌也會帶著那些數字繼續寫下去。如果你好奇這些網站是怎麼做的,也可以看看製作流程與作品集。