两周夜战：35工具站的技术账本|description|image|url|两周夜战|元数据|命令提示符|知名企业|调用|谷歌

两周的晚上和周末，我上线了 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 }
};
}