Cloudflare Pages SEO

Your Cloudflare Pages App Is Invisible to Google

Cloudflare Pages is fast, free, and easy to deploy to. But if your app is a client-side rendered SPA -- React, Vue, Svelte, or anything that renders in the browser -- Google sees an empty HTML shell when it crawls your site. No content, no meta tags, nothing useful to index.

Your app works perfectly for humans. But search engines need the rendered HTML, and Cloudflare Pages does not provide server-side rendering out of the box.

What RndrKit Does

RndrKit sits in front of your Cloudflare Pages app and handles bot traffic. When Googlebot or any other crawler visits, RndrKit renders the page with a headless browser and returns the fully rendered HTML. Human visitors are proxied directly to your Cloudflare Pages app -- no change to their experience.

Setup

Step 1: Find Your Cloudflare Pages URL

Every Cloudflare Pages project has a default URL:

your-project.pages.dev

Find this in the Cloudflare dashboard under Workers & Pages > your project. This is your origin URL.

Step 2: Remove Your Custom Domain from Cloudflare Pages

This must happen before you change DNS. If your custom domain is still configured in Cloudflare Pages, it will conflict with RndrKit.

  1. Go to the Cloudflare dashboard.
  2. Navigate to Workers & Pages and select your project.
  3. Go to Custom domains.
  4. Remove your custom domain (e.g., www.example.com).
  5. Keep the default *.pages.dev URL as your origin.

Step 3: Sign Up for RndrKit

Create your account at rndrkit.io.

Step 4: Add Your Domain

Click Add Domain in the RndrKit dashboard:

FieldExampleDescription
Custom Domainwww.example.comThe domain your visitors use
Origin URLyour-project.pages.devYour Cloudflare Pages default URL

Step 5: Configure DNS

Since your domain is likely already on Cloudflare, you can add the CNAME record right in the Cloudflare DNS dashboard:

TypeNameValueProxy Status
CNAMEwwwcname.rndrkit.ioDNS only

Important: The proxy status must be DNS only (gray cloud icon). If the orange cloud (Proxied) is enabled, Cloudflare will intercept the traffic and RndrKit's bot detection will not work.

You can switch to orange cloud (Proxied) later after verifying everything works, but start with gray cloud during setup.

See DNS Configuration for more details.

Step 6: Verify

# 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

Remove Custom Domain from Pages First

If your custom domain is still attached to your Cloudflare Pages project, Cloudflare will route traffic directly to Pages and bypass RndrKit entirely. You must remove it from the Pages custom domains before updating DNS.

Gray Cloud During Setup

When you first add the CNAME record, use DNS only (gray cloud). This ensures traffic flows directly to RndrKit so you can verify bot detection and rendering work correctly.

Once everything is confirmed working, you can optionally enable the orange cloud (Proxied) if you want Cloudflare's CDN caching in front of RndrKit.

Cloudflare Workers and Functions

If you use Cloudflare Workers or Pages Functions for server-side logic, those will continue to run on your *.pages.dev origin. RndrKit proxies human traffic to your origin unchanged, so your backend logic stays intact.

Already Using Cloudflare DNS?

If your domain's nameservers are already on Cloudflare (which is common), the DNS change is easy -- just edit the CNAME record right in the Cloudflare dashboard. No nameserver changes needed.

SEO Quick Wins

Once RndrKit is serving rendered HTML to bots, make sure your app includes:

  • Title tags on every page -- unique and descriptive
  • Meta descriptions for each page
  • Open Graph tags for social media previews
  • Canonical URLs pointing to your custom domain, not pages.dev
  • Structured data (JSON-LD) where appropriate

Verify It Works

curl -s -A "Googlebot/2.1" "https://www.example.com/" | head -100

You should see your page content in the HTML. If you see an empty shell, double-check that the custom domain was removed from Cloudflare Pages and that the CNAME is set to DNS only.

See troubleshooting if you run into issues.

Next Steps

  • Analytics -- See which bots are crawling your site
  • Cache Warming -- Pre-render important pages ahead of time
  • SEO Audit -- Identify SEO issues on your pages
  • Sitemaps -- Submit a sitemap to search engines

Previous

Netlify

Next

Mocha