-
Step 1 · 定工具清单:只做能纯前端跑通的
先分清「浏览器能算」和「必须服务端」,别一上来就挑做不了的
SEO 工具站最容易踩的坑:想做「输入域名查收录量」——这需要服务端去查搜索引擎,纯前端做不了(跨域 + 反爬)。
浏览器里能直接算的(优先做):
- TDK 生成器:输入标题/关键词,输出 title / description / keywords 并给出字数建议
- sitemap 生成:粘贴 URL 列表,输出标准 sitemap.xml
- robots 校验:贴 robots.txt,检查是否误屏蔽 /assets/、是否声明 Sitemap
- 关键词密度统计:贴正文,算词频与重复度
- 死链自查:贴 URL 清单,批量 HEAD 探测(同样受跨域限制,做成「导出 curl 命令」更稳)
必须服务端或跳转平台做的:
收录查询、索引量、外链数——这些做成「一键生成查询链接」:拼好site:域名的搜索链接,点开跳到百度 / Google 自己看。既不承诺假数据,也把用户留在你站上。自查清单
- 工具清单里每条都标注了「纯前端 / 需服务端」
- 至少 3 个工具不依赖任何外部接口
- 需要外部数据的工具已改成「生成查询链接」形态
-
Step 2 · 实现工具页(输入 → 计算 → 输出)
一个 tool.js 通用骨架,多个工具复用同一套交互
所有工具都是同一个骨架:输入区 → 处理函数 → 输出区 + 复制按钮。写一个通用壳,后面加工具只写处理函数。
// tools.js 骨架示意 const tools = { tdk: { name: 'TDK 生成', run: (input) => { /* 纯计算 */ return text; } }, sitemap: { name: 'Sitemap 生成', run: (input) => { /* 拼 XML */ return xml; } } };体验细节(决定用户会不会再来):
- 输出区一键复制,复制成功给 toast
- 输入用
localStorage存历史,下次进来还在 - 结果区给一句「下一步建议」,如「把这段 sitemap 传到站点根目录」
- 明确声明:输入内容不上传服务器(纯前端站真能做到,这是卖点,写进页面)
跨域拿不到的数据别硬扛,用「导出命令」或「跳转查询」兜底,别给用户假结果。
自查清单
- 至少 3 个工具能算出正确结果
- 每个工具都有一键复制
- 刷新页面后输入历史仍在
- 页面写明输入不上传服务器
-
Step 3 · 给每个工具配「下一步」引导
工具用完是转化的最佳时机,别让用户用完就走
工具站的转化发生在用户刚拿到结果、正准备动手的那一刻。
顺势引导的三种写法:
- 缺什么给什么:用户生成了 sitemap → 「需要一个放文件的服务器?」→ 云厂商链接
- 下一步干什么:用户生成了 TDK → 「要不要顺手检查 robots.txt?」→ 站内另一个工具(提升 PV 与停留)
- 做不了的给替代:用户要查收录 → 「给你拼好查询链接,去百度看实时结果」+ 收录观测清单下载
位置克制:结果区下方一条,页脚一条,别弹窗。工具站用户是来干活的,打断他就会关页面。
合规:推广位标「推广 · 含返利」,外链
rel="sponsored noopener"。自查清单
- 每个工具结果区下方有一条下一步引导
- 引导里有至少 1 条站内互跳
- 推广位已标注,无弹窗打断
-
Step 4 · 埋点:把「用了」变成可量化的转化
工具使用 / 结果复制 / 引导点击三段都打点
工具站没有转化观测,就永远不知道哪个工具有人用。三段事件必埋:
| 事件 | 触发 | 关键 props |
|---|---|---|
|tool_use| 点击工具并开始计算 |tool_id/scenario|
|tool_result| 成功输出结果 |tool_id/ok|
|tool_copy| 点击复制结果 |tool_id|
|aff_click| 点击推广引导 |ad_id/pos/tool_id|本站用统一埋点 SDK(
assets/js/pv.js的Tracker.track),加data-track属性即自动上报;转化口径定义在data/conversion.json。看三件事就够了:哪个工具用得最多(决定往哪加功能)、复制率(结果有用没用)、复制后点推广的比例(转化真实发生没发生)。
先定基线再优化:上线头两周只记录不下结论,等有 30 次以上
tool_use再判断哪个工具该砍。自查清单
- 4 个事件在浏览器 Network / 中台 trackEvents 能看到
- 事件里带 tool_id,能按工具拆分
- data/conversion.json 已登记本场景的转化目标
-
Step 5 · 上线 + 收录观测 + 迭代节奏
提交 sitemap、建收录观测清单、按数据决定下一个工具
工具页内容多、更新频繁,最容易被搜索引擎「收录了但没更新」。
上线四件事:
- 每个工具一个可直达的 URL(
/tools.html?tool=tdk或独立文件),canonical 指向主工具页 sitemap.xml里带上工具页,lastmod随内容更新robots.txt放行/assets/(JS 被屏了工具跑不起来)- 跑
bash scripts/seo-check.sh自检
收录观测(本站做法可直接抄):
- 维护一份
data/index-observation.json:每条 URL 记submitted_at/indexed/checked_at - 每次改动后跑
bash scripts/index-observation.sh,脚本会逐个 URL 查 HTTP 状态、canonical、robots 是否允许,输出当天报告 - 百度侧用「site: 查询链接」人工核对,Google 侧看 Search Console 的「已编入索引」
迭代:按
tool_use排序,前 3 名加深,后 3 名要么改要么删。别平均用力。自查清单
- https 访问无证书警告
- sitemap 已提交且含工具页
- 收录观测清单已建,每周核对一次
- 能说出上周使用量最高的工具
- 每个工具一个可直达的 URL(