HTTP Redirects in Vue

Learn how to implement SEO-friendly redirects in Vue applications.

Introduction

HTTP redirects tell search engines and users that content has moved to a new location. When implemented correctly, they preserve your SEO value while ensuring users find your content.

✅ Good for:

Site migrations and redesigns
URL structure changes
Moving to new domains
Fixing broken URLs
Merging duplicate content

❌ Don't use for:

Temporary content changes (use 302 redirects)
Duplicate content (use canonical tags)
Blocked content (use noindex)
Cross-language content (use hreflang)

Quick Setup

In Vue applications, implement redirects at the server level:

server.ts

// example using Express
app.get('/old-page', (req, res) => {
  res.redirect(301, '/new-page')
})

// Pattern matching
app.get('/blog/:slug', (req, res) => {
  res.redirect(301, `/articles/${req.params.slug}`)
})

server.ts

// example using Vite SSR middleware
app.use((req, res, next) => {
  if (req.path === '/old-page') {
    return res.redirect(301, '/new-page')
  }
  next()
})

Understanding Redirects

Redirect Types

301: Permanent redirect - transfers SEO value
302: Temporary redirect - keeps SEO value on original URL
307: Temporary redirect (preserves HTTP method)
308: Permanent redirect (preserves HTTP method)

For SEO, 301 redirects are most common as they pass ranking signals to the new URL.

Important Notes

Implement at server level when possible
Avoid redirect chains (A → B → C)
Keep redirects active for 6+ months
Monitor in Search Console
Consider impact on crawler budget

Common Patterns

Domain Migration

server.ts

// example using Express
app.use((req, res, next) => {
  const host = req.get('host')

  // Redirect old domain to new
  if (host === 'old-domain.com') {
    return res.redirect(301, `https://new-domain.com${req.path}`)
  }
  next()
})

URL Structure Changes

server.ts

// Single redirects
app.get('/old', (req, res) => {
  res.redirect(301, '/new')
})

// Pattern matching
app.get('/blog/:slug', (req, res) => {
  res.redirect(301, `/articles/${req.params.slug}`)
})

// Parameter mapping
app.get('/products/:id', (req, res) => {
  res.redirect(301, `/shop/${req.params.id}`)
})

HTTPS Enforcement

server.ts

app.use((req, res, next) => {
  if (req.headers['x-forwarded-proto'] !== 'https') {
    return res.redirect(301, `https://${req.get('host')}${req.path}`)
  }
  next()
})

Learn more about HTTPS in our security guide.

WWW Standardization

server.ts

app.use((req, res, next) => {
  const host = req.get('host')

  // Redirect non-www to www
  if (!host.startsWith('www.')) {
    return res.redirect(301, `https://www.${host}${req.path}`)
  }
  next()
})

Testing

Manual Checks

Test direct URL access
Verify correct status code (301 vs 302)
Check redirect destination
Monitor redirect chains
Test with/without trailing slashes
Verify query parameter handling

Using Tools

Google Search Console - Monitor crawl errors
Browser Dev Tools - Check network responses
Screaming Frog - Bulk redirect testing

Common Issues

Redirect Chains

Bad:

/old → /interim → /final

Good:

/old → /final
/interim → /final

Mixed Content

When moving to HTTPS, update all resource URLs:

server.ts

app.use((req, res, next) => {
  // Redirect HTTP to HTTPS
  if (req.headers['x-forwarded-proto'] === 'http') {
    return res.redirect(301, `https://${req.get('host')}${req.path}`)
  }
  next()
})

Redirect Loops

Avoid circular redirects:

server.ts

// ❌ Bad
app.get('/page-a', (req, res) => res.redirect(301, '/page-b'))
app.get('/page-b', (req, res) => res.redirect(301, '/page-a'))

// ✅ Good
app.get('/page-a', (req, res) => res.redirect(301, '/final'))
app.get('/page-b', (req, res) => res.redirect(301, '/final'))