I built 73 free construction calculators with Next.js — and learned the hard way that Google won't index a new site just because it exists

I built 73 free construction calculators with Next.js — and learned the hard way that Google won’t index a new site just because it exists

我用 Next.js 构建了 73 个免费建筑计算器——并以惨痛的代价学到:Google 不会仅仅因为一个网站存在就将其收录

Every construction calculator on the first page of Google has the same problem: you search “how much concrete do I need,” land on the page, and before you can type a number you’re fighting a cookie banner, a newsletter popup, an AI chatbot bubble, and three display ads that shift the layout while you’re tapping. So I built the version I actually wanted: ProjectCalc — 73 free calculators for construction, home improvement, and DIY. No signup, no popups, no chatbot. It runs entirely in your browser and works on a 4G phone with one bar. This post is half “Show Dev” and half a brutally honest field report on the part nobody warns you about: getting a brand-new domain indexed by Google is its own engineering problem, and shipping good content is only step one.

Google 搜索首页上的每一个建筑计算器都有同样的问题:当你搜索“我需要多少混凝土”并进入页面后,还没来得及输入数字,就得先应付 Cookie 横幅、时事通讯弹窗、AI 聊天机器人气泡,以及三个在你点击时会改变布局的展示广告。所以我构建了自己真正想要的版本:ProjectCalc——包含 73 个用于建筑、家居装修和 DIY 的免费计算器。无需注册、没有弹窗、没有聊天机器人。它完全在浏览器中运行,即使在 4G 信号只有一格的手机上也能流畅使用。这篇文章既是“开发者展示”,也是一份极其坦诚的实战报告,讲述了没人会提醒你的那部分真相:让一个全新的域名被 Google 收录本身就是一个工程难题,而发布优质内容仅仅是第一步。

What it is

它是什么

73 calculators across the math contractors and homeowners actually need:

  • Carpentry — beam span, stair stringer, rafter length, floor joist span
  • Electrical — voltage drop, conduit fill, wire gauge, panel load (NEC)
  • Plumbing — drain, vent, and supply pipe sizing (IPC)
  • HVAC — Manual J heat load, BTU, duct CFM (ACCA)
  • Masonry — brick and block counts, mortar, rebar grids
  • Home & DIY — concrete, drywall, paint, mulch, gravel, tile
  • Finance — mortgage, loan, and car-payment calculators

涵盖承包商和房主真正需要的 73 个数学计算器:

  • 木工 — 横梁跨度、楼梯纵梁、椽子长度、楼板托梁跨度
  • 电气 — 电压降、导管填充率、线规、面板负载 (NEC)
  • 管道 — 排水、通风和供水管道尺寸 (IPC)
  • 暖通空调 (HVAC) — Manual J 热负荷、BTU、管道 CFM (ACCA)
  • 砌筑 — 砖块和砌块数量、砂浆、钢筋网格
  • 家居与 DIY — 混凝土、干墙、油漆、覆盖物、砾石、瓷砖
  • 金融 — 按揭、贷款和汽车还款计算器

Every calculator shows the formula, a worked example, common mistakes, and rules of thumb so you can sanity-check the result instead of trusting a black box. The one feature I’m proudest of: a visual room sketcher that draws your room as you type the dimensions and pre-fills the matching calculator with the numbers — including L-shaped rooms with a corner bump-out. Draw the room once, get drywall sheets, paint gallons, and flooring square footage without re-entering anything.

每个计算器都展示了公式、计算示例、常见错误和经验法则,让你能够对结果进行合理性检查,而不是盲目信任“黑盒”。我最引以为傲的功能是:一个可视化房间绘图工具,当你输入尺寸时,它会画出你的房间,并自动将数字填入相应的计算器中——包括带拐角的 L 型房间。只需画一次房间,就能直接获得干墙板数量、油漆加仑数和地板平方英尺数,无需重复输入任何信息。

The stack

技术栈

Nothing exotic — boring on purpose, because boring is fast:

  • Next.js 16 (App Router), TypeScript
  • Vanilla CSS, no Tailwind — kept the bundle tight and the first paint instant
  • Static Site Generation — every calculator page prerenders to HTML, so there’s no client round-trip to see content
  • Dynamic OG images via next/og on the edge runtime
  • 100% client-side math — your inputs never leave the page; there’s no backend to send them to
  • Vercel for hosting, auto-deploy on push to main

没有花哨的东西——刻意保持“无聊”,因为无聊意味着快:

  • Next.js 16 (App Router), TypeScript
  • 原生 CSS,无 Tailwind — 保持包体积精简,实现首屏瞬间加载
  • 静态站点生成 (SSG) — 每个计算器页面都预渲染为 HTML,因此无需客户端往返即可查看内容
  • 动态 OG 图片 — 通过 Edge Runtime 上的 next/og 实现
  • 100% 客户端数学计算 — 你的输入永远不会离开页面;没有后端可以发送数据
  • Vercel 用于托管,推送到主分支自动部署

