Bahasa

Panduan Nuxt SEO

Nuxt ships rendering sisi server oleh default, tetapi itu's sebuah per-route setting, not sebuah guarantee — full HTML untuk crawler hanya pada routes itu pertahankan ini. rendering modes, useSeoMeta(), @nuxtjs/seo toolkit, hydration dan Nitro caveats, Core Web Vitals, dan mistakes itu quietly cost Anda.

Pertama kali diterbitkan: 26 Jun 2026 · Terakhir diperbarui: 3 Agu 2026 · Advanced
Bahasa
AIDitulis olehAI v2
1 sinyal bukti di halaman ini

Nuxt server-renders halaman oleh default, so sebuah route itu mempertahankan itu default gives crawler sebuah complete HTML document alih-alih empty shell sebuah plain Vue SPA ships — tetapi ini adalah sebuah per-route setting: routeRules atau sebuah global ssr:salah dapat flip apa pun route untuk CSR, so verify actual route alih-alih assuming dari framework name. foundational decision adalah rendering mode per route — SSR (default), SSG via nuxt generate, atau hybrid route aturan — because meta tags, schema, dan sitemaps semua come setelah itu. gunakan useSeoMeta() untuk meta, treat Harlan Wilton's @nuxtjs/seo bundle sebagai sebuah optional ketiga-party toolkit (not Nuxt core) untuk robots/sitemap/OG/schema/canonical, tidak pernah reach untuk dynamic rendering (Google deprecated ini), verify hydration/payload dan Nitro deployment-preset/cache perilaku independently dari server HTML, dan remember itu AI-crawler rendering contracts vary oleh provider — SSR/SSG puts konten di raw HTML dan maximizes coverage.

TL;DR — Nuxt’s default adalah rendering sisi server, so sebuah route itu mempertahankan itu default gets sebuah complete DOM alih-alih empty shell sebuah plain Vue SPA ships — tetapi itu’s sebuah per-route outcome: ssr: false atau sebuah routeRules override dapat turn apa pun route ke CSR atau hybrid, so test actual route, not project name. rendering strategy adalah foundational decision — SSR (default), SSG (nuxt generate), atau hybrid routeRules — because meta, schema, dan sitemaps semua come setelah ini. gunakan useSeoMeta() untuk meta tags (useHead() untuk rest dari head, server-hanya variants when Anda tidak perlu reactivity), dan treat Harlan Wilton’s @nuxtjs/seo bundle sebagai sebuah optional ketiga-party toolkit untuk robots/sitemap/OG/schema/canonical — not bagian dari Nuxt core, dan not proof -nya output adalah correct until Anda periksa ini. tidak pernah gunakan dynamic rendering (Google deprecated ini). AI-crawler rendering varies oleh provider — SSR/SSG maximizes raw-HTML coverage. Beyond initial HTML, verify hydration/payload, Nitro deployment presets dan caching, dan direct HTTP status independently — server HTML alone doesn’t prove apa pun dari itu. usual JS-SEO aturan masih apply: nyata <a href> tautan, don’t block JS/CSS, watch rendered vs. raw HTML.

Nuxt adalah Vue’s jawaban untuk SPA masalah

Vue, oleh itself, ships sebuah single-halaman application: sebuah HTML shell plus JavaScript itu membangun DOM di browser. Nuxt adalah meta-framework pada top dari Vue (running pada Nitro server mesin di Nuxt 3, dengan Nuxt 4 following di 2025), dan -nya whole alasan untuk existing — dari sebuah SEO standpoint — adalah itu ini renders pada server oleh default. setiap halaman arrives sebagai sebuah fully-formed HTML document, which adalah exactly what Googlebot ingin untuk read without having untuk execute JavaScript pertama. Plain Vue SEO adalah -nya own topic dengan -nya own failure modes; here I’m assuming Anda’ve picked Nuxt precisely so Anda tidak memiliki untuk fight SPA masalah.

ini adalah yang sama poin I membuat tentang JavaScript umumnya: “any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” (terjemahan) “apa pun jenis dari SSR, static rendering, dan prerendering setup adalah going untuk menjadi fine untuk mesin pencari. Gatsby, Next, Nuxt, etc., adalah semua great.” Nuxt’s defaults adalah pointed right cara. sebagian besar Nuxt SEO masalah adalah people turning itu defaults off, atau layering mistakes pada top dari them.

rendering strategy adalah foundation — decided per route, not per project

