Nuxt 4 SEO và Meta Tags 2026: Hướng dẫn useHead, useSeoMeta cho Phỏng vấn

Nuxt 4 cung cấp hai composable để quản lý meta tags SEO: useHead cho các phần tử head chung và useSeoMeta cho metadata SEO với hỗ trợ TypeScript đầy đủ. Với Nuxt 3 kết thúc hỗ trợ vào ngày 31 tháng 7 năm 2026, việc hiểu rõ các composable này trong Nuxt 4.5 là điều thiết yếu cho mọi lập trình viên Vue đang chuẩn bị cho phỏng vấn kỹ thuật.

useSeoMeta: Metadata SEO Type-Safe trong Nuxt 4

Composable useSeoMeta nhận một object phẳng với hơn 100 thuộc tính đã được định kiểu. Cách tiếp cận này loại bỏ các lỗi phổ biến như nhầm lẫn giữa thuộc tính name với property trên các tag Open Graph.

<!-- pages/product/[id].vue -->
<script setup lang="ts">
const product = await useFetch(`/api/products/${route.params.id}`)

useSeoMeta({
  title: () => product.data.value?.name,
  description: () => product.data.value?.description,
  ogTitle: () => product.data.value?.name,
  ogDescription: () => product.data.value?.description,
  ogImage: () => product.data.value?.imageUrl,
  ogType: 'product',
  twitterCard: 'summary_large_image',
  twitterTitle: () => product.data.value?.name,
  twitterDescription: () => product.data.value?.description,
  twitterImage: () => product.data.value?.imageUrl,
})
</script>

Cú pháp arrow function () => value tạo ra các getter reactive. Khi product.data thay đổi, các meta tags sẽ tự động cập nhật. Đối với các trang tĩnh nơi các tag SEO không bao giờ thay đổi sau lần render đầu tiên, tính reactive này tạo ra overhead không cần thiết.

Meta Tags Server-Only để Cải Thiện Hiệu Suất

Các crawler của công cụ tìm kiếm và bot AI như GPTBot và ClaudeBot chỉ đọc phản hồi HTML ban đầu. Chúng không thực thi JavaScript. Điều này có nghĩa là các cập nhật meta tag ở phía client không hiển thị với chúng.

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'Giới thiệu SharpSkill',
    description: 'Nền tảng chuẩn bị phỏng vấn kỹ thuật dành cho lập trình viên',
    ogTitle: 'Giới thiệu SharpSkill',
    ogDescription: 'Nền tảng chuẩn bị phỏng vấn kỹ thuật dành cho lập trình viên',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

Việc bọc useSeoMeta trong import.meta.server đảm bảo composable chỉ chạy trong quá trình SSR. Các meta tags xuất hiện trong HTML được gửi đến crawler, nhưng không có reactive watcher nào được tạo ở client. Điều này giảm kích thước bundle và cải thiện hiệu suất hydration.

useHead cho Scripts, Links và Canonical URLs

Trong khi useSeoMeta bao gồm metadata SEO, useHead xử lý mọi thứ khác: external scripts, stylesheets, canonical URLs và các thuộc tính HTML/body.

<!-- pages/blog/[slug].vue -->
<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()

useHead({
  link: [
    {
      rel: 'canonical',
      href: `${config.public.siteUrl}/blog/${route.params.slug}`,
    },
    {
      rel: 'alternate',
      hreflang: 'vi',
      href: `${config.public.siteUrl}/vi/blog/${route.params.slug}`,
    },
  ],
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.value?.title,
        author: { '@type': 'Person', name: 'Anthony Fillion-Maillet' },
        datePublished: article.value?.publishedAt,
      }),
    },
  ],
})
</script>

Mảng link xử lý canonical URLs và các tag hreflang cho quốc tế hóa. Mảng script chèn structured data cho kết quả tìm kiếm phong phú. Cả hai đều quan trọng cho SEO nhưng nằm ngoài phạm vi của useSeoMeta.

Thứ Bậc Meta Tag: Các Cấp App, Layout và Page

Nuxt 4 hợp nhất meta tags từ ba cấp: nuxt.config.ts (mặc định toàn ứng dụng), layouts và pages. Các tag cấp page ghi đè tag cấp layout, và tag cấp layout ghi đè tag cấp app.

export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s | SharpSkill',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ],
    },
  },
})

<!-- layouts/default.vue -->
<script setup lang="ts">
useSeoMeta({
  ogSiteName: 'SharpSkill',
  twitterSite: '@sharpskill',
})
</script>

