Bahasa

Panduan Nuxt SEO

Nuxt ships rendering sisi server oleh default, tetapi itu's sebuah per-route setting, tidak sebuah jaminan — penuh 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 diam-diam cost Anda.

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

Nuxt server-renders halaman oleh default, so sebuah route itu mempertahankan itu default memberikan crawler sebuah menyelesaikan 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 sebenarnya route alih-alih assuming dari kerangka kerja name. foundational decision adalah rendering mode per route — SSR (default), SSG melalui nuxt generate, atau hybrid route aturan — karena meta tags, schema, dan sitemaps semua come setelah itu. gunakan useSeoMeta() untuk meta, treat Harlan Wilton's @nuxtjs/seo bundle sebagai sebuah opsional ketiga-party toolkit (tidak 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 mentah HTML dan maximizes coverage.

TL;DR — Nuxt’s default adalah rendering sisi server, so sebuah route itu mempertahankan itu default mendapatkan sebuah menyelesaikan 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 sebenarnya route, tidak project name. rendering strategy adalah foundational decision — SSR (default), SSG (nuxt generate), atau hybrid routeRules — karena meta, schema, dan sitemaps semua come setelah ini. gunakan useSeoMeta() untuk meta tags (useHead() untuk rest dari head, server-hanya variants ketika Anda tidak perlu reactivity), dan treat Harlan Wilton’s @nuxtjs/seo bundle sebagai sebuah opsional ketiga-party toolkit untuk robots/sitemap/OG/schema/canonical — tidak bagian dari Nuxt core, dan tidak 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 mentah-HTML coverage. Beyond awal HTML, verify hydration/payload, Nitro deployment presets dan caching, dan direct HTTP status independently — server HTML alone tidak prove apa pun dari itu. biasa JS-SEO aturan masih apply: nyata <a href> tautan, jangan block JS/CSS, watch dirender vs. mentah 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-kerangka kerja pada top dari Vue (berjalan pada Nitro server mesin di Nuxt 3, dengan Nuxt 4 berikut di 2025), dan -nya seluruh alasan untuk existing — dari sebuah SEO standpoint — adalah itu ini renders pada server oleh default. setiap halaman arrives sebagai sebuah fully-formed HTML document, yang adalah persis apa Googlebot ingin untuk baca tanpa memiliki untuk execute JavaScript pertama. Plain Vue SEO adalah -nya own topic dengan -nya own failure modes; di sini I’m assuming Anda’ve picked Nuxt precisely so Anda tidak memiliki untuk fight SPA masalah.

«This is the same point I make about JavaScript generally: “any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” Nuxt’s defaults are pointed the right way. Most Nuxt SEO problems are people turning those defaults off, or layering mistakes on top of them. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

sebelum meta tags, sebelum schema, sebelum sitemaps, pertanyaan itu decides semuanya adalah bagaimana melakukan HTML mendapatkan produced untuk ini spesifik route? Nuxt documents universal (server) rendering sebagai app-wide default, tetapi itu default tidak sebuah route-tingkat jaminan: sebuah global ssr: false switches seluruh 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 tidak ada apa pun tentang bagaimana satu particular halaman renders — Anda memiliki untuk periksa route. Nuxt memberikan Anda five strategies:

ModeBagaimana Anda set iniSEO impactBest untuk
Universal / SSRDefault (ssr: true)Excellent — penuh 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 mengapa rendering sisi klien adalah wrong pilihan untuk konten: “Indexing and updating the content delivered via client-side rendering takes more time” (terjemahan) “pengindeksan dan updating konten delivered melalui rendering sisi klien takes lebih time”, whereas dengan server (universal) rendering “web crawlers can directly index the page’s content.” (terjemahan) “web crawler dapat secara langsung indeks halaman’s konten.” Bukti untuk klaim ini Nuxt documents that universal rendering delivers HTML content immediately and allows crawlers to index it directly. Cakupan: Nuxt rendering; no indexing guarantee. Tingkat keyakinan: tinggi · Diverifikasi: Nuxt: Rendering modes (Nuxt rendering docs.) CSR (ssr: false) adalah positioned untuk back-office, dashboards, dan games — tidak apa pun 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-sementara-revalidate) dan isr (incremental static regeneration) generate sebuah halaman statically lalu refresh ini di background — ideal untuk tinggi halaman-count e-commerce atau news di mana sebuah penuh rebuild pada setiap perubahan tidak practical. Nuxt Islands (<NuxtIsland>) render components tanpa shipping client-side JavaScript, cutting hydration cost dan helping INP — Core Web Vital itu’s sebagian besar sering masalah pada Nuxt apps.

