兩周夜戰：35工具站的技術賬本

兩周的晚上和周末，我上線了 Toolsfluent——一個免費在線工具站，35個工具涵蓋計算器、轉換器、生成器，面向南亞、海灣地區和全球注重隱私的用戶。

這里分享技術層面的真實教訓，不是營銷話術。如果你是獨立開發者，正在做內容型網站，這篇可能幫你省下幾周時間。

技術棧

框架用 Next.js 15（應用路由、服務器組件、增量靜態再生），TypeScript 開發，Tailwind CSS 做樣式，圖標來自 lucide-react。字體方面，正文用 Inter，品牌用 Sora，通過 next/font/google 加載。主題切換靠 next-themes，托管在 Vercel Hobby 套餐。

每個工具頁面都是靜態生成。沒有數據庫，沒有用戶認證。只有貨幣轉換器調用了外部接口——exchangerate-api.com 的免費版。

意外好用的三件事

第一，工具元數據單點管理

所有工具的配置存在一個 TypeScript 數組里：

export const TOOLS: Tool[] = [
{
slug: "mortgage-calculator",
name: "Mortgage Calculator",
description: "...",
category: "finance",
keywords: [...],
icon: "Home",
featured: true,
howToSteps: [...],
faqs: [...],
relatedTools: [...]
},
// ... 還有34個
];

新增工具的流程：加一條配置、建文件夾、寫計算器組件。站點地圖、JSON-LD 結構化數據、搜索索引、導航、相關工具推薦、分類頁面——全部從這個數組自動生成。

這個設計每個工具能省幾小時。做到第20個工具時，我已經能在一小時內上線新工具。

第二，全站 JSON-LD 結構化數據

每個工具頁面都帶：

SoftwareApplication 模式（軟件應用）
FAQPage 模式（來自數據數組里的常見問題）
BreadcrumbList（面包屑導航）

分類頁面用 CollectionPage，首頁用 WebSite 加 Organization。

Google 對工具頁面的 JSON-LD 很重視。沒有它，你在搜索結果里基本隱形。有了它，工具可能顯示評分星級、FAQ 折疊展開、"免費"價格標簽。

寫一個 buildToolJsonLd(tool) 輔助函數，一勞永逸。

第三，元數據統一封裝

export function buildMetadata({title, description, path, keywords, image}) {
const url = `${SITE_URL}${path}`;
return {
title: `${title} | ${SITE_NAME}`,
description,
keywords: keywords.join(", "),
metadataBase: new URL(SITE_URL),
alternates: { canonical: url },
openGraph: {
title, description, url,
images: [{ url: image, width: 1200, height: 630 }]
},
twitter: { card: "summary_large_image" },
robots: { index: true, follow: true }
};
}

每個頁面調用這個函數。元數據零 bug，在頁面源代碼里一眼就能驗證。

意外發現

破折號被標記為 AI 內容

Google 的"有用內容"分類器把長破折號（—）當作 AI 生成內容的強信號。我用 sed 全站刪除，換成逗號、冒號或句號。聽起來很傻，但這是真實的排名啟發式規則。

YMYL 內容需要權威引用

每篇健康和財經博客文章都加了 2-3 個權威來源引用：CDC、WHO、NIST、IRS、CFPB、RBI、印度 GST 委員會、英國 HMRC。YMYL（你的錢或你的生活）類內容沒有引用會被 Google 的 Q