Ngôn ngữ

Hướng dẫn về Nuxt SEO

Nuxt ships máy chủ-side kết xuất theo mặc định, nhưng đó là một theo-route setting, không phải là bảo đảm — đầy đủ HTML để các crawler chỉ on routes đó giữ điều này. Kết xuất modes, useSeoMeta(), đó @nuxtjs/seo toolkit, hydration và Nitro caveats, Core Web Vitals, và đó mistakes đó âm thầm cost bạn.

Xuất bản lần đầu: 26 thg 6, 2026 · Cập nhật lần cuối: 8 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2
1 tín hiệu bằng chứng trên trang này

Nuxt máy chủ-renders các trang theo mặc định, so một route đó giữ đó default cho các crawler một hoàn tất HTML document thay vì đó empty shell một đơn giản Vue SPA ships — nhưng đây là một theo-route setting: routeRules hoặc một global ssr:sai có thể flip bất kỳ route để CSR, so verify đó thực tế route thay vì assuming từ đó framework name. Đó foundational decision là kết xuất chế độ theo route — SSR (default), SSG qua nuxt generate, hoặc hybrid route rules — vì meta tags, schema, và sitemaps all come sau đó. Dùng useSeoMeta() cho meta, treat Harlan Wilton @nuxtjs/seo bundle as an tùy chọn bên thứ ba toolkit (không Nuxt cốt lõi) cho robots/sitemap/OG/schema/canonical, không bao giờ reach cho dynamic kết xuất (Google deprecated điều này), verify hydration/payload và Nitro deployment-preset/bộ nhớ đệm behavior independently of máy chủ HTML, và remember đó AI-crawler kết xuất contracts vary by provider — SSR/SSG diễn đạt nội dung trong thô HTML và maximizes coverage.

Tóm tắt — Nuxt default là máy chủ-side kết xuất, so route đó giữ đó default nhận hoàn tất DOM thay vì rỗng shell đơn giản Vue SPA ships — nhưng đó theo-route outcome: ssr: false hoặc routeRules override có thể turn bất kỳ route vào CSR hoặc hybrid, so kiểm thử thực tế route, không project name. Kết xuất strategy là foundational decision — SSR (default), SSG (nuxt generate), hoặc hybrid routeRules — vì meta, schema, và sitemaps all come sau khi nó. sử dụng useSeoMeta() cho meta tags (useHead() cho rest của head, máy chủ-chỉ variants Khi bạn không cần reactivity), và treat Harlan Wilton @nuxtjs/seo bundle as tùy chọn thứ ba-party toolkit cho robots/sitemap/OG/schema/canonical — không part của Nuxt cốt lõi, và không proof của nó output là đúng cho đến khi bạn kiểm tra nó. không bao giờ sử dụng dynamic kết xuất (Google deprecated nó). AI-crawler kết xuất varies by provider — SSR/SSG maximizes thô-HTML coverage. Beyond ban đầu HTML, verify hydration/payload, Nitro deployment presets và bộ nhớ đệm, và trực tiếp HTTP status independently — máy chủ HTML alone không prove bất kỳ của những điều đó. thông thường JS-SEO rules vẫn apply: thực <a href> links, không block JS/CSS, watch được kết xuất so với. thô HTML.

Nuxt là Vue câu trả lời để SPA vấn đề

Vue, by itself, ships single-trang application: HTML shell plus JavaScript đó xây dựng DOM trong trình duyệt. Nuxt là meta-framework bên cạnh Vue (đang chạy on Nitro máy chủ engine trong Nuxt 3, với Nuxt 4 sau trong 2025), và của nó toàn bộ reason cho existing — từ SEO standpoint — là đó nó renders on máy chủ by default. mỗi trang arrives as fully-formed HTML document, mà là chính xác Điều gì Googlebot wants để đọc không có để execute JavaScript đầu tiên. Đơn giản Vue SEO là của nó own topic với của nó own thất bại modes; ở đây I’m assuming bạn’ve picked Nuxt precisely so bạn không có để fight SPA vấn đề.

Này là đó giống nhau point I làm về 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.” (bản dịch) «bất kỳ kind of SSR, static kết xuất, và prerendering setup là going để là fine cho các công cụ tìm kiếm. Gatsby, Tiếp theo, Nuxt, etc., là all great.» Nuxt defaults là pointed đó right way. Hầu hết Nuxt SEO các vấn đề là mọi người chuyển thành những defaults off, hoặc layering mistakes on top of them.

