首页 / 建站向导 / SEO 小工具站

SEO 小工具站

收录查询、死链检测、sitemap 生成——纯前端小工具,天然是流量入口,也是本站收录观测的实操场。

🔍 场景 ⏱ 2小时 5 个步骤 难度 已完成 0 / 5 步
■ 全文速览 · 静态内容

SEO 小工具站:5 步完整做法

下面这份是静态全文(含脚本与自查清单),由 scripts/seo-prerender.js 从 data/steps.json 生成,供搜索引擎与关闭 JS 的访客阅读。上面那套是带进度保存的交互向导,内容和它完全一致。

  1. Step 1 · 定工具清单:只做能纯前端跑通的

    先分清「浏览器能算」和「必须服务端」,别一上来就挑做不了的

    SEO 工具站最容易踩的坑:想做「输入域名查收录量」——这需要服务端去查搜索引擎,纯前端做不了(跨域 + 反爬)。

    浏览器里能直接算的(优先做):

    • TDK 生成器:输入标题/关键词,输出 title / description / keywords 并给出字数建议
    • sitemap 生成:粘贴 URL 列表,输出标准 sitemap.xml
    • robots 校验:贴 robots.txt,检查是否误屏蔽 /assets/、是否声明 Sitemap
    • 关键词密度统计:贴正文,算词频与重复度
    • 死链自查:贴 URL 清单,批量 HEAD 探测(同样受跨域限制,做成「导出 curl 命令」更稳)

    必须服务端或跳转平台做的:
    收录查询、索引量、外链数——这些做成「一键生成查询链接」:拼好 site:域名 的搜索链接,点开跳到百度 / Google 自己看。既不承诺假数据,也把用户留在你站上。

    自查清单
    • 工具清单里每条都标注了「纯前端 / 需服务端」
    • 至少 3 个工具不依赖任何外部接口
    • 需要外部数据的工具已改成「生成查询链接」形态
  2. 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 个工具能算出正确结果
    • 每个工具都有一键复制
    • 刷新页面后输入历史仍在
    • 页面写明输入不上传服务器
  3. Step 3 · 给每个工具配「下一步」引导

    工具用完是转化的最佳时机,别让用户用完就走

    工具站的转化发生在用户刚拿到结果、正准备动手的那一刻。

    顺势引导的三种写法:

    1. 缺什么给什么:用户生成了 sitemap → 「需要一个放文件的服务器?」→ 云厂商链接
    2. 下一步干什么:用户生成了 TDK → 「要不要顺手检查 robots.txt?」→ 站内另一个工具(提升 PV 与停留)
    3. 做不了的给替代:用户要查收录 → 「给你拼好查询链接,去百度看实时结果」+ 收录观测清单下载

    位置克制:结果区下方一条,页脚一条,别弹窗。工具站用户是来干活的,打断他就会关页面。

    合规:推广位标「推广 · 含返利」,外链 rel="sponsored noopener"。

    自查清单
    • 每个工具结果区下方有一条下一步引导
    • 引导里有至少 1 条站内互跳
    • 推广位已标注,无弹窗打断
  4. 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 已登记本场景的转化目标
  5. Step 5 · 上线 + 收录观测 + 迭代节奏

    提交 sitemap、建收录观测清单、按数据决定下一个工具

    工具页内容多、更新频繁,最容易被搜索引擎「收录了但没更新」。

    上线四件事:

    1. 每个工具一个可直达的 URL(/tools.html?tool=tdk 或独立文件),canonical 指向主工具页
    2. sitemap.xml 里带上工具页,lastmod 随内容更新
    3. robots.txt 放行 /assets/(JS 被屏了工具跑不起来)
    4. 跑 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 已提交且含工具页
    • 收录观测清单已建,每周核对一次
    • 能说出上周使用量最高的工具

关于SEO 小工具站,你大概还想问

SEO 小工具站一共几步?大概要多久?

共 5 步,约 2小时:1) 定工具清单:只做能纯前端跑通的;2) 实现工具页(输入 → 计算 → 输出);3) 给每个工具配「下一步」引导;4) 埋点:把「用了」变成可量化的转化;5) 上线 + 收录观测 + 迭代节奏。每步都带操作说明、可复制的一键脚本和自查清单。

SEO 小工具站第一步要做什么?

定工具清单:只做能纯前端跑通的——先分清「浏览器能算」和「必须服务端」,别一上来就挑做不了的。这一步做完,后面的步骤才有依据。

SEO 小工具站做完后怎么判断做对了没有?

上线 + 收录观测 + 迭代节奏——提交 sitemap、建收录观测清单、按数据决定下一个工具。这一步的自查清单就是验收标准,全部勾上才算真正上线。