sebelum meta tags, sebelum schema, sebelum sitemaps, pertanyaan itu decides everything adalah how melakukan HTML get produced untuk ini spesifik route? Nuxt documents universal (server) rendering sebagai app-wide default, tetapi itu default isn’t sebuah route-tingkat guarantee: sebuah global ssr: false switches whole app untuk client rendering, dan routeRules dapat assign sebuah berbeda mode untuk apa pun URL pattern. “This is a Nuxt app” (terjemahan) “ini adalah sebuah Nuxt app” tells Anda nothing tentang how one particular halaman renders — Anda memiliki untuk periksa route. Nuxt gives Anda five strategies:

ModeHow Anda set iniSEO impactBest untuk
Universal / SSRDefault (ssr: true)Excellent — full HTML setiap permintaanDynamic, personalized konten
Static / SSGnuxt generateExcellent — HTML dibangun di deploy timeBlogs, docs, marketing
HybridrouteRules per routeExcellent — mix per routebesar mixed-konten situs
SPA / CSRssr: falsePoor untuk terindeks kontenDashboards, admin panels
Edge-sideDeployment targetExcellent — rendah TTFBGlobal performa

official Nuxt docs adalah blunt tentang why rendering sisi klien adalah wrong choice untuk konten: “Indexing and updating the content delivered via client-side rendering takes more time” (terjemahan) “pengindeksan dan updating konten delivered via rendering sisi klien takes more time”, whereas dengan server (universal) rendering “web crawlers can directly index the page’s content.” (terjemahan) “web crawler dapat directly indeks halaman’s konten.” Evidence for this claim Nuxt documents that universal rendering delivers HTML content immediately and allows crawlers to index it directly. Scope: Nuxt rendering; no indexing guarantee. Confidence: high · Verified: Nuxt: Rendering modes (Nuxt rendering docs.) CSR (ssr: false) adalah positioned untuk back-office, dashboards, dan games — not anything Anda ingin terindeks.

Hybrid rendering adalah power move untuk besar situs. Route aturan di nuxt.config.ts let Anda atur rendering dan caching mode per URL pattern:

routeRules: {
  '/blog/**':     { prerender: true },        // SSG for the blog
  '/product/**':  { swr: 3600 },              // ISR-style: regenerate hourly
  '/admin/**':    { ssr: false },             // SPA for the admin area
  '/checkout/**': { ssr: true },              // always-fresh SSR
}

swr (stale-while-revalidate) dan isr (incremental static regeneration) generate sebuah halaman statically lalu refresh ini di background — ideal untuk tinggi halaman-count e-commerce atau news where sebuah full rebuild pada setiap perubahan isn’t practical. Nuxt Islands (<NuxtIsland>) render components without shipping client-side JavaScript, cutting hydration cost dan helping INP — Core Web Vital itu’s sebagian besar sering masalah pada Nuxt apps.

cara verify what Anda actually shipped: View Source menampilkan raw HTML server dikirim; jika Anda konten adalah there, Anda’re server-rendering. DevTools’ Elements panel menampilkan rendered DOM. dan GSC’s pemeriksaan URL alat menampilkan what Google actually fetched dan rendered — sumber kebenaran. Don’t trust “it looks fine in my browser.” (terjemahan) “ini looks fine di my browser.”

How Googlebot handles sebuah Nuxt app

Google processes apa pun JavaScript app di three phases — crawl, render, indeks — dan catch adalah timing: rendering happens di sebuah queue, not instantly. sebagai I put ini di my JavaScript SEO guide, renderer adalah patient — “there is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” (terjemahan) “tidak ada fixed timeout untuk renderer… ini adalah really patient, dan Anda seharusnya not menjadi concerned.” tetapi patient isn’t yang sama sebagai fast untuk fresh konten. jika Anda ship sebuah client-rendered halaman, Anda konten doesn’t exist untuk Google until itu render wave runs; SSR dan SSG close itu gap because HTML adalah complete pada pertama fetch.

Two more things penting di scale. rendering JavaScript adalah expensive — dari my 2019 JavaScript SEO talk (Ungagged), crawl costs go up oleh roughly 20× once Google memiliki untuk render (directional, tetapi order dari magnitude masih holds). dan Google takes sebagian besar restrictive directive di seluruh raw dan rendered HTML — so sebuah noindex injected oleh JavaScript akan win di atas sebuah index di raw HTML, dan vice versa. sebuah canonical injected via JavaScript adalah respected hanya jika there’s no canonical di raw HTML sudah. pertahankan robots dan canonical signals di server-rendered HTML, which Nuxt melakukan untuk Anda when SSR adalah pada.