cara verify apa Anda sebenarnya shipped: View Sumber menampilkan mentah HTML server dikirim; jika Anda konten adalah di sana, Anda’re server-rendering. DevTools’ Elements panel menampilkan dirender DOM. dan GSC’s pemeriksaan URL alat menampilkan apa Google sebenarnya fetched dan dirender — sumber kebenaran. jangan trust “it looks fine in my browser.” (terjemahan) “ini looks fine di my browser.”

Bagaimana Googlebot menangani sebuah Nuxt app

Google memproses apa pun JavaScript app di three phases — crawl, render, indeks — dan catch adalah timing: rendering happens di sebuah queue, tidak 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 benar-benar patient, dan Anda seharusnya tidak menjadi concerned.” tetapi patient tidak yang sama sebagai fast untuk fresh konten. jika Anda ship sebuah client-dirender halaman, Anda konten tidak exist untuk Google until itu render wave berjalan; SSR dan SSG close itu kesenjangan karena HTML adalah menyelesaikan pada pertama fetch.

Dua lebih hal penting di scale. rendering JavaScript adalah expensive — dari my 2019 JavaScript SEO talk (Ungagged), crawl costs go up oleh roughly 20× setelah Google memiliki untuk render (directional, tetapi order dari magnitude masih holds). dan Google takes sebagian besar restrictive directive di seluruh mentah dan dirender HTML — so sebuah noindex injected oleh JavaScript akan win di atas sebuah index di mentah HTML, dan vice versa. sebuah canonical injected melalui JavaScript adalah respected hanya jika ada Tidak canonical di mentah HTML sudah. pertahankan robots dan canonical sinyal di server-dirender HTML, yang Nuxt melakukan untuk Anda ketika SSR adalah pada.

AI-crawler reality

ini adalah 2026 wrinkle. AI crawler — GPTBot, ClaudeBot, PerplexityBot, dan rest — umumnya jangan execute JavaScript di semua. mereka indeks mentah HTML dan tidak ada apa pun else. So sebuah client-dirender Nuxt halaman adalah effectively invisible untuk AI jawaban mesin. SSR atau SSG tidak hanya better untuk Google di sini; 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 awal HTML: payload, hydration, dan kode status

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

  • Payload dan hydration. Universal rendering mengirim HTML dan sebuah serialized data payload client menggunakan untuk hydrate — attach event listeners dan pick up di mana server left off — tanpa re-fetching. server HTML looking right tidak prove hydration succeeded, itu client navigation reproduces yang sama konten, atau itu payload tidak stale. jika sebuah halaman feels fine pada pertama muat tetapi breaks setelah sebuah client-side route perubahan, itu’s sebuah hydration/payload masalah, tidak sebuah rendering-mode masalah.
  • <ClientOnly> dan browser-hanya konten. Wrapping sesuatu di <ClientOnly> — umum untuk browser-API-dependent widgets — berarti ini adalah absent dari server respons bahkan pada sebuah jika tidak-universal route. jika Anda main konten, sebuah key tautan, atau Anda meta tags end up di dalam sebuah client-hanya boundary, crawler dan AI bot itu hanya baca mentah HTML miss ini, regardless dari Anda rendering mode setting. Inspect sebenarnya respons, tidak hanya rendering mode config.
  • kode status dan redirects tidak self-certifying. sebuah Nuxt halaman error rendering di browser, atau sebuah navigateTo()/composable-driven redirect, tidak oleh itself prove apa HTTP status direct server respons dikirim. Google’s guidance adalah jelas itu bermakna kode status penting untuk crawling dan pengindeksan — konfirmasi sebenarnya header dengan curl -I, tidak apa client-dirender 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-dirender” adalah pertama periksa, tidak terakhir satu.

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 karena presets dan adapters dapat differ di runtime APIs tersedia, caching perilaku, streaming mendukung, regional deployment, dan filesystem access — sebuah route aturan atau server handler itu berfungsi di bawah satu preset tidak guaranteed untuk behave identically di bawah lainnya. Dua consequences worth testing explicitly alih-alih assuming:

  • Cache keys dan invalidation adalah route-spesifik, tidak 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 sebenarnya respons age dan apa pun Cache-Control/Age headers pada sebuah langsung URL, tidak hanya routeRules config.
  • Production parity tidak guaranteed oleh staging perilaku. sebuah route rendering correctly di local dev atau sebuah preview deployment tidak konfirmasi production preset produces yang sama output — server routes, redirects, dan error menangani langsung di Nitro’s server layer, dan itu layer adalah bagian sebagian besar mungkin untuk differ oleh target. Test production URL secara langsung setelah apa pun deployment perubahan, yang sama cara Anda’d verify rendering mode.

Meta tags: useSeoMeta() dan useHead()

Nuxt’s head management berjalan pada Unhead, dan ini memberikan Anda dua composables untuk berbeda jobs.

