Mocha SEO
Your Mocha App Is Invisible to Google
You built a great-looking app with Mocha. It works perfectly in the browser. But here is the thing -- Google is not using a browser. When Googlebot visits, it sees a bare HTML shell and a bunch of JavaScript it may or may not execute. If your content only appears after JavaScript runs, search engines might never see it.
What RndrKit Does
RndrKit detects search engine bots and renders your Mocha app in a headless browser before serving the result. Googlebot gets fully rendered HTML with all your content, meta tags, and structured data. Human visitors are proxied straight to your Mocha app with no changes.
Status: Should Work
We have not done full end-to-end testing with Mocha apps, but because Mocha produces client-side rendered apps, RndrKit should work without issues. Mocha uses Cloudflare Workers for its backend, and the generated frontend is a standard SPA.
If you run into any issues, contact us and we will help you get it working.
Setup
Step 1: Find Your Mocha App URL
Mocha deploys apps to URLs like:
your-project.mocha.app
Find this in the Mocha dashboard after deploying your app. This is your origin URL.
Step 2: Sign Up for RndrKit
Create your account at rndrkit.io.
Step 3: Add Your Domain
Click Add Domain in the dashboard:
| Field | Example | Description |
|---|---|---|
| Custom Domain | www.example.com | The domain your visitors will use |
| Origin URL | your-project.mocha.app | Your Mocha app's default URL |
Step 4: Remove Custom Domain from Mocha (If Set)
If you configured a custom domain in Mocha's settings, remove it first. Mocha's paid plans include custom domain support, but you do not need that feature -- RndrKit handles the custom domain and SSL for you. You only need the *.mocha.app URL.
Step 5: Configure DNS
Create a CNAME record at your DNS provider:
| Type | Name | Value | TTL |
|---|---|---|---|
| CNAME | www | cname.rndrkit.io | Auto |
If you are using Cloudflare, set the proxy status to DNS only (gray cloud) during initial setup.
For detailed instructions, see DNS Configuration.
Step 6: Verify
Click Verify in the RndrKit dashboard, then test:
# Bot request -- should return fully rendered HTML
curl -s -A "Googlebot/2.1" "https://www.example.com/" | head -50
# Human request -- should return your SPA shell
curl -s "https://www.example.com/" | head -50
Platform-Specific Notes
Mocha's Cloudflare Workers Backend
Mocha uses Cloudflare Workers for backend logic. These will continue to function normally when traffic is proxied through RndrKit, since human requests are forwarded to your origin unchanged.
Custom Domains Require a Paid Plan
Mocha requires a paid plan for custom domains. However, you do not need Mocha's custom domain feature -- RndrKit handles custom domains and SSL for you. You only need the *.mocha.app URL.
SEO Quick Wins
Once RndrKit is active:
- Title tags on every page -- unique and descriptive
- Meta descriptions -- summarize each page in under 160 characters
- Open Graph tags -- so shared links look good on social media
- Canonical URLs -- point to your custom domain, not
mocha.app - Structured data (JSON-LD) -- help Google understand your content
Verify It Works
curl -s -A "Googlebot/2.1" "https://www.example.com/" | head -100
You should see fully rendered HTML with your page content. If you see an empty shell, check the troubleshooting guide.
Next Steps
- Analytics -- See which bots are crawling your site
- Cache Warming -- Pre-render important pages for fast bot responses
- SEO Audit -- Check your pages for common SEO issues
- Sitemaps -- Help search engines discover all your pages