AI-crawler reality

ini adalah 2026 wrinkle. AI crawler — GPTBot, ClaudeBot, PerplexityBot, dan rest — umumnya don’t execute JavaScript di semua. mereka indeks raw HTML dan nothing else. So sebuah client-rendered Nuxt halaman adalah effectively invisible untuk AI jawaban mesin. SSR atau SSG isn’t hanya better untuk Google here; ini adalah price dari entry untuk jawaban mesin optimization too. jika Anda ingin Anda konten cited oleh ChatGPT, Perplexity, atau Claude, ini memiliki untuk menjadi di HTML pada pertama fetch.

Beyond initial HTML: payload, hydration, dan kode status

Getting server HTML dengan Anda konten di ini adalah necessary tetapi not sufficient — several things dapat masih go wrong downstream dari itu pertama respons, dan “I checked View Source” (terjemahan) “I diperiksa View Source” doesn’t cover them:

  • Payload dan hydration. Universal rendering mengirim HTML dan sebuah serialized data payload client menggunakan untuk hydrate — attach event listeners dan pick up where server left off — without re-fetching. server HTML looking right doesn’t prove hydration succeeded, itu client navigation reproduces yang sama konten, atau itu payload isn’t stale. jika sebuah halaman feels fine pada pertama muat tetapi breaks setelah sebuah client-side route perubahan, itu’s sebuah hydration/payload masalah, not sebuah rendering-mode masalah.
  • <ClientOnly> dan browser-hanya konten. Wrapping something di <ClientOnly> — umum untuk browser-API-dependent widgets — berarti ini adalah absent dari server respons bahkan pada sebuah otherwise-universal route. jika Anda main konten, sebuah key tautan, atau Anda meta tags end up inside sebuah client-hanya boundary, crawler dan AI bot itu hanya read raw HTML miss ini, regardless dari Anda rendering mode setting. Inspect actual respons, not hanya rendering mode config.
  • kode status dan redirects aren’t self-certifying. sebuah Nuxt halaman error rendering di browser, atau sebuah navigateTo()/composable-driven redirect, doesn’t oleh itself prove what HTTP status direct server respons dikirim. Google’s guidance adalah explicit itu meaningful kode status penting untuk crawling dan pengindeksan — confirm actual header dengan curl -I, not what client-rendered halaman error displays.

None dari ini adalah sebuah argument terhadap universal rendering — ini adalah reminder itu “the HTML is server-rendered” (terjemahan) “ HTML adalah server-rendered” adalah pertama periksa, not last one.

Nitro, deployment presets, dan cache boundaries

Nuxt’s server output adalah dibangun oleh Nitro, dan Nitro compiles differently depending pada deployment preset Anda target (Node server, Cloudflare, Vercel, Netlify, static, dan others). itu penting untuk SEO because presets dan adapters dapat differ di runtime APIs available, caching perilaku, streaming mendukung, regional deployment, dan filesystem access — sebuah route aturan atau server handler itu berfungsi di bawah one preset isn’t guaranteed untuk behave identically di bawah lainnya. Two consequences worth testing explicitly alih-alih assuming:

  • Cache keys dan invalidation adalah route-spesifik, not automatic. swr dan isr route aturan cache dan regenerate output, tetapi sebuah wrong cache key, missing invalidation, atau sebuah caching header set oleh Anda deployment platform dapat sajikan stale, personalized, atau inconsistent HTML untuk crawler. periksa actual respons age dan apa pun Cache-Control/Age headers pada sebuah live URL, not hanya routeRules config.
  • Production parity isn’t guaranteed oleh staging perilaku. sebuah route rendering correctly di local dev atau sebuah preview deployment doesn’t confirm production preset produces yang sama output — server routes, redirects, dan error handling live di Nitro’s server layer, dan itu layer adalah bagian sebagian besar mungkin untuk differ oleh target. Test production URL directly setelah apa pun deployment perubahan, yang sama cara Anda’d verify rendering mode.

Meta tags: useSeoMeta() dan useHead()

Nuxt’s head management runs pada Unhead, dan ini gives Anda two composables untuk berbeda jobs.