Kết xuất strategy là foundation — decided theo route, không theo project

Trước meta tags, trước schema, trước sitemaps, đó câu hỏi đó decides mọi thứ là cách làm đó HTML nhận produced cho này cụ thể route? Nuxt documents universal (máy chủ) kết xuất as đó app-wide default, nhưng đó default không một route-cấp độ bảo đảm: một global ssr: false switches đó toàn bộ app để client kết xuất, và routeRules có thể assign một khác nhau chế độ để bất kỳ URL pattern. “This is a Nuxt app” (bản dịch) «Này là một Nuxt app» tells bạn không có gì về cách một particular trang renders — bạn có để kiểm tra đó route. Nuxt cho bạn five strategies:

Chế độCách bạn đặt nóSEO impactBest cho
Universal / SSRDefault (ssr: true)Excellent — đầy đủ HTML mỗi yêu cầuDynamic, personalized nội dung
Static / SSGnuxt generateExcellent — HTML được xây dựng tại deploy timeBlogs, tài liệu, marketing
HybridrouteRules theo routeExcellent — mix theo routeLớn mixed-nội dung các trang
SPA / CSRssr: falsePoor cho được lập chỉ mục nội dungDashboards, admin panels
Edge-sideDeployment đíchExcellent — thấp TTFBGlobal performance

Đó chính thức Nuxt tài liệu là blunt về vì sao client-side kết xuất là lựa chọn sai cho nội dung: “Indexing and updating the content delivered via client-side rendering takes more time” (bản dịch) «Lập chỉ mục và updating đó nội dung delivered qua client-side kết xuất takes hơn time», whereas với máy chủ (universal) kết xuất “web crawlers can directly index the page’s content.” (bản dịch) «web các crawler có thể trực tiếp chỉ mục đó trang nội dung.» 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 kết xuất tài liệu.) CSR (ssr: false) là positioned cho lại-office, dashboards, và games — không bất cứ điều gì bạn muốn được lập chỉ mục.

Hybrid kết xuất là power move cho lớn các trang. Route rules trong nuxt.config.ts let bạn đặt kết xuất và bộ nhớ đệm chế độ theo 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-trong khi-revalidate) và isr (incremental static regeneration) generate trang statically sau đó refresh nó trong background — ideal cho cao trang-count e-commerce hoặc news nơi đầy đủ rebuild on mỗi thay đổi không phải practical. Nuxt Islands (<NuxtIsland>) render components không có shipping client-side JavaScript, cutting hydration cost và helping INP — Cốt lõi Web Vital đó phần lớn thường vấn đề on Nuxt apps.

Cách verify điều gì bạn thực ra shipped: View Nguồn cho thấy đó thô HTML đó máy chủ đã gửi; nếu nội dung của bạn là ở đó, bạn là máy chủ-kết xuất. DevTools’ Elements panel cho thấy đó được kết xuất DOM. Và GSC URL Inspection tool cho thấy điều gì Google thực ra fetched và được kết xuất — đó nguồn of truth. không trust “it looks fine in my browser.” (bản dịch) «điều này looks fine trong my trình duyệt.»

Cách Googlebot xử lý Nuxt app

Google xử lý bất kỳ JavaScript app trong three phases — crawl, render, chỉ mục — và đó catch là timing: kết xuất happens trong một queue, không instantly. As I put điều này trong my JavaScript SEO hướng dẫn, đó renderer là patient — “there is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” (bản dịch) «có không fixed timeout cho đó renderer… đây là thực sự patient, và bạn không nên là concerned.» Nhưng patient không đó giống nhau as fast cho fresh nội dung. Nếu bạn ship một client-được kết xuất trang, nội dung của bạn không exist cho Google until đó render wave chạy; SSR và SSG close đó khoảng trống vì đó HTML là hoàn tất on đó đầu tiên fetch.

Hai nhiều hơn điều quan trọng tại quy mô. Kết xuất JavaScript là expensive — từ my 2019 JavaScript SEO talk (Ungagged), crawl costs go lên by khoảng 20× sau khi Google có để render (directional, nhưng order của magnitude vẫn holds). và Google takes phần lớn restrictive directive trên thô và được kết xuất HTML — so noindex injected by JavaScript sẽ win over index trong thô HTML, và vice versa. canonical injected qua JavaScript là respected chỉ nếu có không canonical trong thô HTML đã. giữ của bạn robots và các tín hiệu canonical trong máy chủ-được kết xuất HTML, mà Nuxt làm cho bạn Khi SSR là on.