useSeoMeta() adalah satu untuk reach untuk untuk SEO dan social meta tags. ini adalah sebuah flat, jenis-safe API dengan typed parameters. Bukti untuk klaim ini useSeoMeta is a typed Nuxt API for SEO and social meta tags. Cakupan: Current Nuxt composable. Tingkat keyakinan: tinggi · Diverifikasi: Nuxt: useSeoMeta ini helps hindari classic Open Graph bug dari menggunakan name di mana 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 semuanya 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 melalui useSeoMeta() di halaman component. sebuah umum bug adalah putting useSeoMeta() di sebuah layout alih-alih halaman, yang overwrites spesifik halaman tags dengan generic ones. dan since mesin pencari baca awal muat, SEO meta umumnya tidak perlu untuk menjadi reactive — useServerHead() skips client-side re-execution.

Yang API, dan apa ini sebenarnya proves:

APICakupanReactive?Apa ini proves tentang output
useSeoMeta()Flat, typed SEO/social meta hanyaYa (default)Sets typed properties correctly — tidak itu route adalah unique, canonical, atau dapat diindeks; Anda masih own itu logic
useHead()Apa pun di <head> — scripts, tautan, attrs, judul templateYa (default)umum head control; sama caveat — API gunakan tidak proof dari sebuah correct server respons
useServerHead() / server-hanya panggilansama sebagai di atasTidak — server hanya, skips client re-executionMengonfirmasi tag ships setelah di server HTML; tidak konfirmasi client navigation re-sets ini jika Anda rely pada ini di sana

Calling satu dari ini composables tells Anda API ran — ini tidak oleh itself tell Anda apa sebuah direct server respons atau sebuah client-side route perubahan sebenarnya emits. Konfirmasi dengan View Sumber atau curl, tidak hanya “I called useSeoMeta().” (terjemahan) “I called tidak terdefinisi.”

@nuxtjs/seo module ecosystem (Harlan Wilton) — opsional, tidak core

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

ModuleApa 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 rusak-tautan detection

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

  • @nuxtjs/sitemap auto-generates dari Anda pages/ directory plus dynamic routes, splits ke sebuah sitemap indeks secara otomatis past 50 000 URLs, mendukung i18n multi-language sitemaps, dan memiliki dibangun-di IndexNow mendukung. Satu hal untuk mendapatkan right: Google ignores changefreq dan priority; hanya sebuah accurate lastmod penting, dan hanya ketika 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, yang adalah persis staging-pengindeksan footgun itu bites headless membangun. ini juga memberikan Anda per-bot aturan, so Anda dapat block GPTBot secara khusus sementara leaving everyone else alone (menjadi intentional — block sebuah AI crawler dan ini tidak akan cite Anda).
  • nuxt-seo-utils menangani canonical URLs dan, secara berguna, strips tracking parameters (utm_*, fbclid, gclid) dari canonicals secara otomatis.

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. Dua 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 satu itu tends untuk suffer karena hydration membuat input lag — yang adalah persis apa 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 satu 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 apa itu plugin melakukan” (terjemahan) “rebuild apa plugin melakukan” discipline applies.

umum Nuxt SEO mistakes

  1. menggunakan SPA mode (ssr: false) untuk konten Anda ingin terindeks. paling expensive mistake — dan satu 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. Tidak verifying dirender HTML — View Sumber ≠ DevTools ≠ apa Google dirender. gunakan pemeriksaan URL.
  5. Blocking JS/CSS di robots.txt — Google tidak akan 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 mengapa prod adalah fine tetapi sebuah custom env tidak).
  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 adalah a workaround dan tidak a long-term solution” (terjemahan) “dynamic rendering adalah sebuah workaround dan tidak 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 memberikan crawler menyelesaikan 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 utama consumers adalah MCP server dan AI coding alat (Cursor, Claude Code) alih-alih ChatGPT atau Perplexity secara langsung, dan ini adalah sebagian besar berguna untuk documentation situs dan teknis blogs — lebih sedikit so untuk e-commerce atau news. Worth menambahkan jika Anda’re sebuah docs/dev situs; tidak sebuah priority jika tidak.

Di mana ini fits

Nuxt SEO adalah benar-benar sebuah concrete application dari JavaScript SEO melalui Nuxt’s own conventions — dan ini overlaps heavily dengan SEO untuk sebuah CMS headless topic ketika Anda Nuxt frontend pulls dari sebuah headless backend. principles jangan perubahan; Nuxt hanya memberikan Anda baik defaults dan sebuah strong module ecosystem untuk implement them dengan.

Tambahkan catatan pakar

Sematkan kutipan pakar

Orang baru? Buat profilnya yang belum diklaim di /admin/experts/ → Sematkan kutipan pakar terlebih dahulu.