用 Vue + Vite 做了一个免费在线工具站，聊聊 SEO、预渲染和工具页设计

idea706
0 阅读3分钟

最近做了一个在线工具站：简办工具。

地址：tools.toouh.com/

它不是一个复杂 SaaS，而是一个偏实用的工具集合，主要解决日常办公里的高频小任务：

  • PDF 合并、拆分、压缩、旋转、转图片、转 Word。
  • 图片压缩、改尺寸、格式转换、合并、裁剪、二维码生成/识别。
  • 文本对比、字数统计、批量替换、违禁词检测、JSON 格式化。
  • 日期时间、工作日、时间戳、贷款、列表求和等轻量计算。

为什么做这个

很多工具需求其实很小：

  • 合并几个 PDF。
  • 把几张图片压缩后上传。
  • 临时生成一个二维码。
  • 对比两段文本差异。
  • 把一段文字转成语音试听。

但用户经常会遇到几个问题：

  • 要安装客户端。
  • 要登录注册。
  • 页面广告多。
  • 文件必须上传到服务器。
  • 工具分散在不同网站，体验不稳定。

所以这个站的核心原则是：

  1. 能浏览器本地处理的，尽量本地处理。
  2. 工具入口直接，不做复杂账号体系。
  3. 每个工具页有明确场景说明，方便搜索和 AI 工具理解。
  4. 对 SEO 友好，工具页、分类页、专题页都有静态可抓取内容。

技术结构

前端主要是 Vue + Vite。

站点结构分成几类：

  • 首页：聚合常用工具和分类。
  • 分类页：PDF、图片、文字、时间、计算、电脑办公。
  • 工具页：每个工具一个固定 URL。
  • 专题页：按使用场景组织工具，例如老师常用工具、不登录工具、内容运营工具。

示例页面：

SEO 和收录处理

因为这是工具站，搜索流量很重要。所以我做了几件事：

这样做的目的是让搜索引擎和生成式搜索工具能直接读到页面主题，而不是只看到一个空的 SPA 容器。

本地优先处理

工具站里不少任务适合在浏览器本地完成，例如：

  • PDF 页面整理。
  • 图片压缩和格式转换。
  • 文本对比、替换、统计。
  • JSON 格式化。
  • 时间日期计算。

这类任务如果能直接在浏览器里完成，就没有必要上传到远端服务。对用户来说，心智也更简单：打开页面、处理、下载结果。

当然，有些能力还是需要辅助服务，比如部分文档格式转换。这类功能会在页面里区分处理方式，避免用户误以为所有能力都完全离线。

当前可用入口

官网：

tools.toouh.com/

几个常用工具：

如果你也在做工具站、效率产品或本地优先 Web 应用，可以交流一下工具页设计、SEO 预渲染和功能取舍。

avatar
文章
阅读
粉丝