AI-crawler reality

Đây là 2026 wrinkle. AI các crawler — GPTBot, ClaudeBot, PerplexityBot, và rest — generally không execute JavaScript tại all. họ chỉ mục thô HTML và không có gì khác. So client-được kết xuất Nuxt trang là effectively invisible để AI câu trả lời engines. SSR hoặc SSG không phải chỉ tốt hơn cho Google ở đây; nó price của entry cho câu trả lời engine optimization cũng. nếu bạn muốn của bạn nội dung cited by ChatGPT, Perplexity, hoặc Claude, nó có để là trong HTML on đầu tiên fetch.

Beyond ban đầu HTML: payload, hydration, và các mã trạng thái

Getting máy chủ HTML với nội dung của bạn trong điều này là necessary nhưng không sufficient — several điều có thể vẫn go sai downstream of đó đầu tiên phản hồi, và “I checked View Source” (bản dịch) «I checked View Nguồn» không cover them:

  • Payload và hydration. Universal kết xuất gửi HTML và serialized dữ liệu payload client dùng để hydrate — attach event listeners và pick lên nơi máy chủ left off — không có re-fetching. máy chủ HTML looking right không prove hydration succeeded, đó client navigation reproduces giống nhau nội dung, hoặc đó payload không phải stale. nếu trang feels fine on đầu tiên load nhưng breaks sau khi client-side route thay đổi, đó hydration/payload vấn đề, không kết xuất-chế độ vấn đề.
  • <ClientOnly> và trình duyệt-chỉ nội dung. Wrapping điều gì đó trong <ClientOnly> — phổ biến cho trình duyệt-API-phụ thuộc widgets — có nghĩ là nó absent từ máy chủ phản hồi ngay cả on nếu không-universal route. nếu của bạn main nội dung, mấu chốt link, hoặc của bạn meta tags end lên bên trong client-chỉ boundary, các crawler và AI bots đó chỉ đọc thô HTML miss nó, regardless của bạn kết xuất chế độ setting. Inspect thực tế phản hồi, không chỉ kết xuất chế độ config.
  • các mã trạng thái và các chuyển hướng không phải self-certifying. Nuxt trang lỗi kết xuất trong trình duyệt, hoặc navigateTo()/composable-driven chuyển hướng, không by itself prove Điều gì HTTP status trực tiếp máy chủ phản hồi được gửi. Google hướng dẫn là rõ ràng đó có ý nghĩa các mã trạng thái quan trọng cho crawling và lập chỉ mục — xác nhận thực tế header với curl -I, không Điều gì client-được kết xuất trang lỗi displays.

None of này là an argument so với universal kết xuất — đây là đó reminder đó “the HTML is server-rendered” (bản dịch) «đó HTML là máy chủ-được kết xuất» là đó đầu tiên kiểm tra, không đó cuối cùng một.

Nitro, deployment presets, và bộ nhớ đệm boundaries

Nuxt máy chủ output là được xây dựng by Nitro, và Nitro compiles differently depending on deployment preset bạn đích (Node máy chủ, Cloudflare, Vercel, Netlify, static, và others). đó matters Đối với SEO vì presets và adapters có thể differ trong runtime APIs khả dụng, bộ nhớ đệm behavior, streaming hỗ trợ, regional deployment, và filesystem access — route rule hoặc máy chủ handler đó hoạt động dưới một preset không phải guaranteed để behave identically dưới một. Hai consequences worth kiểm thử explicitly thay vì assuming:

  • bộ nhớ đệm keys và invalidation là route-cụ thể, không tự động. swr và isr route rules bộ nhớ đệm và regenerate output, nhưng sai bộ nhớ đệm mấu chốt, bị thiếu invalidation, hoặc bộ nhớ đệm header đặt by của bạn deployment nền tảng có thể phục vụ stale, personalized, hoặc inconsistent HTML để các crawler. kiểm tra thực tế phản hồi age và bất kỳ Cache-Control/Age các header on trực tiếp URL, không chỉ routeRules config.
  • Production parity không phải guaranteed by staging behavior. route kết xuất correctly trong local dev hoặc preview deployment không xác nhận production preset produces giống nhau output — máy chủ routes, các chuyển hướng, và lỗi xử lý trực tiếp trong Nitro máy chủ layer, và đó layer là part phần lớn có khả năng để differ by đích. Kiểm thử production URL trực tiếp sau khi bất kỳ deployment thay đổi, giống nhau way bạn’d verify kết xuất chế độ.

