Free Interactive Tools

HeyCMO ships 25 free, no-signup interactive marketing tools at /tools/<slug>. They're a top-of-funnel SEO + GEO play: each tool targets a specific, high-intent keyword (instagram caption generator, cac calculator, meta description generator, robots txt generator, json ld validator) and ranks on its own, indexed page with full schema markup.

The tools are also the lowest-friction way to show what HeyCMO does. The free generator handles one post at a time; the paid product runs the whole engine.

Configuration

Why these exist

Three jobs in one:

1. SEO + GEO bait — Every tool targets a keyword from the research-doc keyword list, with ~500–2,500/mo search volume and KD ≤20. The tool page is a self-contained SEO landing page (H1, intro, use cases, FAQ schema, related tools).
2. Product proof — Visitors who use the free tool see the same engine the paid product wraps. The CTA at the bottom of every tool page is the same: "Tired of doing this every day? HeyCMO does all of it for $99/mo."
3. In-product utility — The same tools are linked from inside the dashboard so paid customers don't need a tab-switch when they want a one-off generator.

URL structure

/tools                                  ← index, grouped by category
/tools/instagram-caption-generator      ← detail + interactive form
/tools/cac-calculator
/tools/meta-description-generator
/tools/ai-citation-score
/tools/json-ld-validator
... (25 total)

Slug is stable — used in URLs, JSON-LD @id, and the related-tools cross-link graph.

The 25 tools

Tool categories

Each tool has a category field used for grouping on the index:

• text-generator — generates copy (captions, post ideas, outlines, bios)
• analyzer — scores existing copy (subject testers, headline testers)
• calculator — numerical outputs (CAC, ROI, churn)
• formatter — structured templates (content calendar)

Tool definition shape

From apps/web/src/data/tools.ts:

interface ToolDefinition {
  // ─── Identity / SEO ───
  slug: string                     // stable, used in URLs
  keyword: string                  // primary target keyword
  category: ToolCategory
  estVolume: number                // monthly search volume estimate
  estKD: number                    // keyword difficulty (0-100)
  relevance: number                // 1-5, how core to HeyCMO's value prop

  metaTitle: string                // <title>
  metaDescription: string          // <meta name="description">
  h1: string
  subhead: string
  intro: string                    // multi-paragraph intro copy

  // ─── Form ───
  inputs: Array<
    | { kind: 'text'; ... }
    | { kind: 'textarea'; ... }
    | { kind: 'select'; options: [...] }
    | { kind: 'number'; min/max/step }
  >
  outputSchema: string             // human-readable description of output

  // ─── Below-the-fold SEO content ───
  useCases: Array<{ title; description }>      // ≥3
  faq: Array<{ question; answer }>             // ≥6, rendered as FAQPage JSON-LD
  relatedSlugs: string[]                       // 3 cross-links
  ctaText: string                              // bottom-of-page paid-product CTA
}

How the page renders

ToolPage.tsx reads the definition by slug and renders:

1. Hero — H1 + subhead + the interactive form.
2. Output panel — appears alongside the form once submitted; results stream in.
3. Intro copy — multi-paragraph context. Real prose, not boilerplate.
4. Use cases — three audience-specific scenarios.
5. FAQ — 6+ Q&As, rendered server-side and emitted as FAQPage JSON-LD.
6. Related tools — three cross-links from relatedSlugs.
7. CTA — paid-product pitch tuned to the tool's job.

Each page emits:

• <title> from metaTitle
• <meta name="description"> from metaDescription
• og:title, og:description, og:image (auto-generated branded OG image)
• <script type="application/ld+json"> with WebPage, SoftwareApplication, and FAQPage schemas

Sitemap inclusion

The sitemap generator iterates TOOLS from the registry, so adding a tool to the registry adds it to the sitemap and the search index without any other plumbing. Same for the /tools index — categories rebuild from whatever's currently in TOOLS.

Adding a new tool

1. Add a new entry to TOOLS[] in apps/web/src/data/tools.ts. Use an existing entry as a template — the keyword research is the hard part, the file shape is mechanical.
2. Pick a category, write the intro / use-cases / FAQ. Aim for ≥1,500 words of unique copy on the page (the FAQ usually carries half).
3. Wire the actual generator logic. Most tools call an internal endpoint that runs a small LLM prompt; calculators are pure client-side math.
4. Add the slug to 2–3 existing tools' relatedSlugs so the cross-link graph stays connected.
5. Ship. The sitemap and index page pick it up automatically.

Helper API

// Look up by slug (used by ToolPage's route loader)
export function getToolBySlug(slug: string): ToolDefinition | undefined

// Pull N related tools (used by the bottom-of-page recirculation)
export function relatedTools(slug: string, n: number = 3): ToolDefinition[]

Source files

• apps/web/src/data/tools.ts — the registry (single source of truth for all 25 tools)
• apps/web/src/pages/ToolsIndex.tsx — /tools (categorized listing)
• apps/web/src/pages/ToolPage.tsx — /tools/<slug> (renderer + form runtime)
• Sitemap generator — iterates TOOLS to emit /tools/<slug> URLs automatically