Nuxt 4 SEO และ Meta Tags 2026: คู่มือ useHead, useSeoMeta สำหรับสัมภาษณ์งาน

Nuxt 4 มี composable สองตัวสำหรับจัดการ meta tags SEO: useHead สำหรับ head elements ทั่วไป และ useSeoMeta สำหรับ metadata SEO ที่รองรับ TypeScript อย่างเต็มรูปแบบ เมื่อ Nuxt 3 สิ้นสุดการสนับสนุนในวันที่ 31 กรกฎาคม 2026 การเข้าใจ composable เหล่านี้ใน Nuxt 4.5 จึงเป็นสิ่งจำเป็นสำหรับนักพัฒนา Vue ทุกคนที่เตรียมตัวสำหรับการสัมภาษณ์เทคนิค

useSeoMeta: Metadata SEO แบบ Type-Safe ใน Nuxt 4

Composable useSeoMeta รับ object แบบ flat ที่มีมากกว่า 100 properties ที่ถูกกำหนด type แล้ว วิธีการนี้ช่วยขจัดข้อผิดพลาดทั่วไป เช่น การสับสนระหว่าง attribute name กับ property บน Open Graph tags

<!-- 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>

Syntax arrow function () => value สร้าง reactive getters เมื่อ product.data เปลี่ยนแปลง meta tags จะอัปเดตโดยอัตโนมัติ สำหรับหน้าแบบ static ที่ SEO tags ไม่เคยเปลี่ยนหลังจาก render ครั้งแรก reactivity นี้เพิ่ม overhead ที่ไม่จำเป็น

Meta Tags แบบ Server-Only เพื่อประสิทธิภาพที่ดีขึ้น

Crawler ของ search engine และ AI bots อย่าง GPTBot และ ClaudeBot อ่านเฉพาะ HTML response เริ่มต้นเท่านั้น พวกมันไม่ execute JavaScript ซึ่งหมายความว่าการอัปเดต meta tag ฝั่ง client จะไม่ถูกมองเห็นโดยพวกมัน

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'เกี่ยวกับ SharpSkill',
    description: 'แพลตฟอร์มเตรียมความพร้อมสัมภาษณ์เทคนิคสำหรับนักพัฒนา',
    ogTitle: 'เกี่ยวกับ SharpSkill',
    ogDescription: 'แพลตฟอร์มเตรียมความพร้อมสัมภาษณ์เทคนิคสำหรับนักพัฒนา',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

การห่อ useSeoMeta ใน import.meta.server ทำให้มั่นใจว่า composable ทำงานเฉพาะระหว่าง SSR Meta tags จะปรากฏใน HTML ที่ส่งไปยัง crawler แต่ไม่มี reactive watchers ถูกสร้างบน client ซึ่งช่วยลดขนาด bundle และปรับปรุงประสิทธิภาพ hydration

useHead สำหรับ Scripts, Links และ Canonical URLs

ในขณะที่ useSeoMeta ครอบคลุม metadata SEO แต่ useHead จัดการทุกอย่างอื่น: external scripts, stylesheets, canonical URLs และ HTML/body attributes