Meta tags: useSeoMeta() và useHead()

Nuxt head management chạy on Unhead, và nó cho bạn hai composables cho khác jobs.

useSeoMeta() là một để reach cho Đối với SEO và social meta tags. nó flat, loại-safe API với 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 nó helps tránh kinh điển Open Graph bug của sử dụng name nơi bạn 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() là chung-purpose head tool cho mọi thứ khác — scripts, link tags, thân phản hồi các thuộc tính, và tiêu đề templates:

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

reliable layering pattern là: static defaults (charset, viewport, favicon) trong nuxt.config.ts → trang web-wide tiêu đề template và global OG defaults trong app.vue → trang-cụ thể overrides qua useSeoMeta() trong trang component. phổ biến bug là putting useSeoMeta() trong layout thay vì trang, mà overwrites cụ thể trang tags với generic ones. và since các công cụ tìm kiếm đọc ban đầu load, SEO meta generally không cần để là reactive — useServerHead() skips client-side re-execution.

Mà API, và Điều gì nó thực ra proves:

APIPhạm viReactive?Điều gì nó proves về output
useSeoMeta()Flat, typed SEO/social meta chỉCó (default)Sets typed properties correctly — không đó route là unique, canonical, hoặc indexable; bạn vẫn own đó logic
useHead()Bất cứ điều gì trong <head> — scripts, links, attrs, tiêu đề templateCó (default)Chung head control; giống nhau caveat — API sử dụng không phải proof của đúng máy chủ phản hồi
useServerHead() / máy chủ-chỉ callsgiống nhau as trênKhông — máy chủ chỉ, skips client re-executionXác nhận tag ships sau khi trong máy chủ HTML; không xác nhận client navigation re-sets nó nếu bạn rely on nó ở đó

Calling một of những composables tells bạn đó API ran — điều này không by itself tell bạn điều gì một trực tiếp máy chủ phản hồi hoặc một client-side route thay đổi thực ra emits. Xác nhận với View Nguồn hoặc curl, không chỉ “I called useSeoMeta().” (bản dịch) «I called useSeoMeta().»

@nuxtjs/seo module ecosystem (Harlan Wilton) — tùy chọn, không cốt lõi

Nuxt cốt lõi không ship sitemap, robots.txt, OG image generation, hoặc Schema.org out của box — những điều đó là bên ngoài Nuxt own primitives (useHead, useSeoMeta, route rules, kết xuất modes). community fills đó khoảng trống với Harlan Wilton @nuxtjs/seo — riêng-installed, thứ ba-party umbrella package (nuxtseo.com, hiện tại v5.x, actively maintained, targeting Nuxt 3,16+ và Nuxt 4) đó bundles six modules. Installing nó cho bạn sitemap, robots, OG-image, và schema generation — nó không by itself bảo đảm output là đúng cho của bạn routes; verify Điều gì nó produces giống nhau way bạn’d verify bất cứ điều gì khác:

ModuleĐiều gì nó làm
@nuxtjs/robotsrobots.txt + meta robots + X-Robots-Tag các header
@nuxtjs/sitemapAuto XML sitemaps từ các trang + dynamic routes
nuxt-og-imageDynamic OG images ( Vue template → image)
nuxt-schema-orgSchema.org JSON-LD dữ liệu có cấu trúc
nuxt-seo-utilsCanonical các URL, breadcrumbs, defaults
nuxt-link-checkerXây dựng-time hỏng-link detection

Install toàn bộ bundle với npx nuxt module add seo, hoặc grab riêng lẻ modules (npx nuxt module add sitemap robots). một vài behaviors worth knowing:

  • @nuxtjs/sitemap auto-generates từ của bạn pages/ directory plus dynamic routes, splits vào sitemap chỉ mục tự động past 50 000 các URL, hỗ trợ i18n multi-language sitemaps, và có được xây dựng-trong IndexNow hỗ trợ. Một điều để nhận right: Google bỏ qua changefreq và priority; chỉ chính xác lastmod matters, và chỉ Khi nội dung genuinely thay đổi.
  • @nuxtjs/robots generates robots.txt, robots meta tag, và X-Robots-Tag header — và theo mặc định nó disallows all các crawler on non-production environments, mà là chính xác staging-indexation footgun đó bites headless xây dựng. nó cũng cho bạn theo-bot rules, so Bạn có thể block GPTBot cụ thể trong khi leaving mọi người khác alone (là intentional — block AI crawler và nó sẽ không cite bạn).
  • nuxt-seo-utils xử lý canonical các URL và, usefully, strips theo dõi parameters (utm_*, fbclid, gclid) từ canonicals tự động.