<!-- pages/index.vue -->
<script setup lang="ts">
useSeoMeta({
  title: 'Chuẩn Bị Phỏng Vấn Kỹ Thuật',
  description: 'Chuẩn bị cho buổi phỏng vấn kỹ thuật tiếp theo với các câu hỏi thực hành và mock interview',
})
</script>

Tiêu đề cuối cùng được render sẽ là "Chuẩn Bị Phỏng Vấn Kỹ Thuật | SharpSkill" vì page cung cấp giá trị placeholder %s và config cung cấp template. Thứ bậc này tránh sự lặp lại trong khi vẫn cho phép ghi đè cụ thể cho từng trang.

Các Câu Hỏi Phỏng Vấn SEO Nuxt Phổ Biến

Các cuộc phỏng vấn kỹ thuật cho vị trí Vue/Nuxt thường bao gồm các câu hỏi về SSR và tối ưu SEO. Dưới đây là các pattern mà người phỏng vấn mong đợi.

Khi nào useSeoMeta nên sử dụng reactive getter so với giá trị tĩnh?

Giá trị tĩnh phù hợp cho các trang có nội dung cố định: landing pages, trang giới thiệu, trang pháp lý. Reactive getter cần thiết khi meta tags phụ thuộc vào dữ liệu được fetch hoặc tham số route. Sự khác biệt về hiệu suất rất quan trọng ở quy mô lớn: 50 trang với các watcher không cần thiết lãng phí bộ nhớ và làm chậm hydration.

AI crawler khác với Googlebot như thế nào?

Googlebot thực thi JavaScript và chờ client-side rendering. AI crawler như GPTBot và ClaudeBot lấy HTML thô mà không thực thi script. Các meta tags được render ở server tiếp cận được cả hai. Các meta tags chỉ có ở client không tiếp cận được bot AI lẫn các công cụ tìm kiếm cũ.

Điều gì thường làm hỏng tag Open Graph nhất?

Thiếu kích thước og:image. Facebook và LinkedIn cache dữ liệu OG một cách mạnh mẽ. Khi kích thước hình ảnh bị thiếu, các nền tảng có thể hiển thị thumbnail không chính xác hoặc không hiển thị.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'Xem trước bài viết hiển thị trình soạn code với cú pháp Vue',
})
</script>

Việc bao gồm ogImageWidth, ogImageHeight và ogImageAlt ngăn chặn các vấn đề rendering và cải thiện điểm accessibility.

useHeadSafe cho User-Generated Content

Khi meta tags bao gồm input từ người dùng, các lỗ hổng XSS trở thành mối quan ngại. Composable useHeadSafe làm sạch các giá trị trước khi injection.

<!-- pages/profile/[username].vue -->
<script setup lang="ts">
const user = await useFetch(`/api/users/${route.params.username}`)

useHeadSafe({
  title: user.data.value?.displayName,
  meta: [
    { name: 'description', content: user.data.value?.bio },
  ],
})
</script>

Một username độc hại như <script>alert('xss')</script> sẽ được escape thay vì được thực thi. useHead tiêu chuẩn không sanitize, vì vậy useHeadSafe là bắt buộc cho bất kỳ nội dung không đáng tin cậy nào.

Module Nuxt SEO cho Yêu Cầu Nâng Cao

Module Nuxt SEO tích hợp sitemap generation, quản lý robots.txt, markup schema.org và OG image generation. Đối với các dự án yêu cầu công cụ SEO toàn diện vượt ra ngoài các composable tích hợp sẵn, module này giảm boilerplate.

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],
  site: {
    url: 'https://sharpskill.dev',
    name: 'SharpSkill',
  },
})

Module tự động tạo sitemap từ routes, xử lý chuẩn hóa trailing slash và cung cấp các composable cho structured data. Các team duy trì các site lớn được hưởng lợi từ cấu hình tập trung.

Best Practices SEO Nuxt 4 cho Production

• Sử dụng useSeoMeta cho tất cả các tag SEO (title, description, Open Graph, Twitter Cards) với autocompletion TypeScript
• Sử dụng useHead cho canonical URLs, tag hreflang, structured data và external scripts
• Bọc các meta tags tĩnh trong import.meta.server để loại bỏ overhead reactive ở phía client
• Bao gồm ogImageWidth, ogImageHeight và ogImageAlt cho preview chia sẻ trên mạng xã hội
• Sử dụng useHeadSafe cho nội dung do người dùng tạo để ngăn chặn tấn công XSS
• Thiết lập mặc định cấp ứng dụng trong nuxt.config.ts và chỉ ghi đè ở cấp trang khi cần thiết
• Kiểm tra với Google Rich Results Test để xác thực structured data
• Xác minh rendering trong tab Network của DevTools trình duyệt với JavaScript bị tắt để mô phỏng hành vi của crawler