The calculators are defined as plain data objects — slug, inputs, a pure calc() function, and prose fields — so adding a new one is a config entry plus a companion blog post, not a new route.

计算器被定义为纯数据对象——包含 slug、输入项、纯 calc() 函数和文字说明字段——因此添加一个新的计算器只需增加一个配置条目和一篇配套博客文章,而无需创建新路由。

Now the part that hurt: indexing

现在是痛苦的部分:收录

I launched, submitted my sitemap to Google Search Console, and waited for the calculator pages to show up in search. They didn’t. Weeks in, GSC told the story: 1 page indexed (the homepage), and ~120 pages stuck in “Crawled – currently not indexed.” Another batch sat in “Discovered currently not indexed.” Zero technical errors — no 404s, no robots blocks, no canonical issues. Google was fetching the pages fine and then choosing not to index them.

我上线了网站,向 Google Search Console (GSC) 提交了站点地图,并等待计算器页面出现在搜索结果中。但它们没有出现。几周后,GSC 给出了答案:只有 1 个页面被收录(首页),约 120 个页面卡在“已抓取 - 目前未收录”状态。另一批页面则处于“已发现 - 目前未收录”。没有任何技术错误——没有 404,没有 robots 屏蔽,没有规范标签问题。Google 抓取页面完全正常,但却选择不收录它们

If you’ve never hit this wall, here’s what I learned digging into it: “Crawled – currently not indexed” is a verdict, not a bug. It means Google fetched your page and decided it wasn’t worth an index slot yet. You can’t fix it with more schema or meta tags. I had valid JSON-LD, canonicals, breadcrumbs, the works. Didn’t matter.

如果你从未遇到过这堵墙,以下是我深入研究后的心得:“已抓取 - 目前未收录”是一个判定结果,而不是 Bug。 这意味着 Google 抓取了你的页面,但认为它还不值得占用一个索引位置。你无法通过增加 Schema 或 Meta 标签来解决这个问题。我拥有有效的 JSON-LD、规范标签、面包屑导航等所有配置,但这毫无意义。

A new domain has almost no crawl budget. When I pulled the actual last CrawlTime for each URL via the URL Inspection API, the truth jumped out: Google had crawled most pages once near launch and then basically never came back. Every content improvement I shipped afterward — expanded prose, code citations, diagrams — Google had never seen, because it hadn’t re-crawled. I was tuning a page nobody was re-reading.

新域名的抓取预算几乎为零。 当我通过 URL 检查 API 获取每个 URL 的实际最后抓取时间时,真相大白:Google 在上线初期抓取了大多数页面一次,之后基本就再没回来过。我后来发布的所有内容改进——扩展的文字、代码引用、图表——Google 从未看到,因为它根本没有重新抓取。我是在为一个没人重新阅读的页面进行优化。

The Indexing API doesn’t work for normal pages. I tried it. The official Indexing API is only for JobPosting and BroadcastEvent schema; for regular pages Google ignores it. My own crawl logs confirmed it triggered nothing.

Indexing API 对普通页面无效。 我试过了。官方的 Indexing API 仅适用于 JobPosting(职位发布)和 BroadcastEvent(广播事件)架构;对于普通页面,Google 会忽略它。我自己的抓取日志证实它没有触发任何效果。

What actually moves it: the manual “Request Indexing” button in GSC (forces a re-crawl of the current version), plus — the real lever — backlinks and real traffic arriving together. A young domain with zero inbound links gives Google no reason to spend crawl budget or trust. This post is, candidly, part of that fix.

真正起作用的是: GSC 中手动点击“请求收录”按钮(强制重新抓取当前版本),以及——真正的杠杆——反向链接和真实流量同时到来。一个没有任何入站链接的年轻域名,没有理由让 Google 浪费抓取预算或给予信任。坦率地说,这篇文章也是该修复方案的一部分。

The lesson I wish I’d internalized on day one: on-page SEO is table stakes; it’s not a growth strategy. You can have technically perfect pages and still be invisible, because indexing is gated on trust, and trust is gated on signals you earn off your own site.

我希望在第一天就深刻理解的教训是:页面内 SEO 只是入场券,而不是增长策略。你可以拥有技术上完美的页面,但依然处于隐形状态,因为收录取决于信任,而信任取决于你在网站之外获得的信号。

Try it / break it

试用 / 找茬

It’s live and free: projectcalc.app I’d genuinely love feedback from this crowd — on the calculators, the sketcher UX, or the indexing saga if you’ve fought it too. What finally tipped your new domains over the line? Drop it in the comments.

网站已上线且免费:projectcalc.app 我真心希望能得到大家的反馈——关于计算器、绘图工具的交互体验,或者如果你也曾与收录问题抗争过,欢迎分享你的经历。是什么最终让你的新域名成功被收录?请在评论区留言。