404 Pages and SEO in Vue · Nuxt SEO
-
-
-
-
[1.4K](https://github.com/harlan-zw/nuxt-seo)
[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)
Learn SEO
Master search optimization
Nuxt
Vue
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
1.
2.
3.
4.
5.
# 404 Pages and SEO in Vue
404 errors don't hurt SEO, but soft 404s do. Learn proper HTTP status codes, custom 404 design, and crawl budget optimization for Vue applications.
[Harlan Wilton](https://x.com/harlan-zw)8 mins read Published Dec 17, 2025
What you'll learn
- 404 errors don't hurt SEO, but soft 404s do (200 status with error content)
- SSR required. SPAs return 200 for all routes and render errors client-side
- Return proper 404 HTTP status code from the server, not just client-side error pages
404 errors don't hurt SEO. They're expected: deleted products, outdated links, user typos all create legitimate 404s. Google ignores them.
Soft 404s hurt SEO. A soft 404 returns `200 OK` status but shows "page not found" content. Google excludes these from search results and wastes your
recrawling pages it thinks exist.
SSR required. SPAs typically return `200 OK` for all routes and render 404 content client-side. search engines see this as a soft 404.
## [Quick Setup](#quick-setup)
Return proper 404 status codes from your server:
Express
Vite
H3
```
import express from 'express'
const app = express()
app.get('*', (req, res) => {
// Check if route exists in your Vue Router config
const routeExists = checkRoute(req.path)
if (!routeExists) {
res.status(404).send(render404Page())
return
}
// Normal SSR render
res.send(renderVueApp(req.path))
})
function render404Page() {
return \`
404 Not Found
Page Not Found
The page you're looking for doesn't exist.
Go home
\`
}
```
```
// server.js for Vite SSR
import express from 'express'
import { createServer as createViteServer } from 'vite'
const app = express()
const vite = await createViteServer({
server: { middlewareMode: true }
})
app.use(vite.middlewares)
app.use('*', async (req, res) => {
const url = req.originalUrl
const routeExists = await checkRoute(url)
if (!routeExists) {
res.status(404)
const html = await vite.transformIndexHtml(url, render404Template())
res.send(html)
return
}
// Normal SSR render
const html = await renderSSR(url)
res.send(html)
})
```
```
import { defineEventHandler, setResponseStatus } from 'h3'
export default defineEventHandler((event) => {
const routeExists = checkRoute(event.path)
if (!routeExists) {
setResponseStatus(event, 404)
return render404Page()
}
return renderVueApp(event.path)
})
```
Add `noindex` meta tag to prevent 404 pages from appearing in search results if accidentally crawled with wrong status code.
## [Soft 404 Errors Explained](#soft-404-errors-explained)
Soft 404 detection happens when Google sees content that looks like an error page but receives `200 OK` status ([Google Search Central](https://developers.google.com/search/docs/crawling-indexing/http-network-errors#soft-404-errors)).
Common triggers:
- "Page not found" in title or heading
- Minimal content (under ~200 words)
- Redirecting all 404s to homepage
- Empty page body with "coming soon" message
- Generic error messages without meaningful content
Google Search Console flags soft 404s in the "Page Indexing" report. Fix by returning proper `404` status code.
### [Why Soft 404s Hurt SEO](#why-soft-404s-hurt-seo)
1. **Wasted crawl budget** - Google recrawls pages thinking they exist, leaving less budget for real pages
2. **Index bloat** - Search Console shows thousands of indexed URLs that don't exist
3. **Ranking signals confusion** - Google doesn't know if content moved or disappeared
4. **No link equity transfer** - Can't redirect or canonicalize non-existent pages properly
### [Vue SPA Soft 404 Problem](#vue-spa-soft-404-problem)
Vue Router handles routing client-side. Server returns `200 OK` for all paths:
```
// ❌ Bad - SPA returns 200 for /fake-page
app.get('*', (req, res) => {
res.send(indexHtml) // Always 200 OK
})
```
Vue Router then renders 404 component in browser after JavaScript executes. Google sees `200 OK` response, might see error content, flags as soft 404.
**Solution:** Check route existence server-side before rendering.
## [Checking Routes Server-Side](#checking-routes-server-side)
Match incoming paths against your Vue Router configuration:
```
import { createMemoryHistory, createRouter } from 'vue-router'
import routes from './routes'
function checkRoute(path: string): boolean {
const router = createRouter({
history: createMemoryHistory(),
routes
})
const resolved = router.resolve(path)
return resolved.matched.length > 0
}
```
Integrate with server:
Express
Vite
H3
```
import express from 'express'
import { checkRoute } from './router-check'
const app = express()
app.get('*', (req, res) => {
if (!checkRoute(req.path)) {
res.status(404).send(render404Page())
return
}
res.send(renderVueApp(req.path))
})
```
```
import express from 'express'
import { checkRoute } from './router-check'
const app = express()
app.use('*', async (req, res) => {
if (!checkRoute(req.originalUrl)) {
res.status(404)
res.send(await render404SSR())
return
}
res.send(await renderVueApp(req.originalUrl))
})
```
```
import { defineEventHandler, setResponseStatus } from 'h3'
import { checkRoute } from './router-check'
export default defineEventHandler((event) => {
if (!checkRoute(event.path)) {
setResponseStatus(event, 404)
return render404Page()
}
return renderVueApp(event.path)
})
```
## [Dynamic Routes Considerations](#dynamic-routes-considerations)
Dynamic routes (`/products/:id`) need data fetching to determine existence:
```
async function checkDynamicRoute(path: string): Promise {
const match = path.match(/^\/products\/([^/]+)$/)
if (!match)
return false
const productId = match[1]
const exists = await productExists(productId)
return exists
}
async function productExists(id: string): Promise {
// Query database/API
const product = await db.products.findById(id)
return !!product
}
```
Server-side route checking:
Express
Vite
H3
```
app.get('/products/:id', async (req, res) => {
const exists = await productExists(req.params.id)
if (!exists) {
res.status(404).send(render404Page())
return
}
res.send(await renderProductPage(req.params.id))
})
```
```
app.use('/products/:id', async (req, res) => {
const id = req.params.id
const exists = await productExists(id)
if (!exists) {
res.status(404).send(await render404SSR())
return
}
res.send(await renderProductPage(id))
})
```
```
import { defineEventHandler, getRouterParam, setResponseStatus } from 'h3'
export default defineEventHandler(async (event) => {
const id = getRouterParam(event, 'id')
const exists = await productExists(id)
if (!exists) {
setResponseStatus(event, 404)
return render404Page()
}
return renderProductPage(id)
})
```
## [404 vs 410 Status Codes](#_404-vs-410-status-codes)
**404 Not Found** - Resource doesn't exist, might never have existed, might come back:
- User typos
- Outdated external links
- Deleted products that might return to inventory
- Seasonal content (holiday pages)
**410 Gone** - Resource existed, now permanently removed:
- Discontinued products
- Deleted blog posts (no redirect target)
- Expired promotions
- Intentionally removed content
Google treats both similarly for indexing. removes from search results. 410 signals faster removal but rarely needed. Use 404 for most cases.
## [Custom 404 Page Design](#custom-404-page-design)
Good 404 pages keep users on your site:
```
Page Not Found
The page you're looking for doesn't exist or has moved.