SEO by platform · Updated
Vue SEO: server rendering, routing and metadata
A Vue single-page app rendered in the browser gives crawlers little HTML to read. Vue's own guide recommends server-side rendering or static generation when SEO matters, usually through Nuxt, and HTML5 history mode instead of hash URLs.
Founder, SEO·AEO·GEO
Builds SEO·AEO·GEO and writes the crawler, schema, and citation research published here.
How Vue serves pages to crawlers
A client-only Vue app mounts into an empty element and builds the page with JavaScript. Vue SSR renders the same components to HTML on the server; static site generation (SSG) does it at build time.
Rendering options
| Option | Use it for |
|---|---|
| Nuxt (SSR or static) | Most Vue sites that need to rank |
| VitePress | Documentation and content sites |
| Vite SSG / pre-rendering | Mostly static marketing pages |
| Custom Vue SSR | Teams that need full control |
Vue's SSR guide notes that search engine crawlers will see the fully rendered page with SSR, and that pre-rendering is simpler when only a few marketing pages need to rank.
Routing
Use createWebHistory (HTML5 history mode) instead of createWebHashHistory. Hash URLs (/#/about) aren't treated as separate pages by search engines, and Vue Router's docs note hash mode has a bad impact on SEO. History mode needs a server fallback for direct visits, and should return real 404s for unknown routes.
Titles and meta
- Set a unique title and description per route, rendered on the server (Nuxt's useSeoMeta or a head manager such as Unhead).
- Output canonical and Open Graph tags per route.
- Use <router-link>, which renders real <a href> links.
Vue and AI search
- Check robots.txt allows the AI search crawlers you want: OAI-SearchBot (ChatGPT search), Claude-SearchBot, PerplexityBot. See the AI crawler list and the robots.txt generator.
- Check your host's or CDN's bot protection doesn't block them even when robots.txt allows them.
- Make sure the main text is in the HTML the server sends. AI crawlers don't run JavaScript.
- Avoid nosnippet and tiny max-snippet values on pages you want quoted; they also keep pages out of Google's AI Overviews.
For Nuxt specifics, see Nuxt SEO.
Check it on your own site
What the free audit tests for this
- Raw HTML visibility
- Title tag
- Internal links
One URL, about 20 seconds, no login. You get the result of every check and the exact fix for the top three issues.
Audit your website freeFAQ
Is Vue good for SEO?+
With SSR or static generation, yes. A client-only Vue SPA is harder for search engines and invisible to AI crawlers.
Does hash mode hurt SEO?+
Yes. Vue Router's documentation says hash mode has a bad impact on SEO; use history mode.
Sources
- Server-Side Rendering (SSR) — Vue.js Guide
- Different History modes — Vue Router
- Understand JavaScript SEO basics — Google Search Central