-
Step 1 · Pick the tool list: only what runs purely in the browser
Sort 'the browser can compute this' from 'needs a server' before building something impossible
The easiest trap in an SEO tool site: wanting "enter a domain, see how many pages are indexed". That needs a server to query the search engine, and a pure front-end can't do it — CORS plus anti-bot.
What the browser can compute on its own (build these first):
- TDK generator: enter a title and keywords, get back title / description / keywords plus length advice
- Sitemap generator: paste a URL list, get valid sitemap.xml
- Robots checker: paste a robots.txt, check whether you accidentally blocked
/assets/and whether Sitemap is declared - Keyword density counter: paste body text, get term frequency and repetition
- Dead-link check: paste URLs and probe them in bulk (also CORS-limited — exporting
curlcommands is the sturdier shape)
What needs a server, or a redirect to a platform: index status, indexed page count, backlink count. Turn these into "generate a query link": build the
site:domainsearch URL and let the visitor click through to Google or Bing. You never promise numbers you can't fetch, and the visitor stays on your page.Checklist
- Every tool in the list is marked front-end-only or needs-a-server
- At least 3 tools depend on no external API
- Tools that need external data have been reshaped into query-link generators
-
Step 2 · Implement the tool pages (input → compute → output)
One generic tools.js skeleton; every new tool is just a handler
Every tool is the same skeleton: input area → handler → output area + copy button. Write one shell and each new tool is only a function.
// tools.js, sketched const tools = { tdk: { name: 'TDK generator', run: (input) => { /* pure computation */ return text; } }, sitemap: { name: 'Sitemap generator', run: (input) => { /* build XML */ return xml; } } };The details that decide whether people come back:
- One-click copy on the output, with a toast on success
- Persist input history in
localStorageso it's still there next visit - Give a "next step" line under the result, e.g. "put this sitemap in your site root"
- Say it explicitly: the input never leaves your browser. A pure front-end site can actually promise this, so put it on the page as a selling point
Don't fight data you can't fetch cross-origin. Fall back to an exported command or a query link rather than showing the visitor a fabricated result.
Checklist
- At least 3 tools produce correct results
- Every tool has one-click copy
- Input history survives a reload
- The page states that input never reaches a server
-
Step 3 · Give every tool a "next step"
Right after a result is the conversion window — don't let people finish and leave
Conversion on a tool site happens the moment someone gets a result and is about to act on it.
Three ways to guide them:
- Offer what's missing: someone generated a sitemap → "need a server to put files on?" → cloud provider link
- What to do next: someone generated TDK → "want to check robots.txt while you're here?" → another tool on your own site (lifts page views and dwell time)
- Substitute what you can't do: someone wants index status → "here's the query link, see live results" plus a downloadable indexing checklist
Keep the placement restrained: one line under the result, one in the footer, no modals. Someone on a tool site came to get work done — interrupt them and they close the tab.
Compliance: label promo slots "sponsored · affiliate" and give outbound links
rel="sponsored noopener".Checklist
- Every tool result has one next-step line under it
- At least one of those links goes to another page on your site
- Promo slots are labelled and nothing interrupts with a modal
-
Step 4 · Instrument it: turn "used" into measurable conversion
Three stages to track: tool used, result copied, guidance clicked
Without conversion tracking you will never know which tool anyone uses. Four events, all mandatory:
| Event | Trigger | Key props |
|---|---|---|
|tool_use| Someone opens a tool and computes |tool_id/scenario|
|tool_result| A result is produced |tool_id/ok|
|tool_copy| The result is copied |tool_id|
|aff_click| Promo guidance is clicked |ad_id/pos/tool_id|This site uses one shared tracking SDK (
Tracker.trackinassets/js/pv.js); adding adata-trackattribute reports automatically. Conversion definitions live indata/conversion.json.Three numbers are enough: which tool is used most (decides where to add features), the copy rate (whether the result is useful), and the share of copies that click the promo (whether conversion actually happens).
Set a baseline before optimising: for the first two weeks only record, don't conclude. Wait for 30+
tool_useevents before deciding which tool to cut.Checklist
- All 4 events show up in devtools Network or the platform's trackEvents
- Events carry tool_id so you can split by tool
- data/conversion.json registers this scenario's conversion goal
-
Step 5 · Launch + indexing observation + iteration cadence
Submit the sitemap, keep an indexing checklist, let the data pick the next tool
Tool pages carry a lot of content and change often, which is exactly how you end up "indexed, but never re-crawled".
Four things at launch:
- Every tool gets a directly reachable URL (
/tools.html?tool=tdkor its own file), with canonical pointing at the main tools page sitemap.xmlincludes the tools page, andlastmodmoves when the content doesrobots.txtallows/assets/— block the JS and the tools won't run- Run
bash scripts/seo-check.shto self-check
Indexing observation (copy this site's approach):
- Keep
data/index-observation.json: per URL recordsubmitted_at/indexed/checked_at - After every change run the observation script — it checks HTTP status, canonical and robots permission per URL, then writes that day's report
- Verify the Google side in Search Console's indexed report
Iteration: sort by
tool_use, deepen the top 3, fix or delete the bottom 3. Don't spread effort evenly.Checklist
- HTTPS loads with no certificate warning
- The sitemap is submitted and includes the tools page
- The indexing checklist exists and is reviewed weekly
- You can name last week's most-used tool
- Every tool gets a directly reachable URL (