useSeoMeta() adalah one untuk reach untuk untuk SEO dan social meta tags. ini adalah sebuah flat, jenis-safe API dengan typed parameters. Evidence for this claim useSeoMeta is a typed Nuxt API for SEO and social meta tags. Scope: Current Nuxt composable. Confidence: high · Verified: Nuxt: useSeoMeta ini helps hindari classic Open Graph bug dari menggunakan name where Anda needed property:

useSeoMeta({
  title: 'My Page Title',
  ogTitle: 'My Page Title',
  description: 'Concise page-specific description with the key information first',
  ogDescription: 'Concise social description tailored to this page',
  ogImage: 'https://mysite.com/og-image.png', // must be an absolute URL
  twitterCard: 'summary_large_image',
})

useHead() adalah umum-purpose head alat untuk everything else — scripts, tautan tags, body attributes, dan judul templates:

useHead({
  titleTemplate: '%s · My Site Name',
  htmlAttrs: { lang: 'en' },
})

reliable layering pattern adalah: static defaults (charset, viewport, favicon) di nuxt.config.ts → situs-wide judul template dan global OG defaults di app.vue → halaman-spesifik overrides via useSeoMeta() di halaman component. sebuah umum bug adalah putting useSeoMeta() di sebuah layout alih-alih halaman, which overwrites spesifik halaman tags dengan generic ones. dan since mesin pencari read initial muat, SEO meta umumnya doesn’t perlu untuk menjadi reactive — useServerHead() skips client-side re-execution.

Which API, dan what ini actually proves:

APIScopeReactive?What ini proves tentang output
useSeoMeta()Flat, typed SEO/social meta hanyaYes (default)Sets typed properties correctly — not itu route adalah unique, canonical, atau dapat diindeks; Anda masih own itu logic
useHead()Anything di <head> — scripts, tautan, attrs, judul templateYes (default)umum head control; sama caveat — API gunakan isn’t proof dari sebuah correct server respons
useServerHead() / server-hanya panggilansama sebagai aboveNo — server hanya, skips client re-executionConfirms tag ships once di server HTML; doesn’t confirm client navigation re-sets ini jika Anda rely pada ini there

Calling one dari ini composables tells Anda API ran — ini doesn’t oleh itself tell Anda what sebuah direct server respons atau sebuah client-side route perubahan actually emits. Confirm dengan View Source atau curl, not hanya “I called useSeoMeta().” (terjemahan) “I called undefined.”

@nuxtjs/seo module ecosystem (Harlan Wilton) — optional, not core

Nuxt core doesn’t ship sebuah sitemap, sebuah robots.txt, OG image generation, atau Schema.org out dari box — itu adalah outside Nuxt’s own primitives (useHead, useSeoMeta, route aturan, rendering modes). community fills itu gap dengan Harlan Wilton’s @nuxtjs/seo — sebuah separately-installed, ketiga-party umbrella package (nuxtseo.com, currently di v5.x, actively maintained, targeting Nuxt 3,16+ dan Nuxt 4) itu bundles six modules. Installing ini gives Anda sitemap, robots, OG-image, dan schema generation — ini doesn’t oleh itself guarantee output adalah correct untuk Anda routes; verify what ini produces yang sama cara Anda’d verify anything else:

ModuleWhat ini melakukan
@nuxtjs/robotsrobots.txt + meta robots + X-Robots-Tag headers
@nuxtjs/sitemapAuto sitemap XML dari halaman + dynamic routes
nuxt-og-imageDynamic OG images (sebuah Vue template → sebuah image)
nuxt-schema-orgSchema.org JSON-LD data terstruktur
nuxt-seo-utilsCanonical URLs, breadcrumbs, defaults
nuxt-link-checkerbangun-time broken-tautan detection

Install whole bundle dengan npx nuxt module add seo, atau grab individual modules (npx nuxt module add sitemap robots). sebuah few behaviors worth knowing:

  • @nuxtjs/sitemap auto-generates dari Anda pages/ directory plus dynamic routes, splits ke sebuah sitemap indeks automatically past 50 000 URLs, mendukung i18n multi-language sitemaps, dan memiliki dibangun-di IndexNow mendukung. One thing untuk get right: Google ignores changefreq dan priority; hanya sebuah accurate lastmod penting, dan hanya when konten genuinely perubahan.
  • @nuxtjs/robots generates robots.txt, robots meta tag, dan X-Robots-Tag header — dan oleh default ini disallows semua crawler pada non-production environments, which adalah exactly staging-pengindeksan footgun itu bites headless membangun. ini juga gives Anda per-bot aturan, so Anda dapat block GPTBot specifically while leaving everyone else alone (menjadi intentional — block sebuah AI crawler dan ini won’t cite Anda).
  • nuxt-seo-utils handles canonical URLs dan, secara berguna, strips tracking parameters (utm_*, fbclid, gclid) dari canonicals automatically.

