4leggedIT Logo
Back to Resources
How-To SessionComplexity: MediumSEO BasicsWebsite Publishing

Make Your Website Visible to Search Engines

Pre-render + Sitemap Submission

Pre-rendering generates real HTML during your build.

That makes your pages easier for Google and Bing to read.

Then you verify your domain and submit your sitemap.

Quick Path

  • Confirm pre-render runs as part of your build (so HTML contains real content).
  • If your website tool blocks edits, apply the changes manually (or via GitHub), then rebuild.
  • Verify your domain in Google and Bing using a DNS TXT record (Cloudflare).
  • Submit https://YOURDOMAIN/sitemap.xml in both tools.
1

Step 1 — Pre-render pages (so crawlers can read them)

➡ What this step does

Your goal is simple: built HTML files contain real headings, text, and links.

This prevents search engines from seeing an almost-empty page.

📋 What to do
  1. Use the AI helper prompt below with your AI helper.
  2. Copy it exactly as shown, paste it into your tool, and run it.
  3. If you are not comfortable with this step, contact 4leggedIT and we can handle it.
Copy exactly as shown. Do not modify.
AI helper prompt
Expand to copy: AI helper prompt
Copy exactly as shown. Do not modify.
Goal: Make SSR pre-render the default rendering strategy for this Vite + React site, so search engines can read real content from the built HTML.

Non-negotiables:
- Use SSR prerender as the default rendering strategy.
- Render all core page text in prerendered HTML.
- Do not rely on JavaScript to show primary content.
- Treat hydration mismatch warnings as release blockers.
- Hydrate only to enhance interactivity, not to inject core copy.

Do this:

1) Update package.json so "npm run build" performs ALL of the following in order:
   - vite build (client build)
   - vite build --ssr (SSR bundle using entry-server.tsx)
   - node prerender (execute prerender.js to write static HTML files)

2) Open prerender.js and ensure ALL website routes are listed so each route generates:
   dist/<route>/index.html

3) Make pages pre-render-safe:
   - Navigation visible without JavaScript (CSS hover/focus and <details> for mobile)
   - No hidden initial states on core content (avoid opacity:0 / display:none / animation-hidden starts)
   - Avoid client-only rendering for core page copy
   - Treat hydration mismatch warnings as a failure condition (fix them before shipping)

4) Run npm run build.

5) Verify the output files contain real content:
   - dist/index.html
   - dist/<route>/index.html
These files must contain headings, text, and links — not just <div id="root"></div>.
✅ What should happen

Built HTML files contain readable content (not just an empty root div).

Navigation and key page text are visible without JavaScript.

2

Step 2 — If your website tool blocks edits, update the build files manually

➡ What this step does

Some website builders do not allow you to edit key build files like package.json.

This step tells you exactly what to edit so pre-rendering runs automatically when you build.

If this feels technical or you do not have repository access, contact 4leggedIT and we can help.

📋 What to do
  1. Open package.json and find scripts.build.
  2. Change scripts.build so the build runs three things in order: client build, SSR build, then pre-render.
  3. Confirm you have a prerender.js file in the project root.
  4. Open prerender.js and confirm it pre-renders all pages you want indexed (so it writes dist/<route>/index.html for each route).
  5. Save/commit your changes.
  6. Push your changes and let your host deploy (Cloudflare Pages will rebuild automatically on git push).
  7. Verify the deployed HTML contains real page content (not an empty shell).
Copy exactly as shown. Do not modify.
Expand to copy: Example build script (Vite + React pre-render)
Copy exactly as shown. Do not modify.
{
  "scripts": {
    "build": "vite build && vite build --ssr src/entry-server.tsx --outDir dist/server && node prerender"
  }
}
Expand to copy: What to verify after build
Copy exactly as shown. Do not modify.
1) Use View Source (or fetch the page HTML) and confirm it contains real headings, text, and links (not only a root div).
2) Key pages return HTML content for their routes (not empty shells).
3) Navigation and key page text are visible without JavaScript.
4) No hydration mismatch warnings in build logs (treat as a release blocker).
✅ What should happen

Your npm run build output includes real HTML files per route (not empty shells).

Search engines can read your key pages because the built HTML contains text and links.

3

Step 3 — Verify your domain (Cloudflare DNS TXT record)

➡ What this step does

Google and Bing need proof you own your domain.

You prove ownership by adding a DNS TXT record in Cloudflare.

📋 What to do
  1. In Google Search Console, add your domain and choose DNS TXT verification.
  2. Copy the TXT record name and value exactly as Google provides.
  3. In Cloudflare: open your domain, then DNS, then add a TXT record using the exact name and value.
  4. If you want a plain-language overview of TXT records, see DNS Records 101 in Cloudflare.
  5. Wait a few minutes, then click Verify in Google.
  6. Repeat the same DNS TXT process in Bing Webmaster Tools.
  7. If your domain and DNS are not managed in Cloudflare yet, start with How to Transfer a Domain to Cloudflare.
✅ What should happen

Google and Bing both show your domain as verified.

If it fails, re-check the TXT record and try again after a few minutes.

4

Step 4 — Submit your sitemap

➡ What this step does

Your sitemap is the page list search engines use to discover your site.

Submitting it helps indexing start sooner.

📋 What to do
  1. In Google Search Console, open Sitemaps and submit your sitemap URL.
  2. In Bing Webmaster Tools, open Sitemaps and submit the same sitemap URL.
  3. Your sitemap URL is: https://YOURDOMAIN/sitemap.xml (replace YOURDOMAIN with your real domain).
✅ What should happen

Both tools accept the sitemap URL without errors.

Over time, you see pages being discovered and indexed.

5

Step 5 — Troubleshoot verification, sitemap, and indexing issues

➡ What this step does

This step is here so you don’t get stuck alone.

If anything in Steps 1–4 fails, we can help you finish safely.

📋 What to do
  1. Contact 4leggedIT for help with verification, sitemap submission, or indexing. Contact page.
  2. If you’re unsure what a term means (pre-render, sitemap, robots), check the Glossary.
✅ What should happen

You know who to contact and what to ask for.

You do not need to guess or try random fixes.

Official References

Open these only if something doesn’t match your screen.

You do not need to read them to complete the guide.

Google Search Console Bing Webmaster Tools Google: Verify site ownership Google: Submit a sitemap Cloudflare DNS: Create DNS records Cloudflare Pages: SEO Vite SSR Guide React Router: StaticRouter

Related How-To Sessions

Publish With Cloudflare Pages + GitHub

Deploy reliably and connect your domain (Cloudflare Pages).

Cloudflare Account Setup

Set up Cloudflare so your rescue owns DNS and the domain foundation.

How to Transfer a Domain to Cloudflare

Move your domain registration to Cloudflare when you're ready.

How We Develop Your Website

See how we generate crawlable pages, sitemaps, and a future-proof structure.

Want us to verify your pre-render + indexing setup?

We can review your build output, confirm your sitemap is correct, and help troubleshoot Google/Bing verification or indexing issues.

Get in TouchBack to Resources