You built a beautiful Vue.js SPA. Smooth transitions. Reactive components. Elegant code.
Then you launched it … aaaaand Google ignored it.
The problem isn’t your code. It’s that Googlebot doesn’t run JavaScript the way a browser does. Your carefully crafted SPA delivers an empty <div id="app"> to crawlers. No content, no headings, no links.
If Google can’t read it, nobody finds it.
The Problem: JavaScript-Framed Content Is Invisible
When you ship a client-side rendered Vue app, this is what Googlebot sees:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
Everything is generated inside app.js.
For a business website, this is a nightmare. If your content isn’t in the initial HTML, you’re almost invisible to crawlers.
Nuxt Static Generation: Ship Real HTML
Nuxt (the framework built on top of Vue) can pre-render every page at build time. The output is plain .html files.
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
preset: 'static',
},
})
Enter fullscreen mode Exit fullscreen mode
That’s the core config. Run nuxi generate, and Nuxt crawls every route, executes your components, and writes out static HTML files. What Googlebot sees is identical to what a user sees.
This is the exact setup I use for fm-netz.de – my own hosting and webdesign business for small German companies.
답글 남기기