nuxt/image dan Core Web Vitals

@nuxt/image adalah image module: automatic responsive srcset, modern formats (WebP/AVIF), dibangun-di optimization melalui CDN providers, dan lazy memuat. Two aturan carry sebagian besar dari SEO nilai:

  • tidak pernah lazy-muat LCP image. Anda hero image seharusnya muat eagerly; lazy-memuat ini delays Anda Largest Contentful Paint.
  • selalu set width dan height so browser reserves space dan Anda tidak take sebuah Cumulative Layout Shift hit.
<NuxtImg
  src="/hero.jpg"
  width="1200"
  height="630"
  alt="Descriptive alt text"
  :loading="isHeroImage ? 'eager' : 'lazy'"
  format="webp"
/>

2026 targets untuk aim untuk (p75): LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1. pada Nuxt apps, INP adalah one itu tends untuk suffer because hydration membuat input lag — which adalah exactly what Nuxt Islands dan <NuxtIsland> adalah untuk.

Nuxt konten + SEO

jika Anda’re menggunakan @nuxt/content ( markdown/MDX konten module), integration dengan @nuxtjs/seo adalah straightforward tetapi memiliki one ordering gotcha: muat @nuxtjs/seo sebelum @nuxt/content di Anda modules array. Anda dapat lalu set SEO di konten frontmatter (title, description, robots, ogImage, schemaOrg) dan pull ini ke Anda [slug].vue template dengan useSeoMeta() setelah fetching konten. ini adalah Nuxt-native versi dari headless-CMS pattern, dan yang sama “rebuild what the plugin did” (terjemahan) “rebuild what plugin melakukan” discipline applies.

umum Nuxt SEO mistakes

  1. menggunakan SPA mode (ssr: false) untuk konten Anda ingin terindeks. paling expensive mistake — dan one itu membuat Anda invisible untuk AI crawler.
  2. Relative URLs untuk OG images. ogImage harus menjadi sebuah absolute URL atau social previews break.
  3. useSeoMeta() di sebuah layout alih-alih halaman — generic tags overwrite halaman-spesifik ones.
  4. Not verifying rendered HTML — View Source ≠ DevTools ≠ what Google rendered. gunakan pemeriksaan URL.
  5. Blocking JS/CSS di robots.txt — Google won’t render dari blocked files.
  6. Leaving staging noindex/disallow di place setelah launch (atau, conversely, forgetting @nuxtjs/robots blocks non-prod oleh default dan wondering why prod adalah fine tetapi sebuah custom env isn’t).
  7. Lazy-memuat LCP image — tanks Anda LCP.
  8. Missing width/height pada images — CLS.
  9. changefreq/priority di sitemaps — Google ignores them; hanya lastmod counts.
  10. Reaching untuk dynamic rendering. Google deprecated ini — “dynamic rendering is a workaround and not a long-term solution” (terjemahan) “dynamic rendering adalah sebuah workaround dan not sebuah panjang-istilah solusi” — dan ini hanya menyajikan mesin Anda configure ini untuk, missing Bing dan setiap AI crawler. dengan Nuxt Anda tidak pernah perlu ini: SSR dan SSG sudah give crawler complete HTML.

llms.txt dan AEO

llms.txt adalah sebuah plain-text file — robots.txt’s cousin — itu helps AI alat navigate Anda konten. nuxt-llms module auto-generates /llms.txt dan /llms-full.txt dari Nuxt konten. sebagai dari late 2025 -nya primary consumers adalah MCP server dan AI coding alat (Cursor, Claude Code) alih-alih ChatGPT atau Perplexity directly, dan ini adalah sebagian besar berguna untuk documentation situs dan technical blogs — less so untuk e-commerce atau news. Worth menambahkan jika Anda’re sebuah docs/dev situs; not sebuah priority otherwise.

Where ini fits

Nuxt SEO adalah really sebuah concrete application dari JavaScript SEO melalui Nuxt’s own conventions — dan ini overlaps heavily dengan SEO untuk sebuah CMS headless topic when Anda Nuxt frontend pulls dari sebuah headless backend. principles don’t perubahan; Nuxt hanya gives Anda baik defaults dan sebuah strong module ecosystem untuk implement them dengan.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.