CloudFront custom error responses are useful for single-page apps, but they can create SEO problems when a missing blog URL, deleted asset, or invalid route returns an app shell with a 200 status. Search engines need the real article HTML for valid pages and a real 404 for missing pages.
Use this for React, S3, CloudFront, headless WordPress, or static sites where clean routes, prerendered blog pages, and custom error behavior share the same distribution.
Quick answer
CloudFront Custom Error App Shell 404 SEO Fix should be handled with a narrow evidence-first workflow: classify routes, fetch status and body, fix valid article html, then verify the result before making broader changes.
What to check first
- List valid clean routes, prerendered blog routes, app shell routes, missing routes, and deleted asset paths.
- Fetch each path with curl and record status code, title, canonical, and first H1.
- Confirm valid blog URLs return article HTML, not only the app shell.
- Confirm missing URLs return a 404 status with a helpful not-found page.
- Invalidate CloudFront paths after changing custom error responses, prerender output, or sitemap files.
Diagnostic table
Use this table to keep the work practical. It connects the symptom to evidence and a verification step.
| Action | Evidence to collect | How to verify |
|---|---|---|
| Classify routes | List valid clean routes, prerendered blog routes, app shell routes, missing routes, and deleted asset paths. | Valid blog routes return post-specific HTML and canonical tags. |
| Fetch status and body | Fetch each path with curl and record status code, title, canonical, and first H1. | Missing blog routes return a 404 status. |
| Fix valid article HTML | Confirm valid blog URLs return article HTML, not only the app shell. | Deleted assets do not return a 200 app shell. |
| Return real 404s | Confirm missing URLs return a 404 status with a helpful not-found page. | The sitemap includes only valid clean URLs. |
Why this usually happens
- SPA fallback rules are often configured to make browser navigation work, then reused for every path.
- A 404 can be remapped to 200 for app routing, which is wrong for deleted or never-existing content.
- Prerendered pages and app-shell routes may live in the same S3 bucket.
- CloudFront cache can preserve the old response after the origin is fixed.
Field notes
- Test clean URLs only. Do not create new duplicate .html versions for blog posts.
- Use headers and body checks together. Status code alone is not enough.
- Sample at least one valid blog page, one app route, one missing blog page, and one missing asset.
Useful command or data shape
Adapt paths, IDs, and privacy handling to the site before running commands or storing data on production.
curl -sS -I https://example.com/blog/valid-post
curl -sS https://example.com/blog/valid-post | grep -Ei '<title>|canonical|BlogPosting'
curl -sS -I https://example.com/blog/not-real-post
curl -sS -I https://example.com/assets/not-real.js
# Valid content should be specific. Missing content should not look indexable.
Safe fix order
Do the work in a sequence that makes each result easy to prove. Stop if a step produces new evidence that changes the incident scope.
- Classify routes
- Fetch status and body
- Fix valid article HTML
- Return real 404s
- Invalidate cache
What to tell the client or owner
Explain which paths are app routes, which paths are prerendered content, and which paths should stay real 404s. Include curl examples for each.
Production verification checklist
- Valid blog routes return post-specific HTML and canonical tags.
- Missing blog routes return a 404 status.
- Deleted assets do not return a 200 app shell.
- The sitemap includes only valid clean URLs.
Mistakes to avoid
- Do not judge the fix by one browser or the homepage only.
- Do not delete evidence before recording usernames, file paths, timestamps, and response headers.
- Do not add a cache, security, or tracking plugin while the original problem is still unclear.
- Do not leave test users, temporary debug logs, or broad API keys active after verification.
When HandL WP should help
Bring in help when this affects leads, checkout, search visibility, malware risk, paid media reporting, or a client production site. HandL WP can trace the issue through WordPress, hosting, cache, tracking, and Search Console, then verify the workflow after the technical fix.
If this is active on a production site, fix CloudFront SEO routing.
Related HandL WP guides
Use these related guides when the same issue touches tracking, security, checkout, or crawler visibility.
- CloudFront sitemap cache invalidation Search Console
- React app shell soft 404 Search Console report
- WordPress app shell 404 status code checklist