nuxt/image và Core Web Vitals

@nuxt/image là image module: tự động responsive srcset, modern formats (WebP/AVIF), được xây dựng-trong optimization qua CDN providers, và lazy loading. Hai rules carry phần lớn của SEO giá trị:

  • không bao giờ lazy-load LCP image. của bạn hero image nên load eagerly; lazy-loading nó delays của bạn Largest Contentful Paint.
  • luôn đặt width và height so trình duyệt reserves space và bạn không take Cumulative Layout Shift hit.
<NuxtImg
  src="/hero.jpg"
  width="1200"
  height="630"
  alt="Descriptive alt text"
  :loading="isHeroImage ? 'eager' : 'lazy'"
  format="webp"
/>

2026 targets để aim cho (p75): LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1. On Nuxt apps, INP là một đó tends để suffer vì hydration tạo input lag — mà là chính xác Điều gì Nuxt Islands và <NuxtIsland> là cho.

Nuxt nội dung + SEO

Nếu bạn là dùng @nuxt/content (đó markdown/MDX nội dung module), đó integration với @nuxtjs/seo là straightforward nhưng có một ordering gotcha: load @nuxtjs/seo trước @nuxt/content trong của bạn modules array. Bạn có thể thì set SEO trong nội dung frontmatter (title, description, robots, ogImage, schemaOrg) và pull điều này vào của bạn [slug].vue template với useSeoMeta() sau fetching đó nội dung. Này là đó Nuxt-native version of đó headless-CMS pattern, và đó giống nhau “rebuild what the plugin did” (bản dịch) «rebuild điều gì đó plugin đã làm» discipline áp dụng.

phổ biến Nuxt SEO mistakes

  1. Dùng SPA chế độ (ssr: false) cho nội dung bạn muốn được lập chỉ mục. Đó hầu hết expensive mistake — và đó một đó làm bạn invisible để AI các crawler.
  2. Relative URLs cho OG images. ogImage phải được an absolute URL hoặc social previews break.
  3. useSeoMeta() trong một layout thay vì đó trang — generic tags overwrite trang-cụ thể ones.
  4. Không verifying được kết xuất HTML — View Nguồn ≠ DevTools ≠ điều gì Google được kết xuất. Dùng URL Inspection.
  5. Blocking JS/CSS trong robots.txt — Google sẽ không render từ blocked files.
  6. Leaving đó staging noindex/disallow trong place sau launch (hoặc, conversely, forgetting @nuxtjs/robots chặn non-prod theo mặc định và wondering vì sao prod là fine nhưng một custom env không).
  7. Lazy-loading đó LCP image — tanks của bạn LCP.
  8. Bị thiếu width/height on images — CLS.
  9. changefreq/priority trong sitemaps — Google bỏ qua them; chỉ lastmod được tính.
  10. Reaching cho dynamic kết xuất. Google deprecated điều này — “dynamic rendering is a workaround and not a long-term solution” (bản dịch) «dynamic kết xuất là một workaround và không một dài-term giải pháp» — và điều này chỉ serves đó engines bạn configure điều này cho, bị thiếu Bing và mỗi AI crawler. Với Nuxt bạn không bao giờ cần điều này: SSR và SSG đã cho các crawler hoàn tất HTML.

llms.txt và AEO

llms.txt là đơn giản-text file — robots.txt cousin — đó helps AI tools navigate của bạn nội dung. nuxt-llms module auto-generates /llms.txt và /llms-full.txt từ Nuxt nội dung. As của muộn 2025 của nó chính consumers là MCP các máy chủ và AI coding tools (Cursor, Claude Code) thay vì ChatGPT hoặc Perplexity trực tiếp, và nó phần lớn hữu ích cho tài liệu các trang và kỹ thuật blogs — ít hơn so cho e-commerce hoặc news. Worth thêm nếu bạn’re tài liệu/dev trang web; không priority nếu không.

nơi điều này fits

Nuxt SEO là thực sự concrete application của JavaScript SEO qua Nuxt own conventions — và nó overlaps heavily với SEO cho headless CMS topic Khi của bạn Nuxt frontend pulls từ headless backend. principles không thay đổi; Nuxt chỉ cho bạn good defaults và mạnh module ecosystem để implement them với.

Add an expert note

Pin an expert quote

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