<!-- 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: 'th',
      href: `${config.public.siteUrl}/th/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>

Array link จัดการ canonical URLs และ hreflang tags สำหรับ internationalization Array script แทรก structured data สำหรับผลการค้นหาที่สมบูรณ์ ทั้งสองมีความสำคัญสำหรับ SEO แต่อยู่นอกขอบเขตของ useSeoMeta

ลำดับชั้น Meta Tag: ระดับ App, Layout และ Page

Nuxt 4 รวม meta tags จากสามระดับ: nuxt.config.ts (ค่าเริ่มต้นทั้งแอป), layouts และ pages Tags ระดับ page จะ override tags ระดับ layout ซึ่ง override tags ระดับ 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: 'เตรียมความพร้อมสัมภาษณ์เทคนิค',
  description: 'เตรียมตัวสำหรับการสัมภาษณ์เทคนิคครั้งต่อไปด้วยคำถามฝึกหัดและ mock interviews',
})
</script>

Title สุดท้ายที่ render จะเป็น "เตรียมความพร้อมสัมภาษณ์เทคนิค | SharpSkill" เพราะ page ให้ค่า placeholder %s และ config ให้ template ลำดับชั้นนี้หลีกเลี่ยงการซ้ำซ้อนในขณะที่ยังอนุญาตให้ override เฉพาะหน้าได้

คำถามสัมภาษณ์ SEO Nuxt ที่พบบ่อย

การสัมภาษณ์เทคนิคสำหรับตำแหน่ง Vue/Nuxt มักรวมคำถามเกี่ยวกับ SSR และการ optimize SEO นี่คือ patterns ที่ผู้สัมภาษณ์คาดหวัง

เมื่อไหร่ที่ useSeoMeta ควรใช้ reactive getters เทียบกับค่า static?

ค่า static เหมาะสำหรับหน้าที่มีเนื้อหาคงที่: landing pages, หน้าเกี่ยวกับ, หน้ากฎหมาย Reactive getters จำเป็นเมื่อ meta tags ขึ้นอยู่กับข้อมูลที่ fetch หรือ route parameters ความแตกต่างด้านประสิทธิภาพมีความสำคัญในระดับขนาดใหญ่: 50 หน้าที่มี watchers ที่ไม่จำเป็นจะเปลืองหน่วยความจำและทำให้ hydration ช้าลง

AI crawlers แตกต่างจาก Googlebot อย่างไร?

Googlebot execute JavaScript และรอ client-side rendering AI crawlers อย่าง GPTBot และ ClaudeBot ดึง HTML ดิบโดยไม่ execute scripts Meta tags ที่ render บน server เข้าถึงได้ทั้งสอง Meta tags แบบ client-only ไม่เข้าถึง AI bot หรือ search engines เก่า

อะไรทำให้ Open Graph tags เสียหายบ่อยที่สุด?

ขาดขนาด og:image Facebook และ LinkedIn cache ข้อมูล OG อย่างหนัก เมื่อขาดขนาดภาพ แพลตฟอร์มอาจแสดง thumbnails ไม่ถูกต้องหรือไม่แสดงเลย

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'ตัวอย่างบทความแสดง code editor พร้อม Vue syntax',
})
</script>

การรวม ogImageWidth, ogImageHeight และ ogImageAlt ป้องกันปัญหาการ render และปรับปรุงคะแนน accessibility

useHeadSafe สำหรับ User-Generated Content

เมื่อ meta tags รวม input จากผู้ใช้ ช่องโหว่ XSS กลายเป็นเรื่องที่ต้องกังวล Composable useHeadSafe ทำความสะอาดค่าก่อน 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>

Username ที่เป็นอันตราย เช่น <script>alert('xss')</script> จะถูก escape แทนที่จะถูก execute useHead มาตรฐานไม่ sanitize ดังนั้น useHeadSafe จึงจำเป็นสำหรับเนื้อหาที่ไม่น่าเชื่อถือ

Nuxt SEO Module สำหรับความต้องการขั้นสูง

Nuxt SEO module รวม sitemap generation, การจัดการ robots.txt, markup schema.org และ OG image generation สำหรับโปรเจกต์ที่ต้องการเครื่องมือ SEO ครบวงจรนอกเหนือจาก composables ในตัว โมดูลนี้ลด boilerplate

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

Module สร้าง sitemaps จาก routes โดยอัตโนมัติ จัดการ trailing slash normalization และให้ composables สำหรับ structured data ทีมที่ดูแลเว็บไซต์ขนาดใหญ่ได้ประโยชน์จากการกำหนดค่าแบบรวมศูนย์

Best Practices SEO Nuxt 4 สำหรับ Production

• ใช้ useSeoMeta สำหรับ SEO tags ทั้งหมด (title, description, Open Graph, Twitter Cards) พร้อม TypeScript autocompletion
• ใช้ useHead สำหรับ canonical URLs, hreflang tags, structured data และ external scripts
• ห่อ static meta tags ใน import.meta.server เพื่อขจัด reactivity overhead ฝั่ง client
• รวม ogImageWidth, ogImageHeight และ ogImageAlt สำหรับ social sharing previews
• ใช้ useHeadSafe สำหรับ user-generated content เพื่อป้องกันการโจมตี XSS
• ตั้งค่าเริ่มต้นระดับ app ใน nuxt.config.ts และ override ที่ระดับ page เมื่อจำเป็นเท่านั้น
• ทดสอบด้วย Google Rich Results Test เพื่อตรวจสอบ structured data
• ยืนยันการ render ใน tab Network ของ browser DevTools โดยปิด JavaScript เพื่อจำลองพฤติกรรม crawler