# SEO ด้วย Nuxt (Vue.js / Nuxt.js)

> Meta tag, useHead, useSeoMeta, structured data, sitemap, robots.txt, Open Graph, การแชร์บนโซเชียล

- 20 คำถามสัมภาษณ์
- Senior
- [คำถามสัมภาษณ์: Vue.js / Nuxt.js](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions.md)

## 1. ความแตกต่างหลักระหว่าง useHead และ useSeoMeta ใน Nuxt คืออะไร?

**คำตอบ**

useHead เป็น composable ทั่วไปสำหรับจัดการแท็กทั้งหมดใน head ของ HTML (title, script, link, style, meta) ในขณะที่ useSeoMeta เชี่ยวชาญเฉพาะแท็ก meta สำหรับ SEO พร้อมการระบุชนิดข้อมูล TypeScript ที่เข้มงวด useSeoMeta ให้ความปลอดภัยของชนิดข้อมูลที่ดีกว่าและตรวจสอบความถูกต้องของคุณสมบัติ SEO เช่น og:image, twitter:card โดยอัตโนมัติ ในขณะที่ useHead ต้องตั้งค่าแท็ก meta ด้วยตนเอง ควรใช้ useSeoMeta สำหรับเมตาดาต้า SEO และใช้ useHead สำหรับองค์ประกอบอื่น ๆ ใน head

## 2. แท็ก canonical คืออะไรและทำไมจึงสำคัญต่อ SEO?

**คำตอบ**

แท็ก canonical (rel=canonical) บอกเครื่องมือค้นหาว่าเวอร์ชันหลักของหน้าคือเวอร์ชันใดเมื่อมีหลาย URL ที่มีเนื้อหาคล้ายกันหรือเหมือนกัน ช่วยป้องกันการลงโทษเนื้อหาซ้ำและรวม PageRank ไปยัง URL ที่เป็น canonical ใน Nuxt แท็ก canonical จะถูกสร้างขึ้นโดยอัตโนมัติเป็นค่าเริ่มต้นสำหรับแต่ละหน้า โดยชี้ไปยัง URL ปัจจุบัน สามารถปิดหรือปรับแต่งได้ผ่าน useSeoMeta ด้วย canonical: false หรือ URL ที่ระบุ จำเป็นอย่างยิ่งสำหรับเว็บไซต์ที่มีการแบ่งหน้า ตัวกรอง หรือเวอร์ชันหลายภาษา

## 3. จะปิดการจัดทำดัชนีของหน้าใดหน้าหนึ่งใน Nuxt โดยยังอนุญาตให้ crawling ได้อย่างไร?

**คำตอบ**

การใช้ useSeoMeta ด้วย robots: 'noindex, follow' จะอนุญาตให้ครอว์เลอร์เข้าชมหน้าและติดตามลิงก์ได้ แต่ป้องกันการจัดทำดัชนีในผลการค้นหา วิธีนี้ดีกว่า robots.txt สำหรับหน้าที่ถูกจัดทำดัชนีไปแล้ว เพราะ robots.txt บล็อก crawling แต่ไม่ลบหน้าออกจากดัชนี ทางเลือก: ใช้ defineRouteRules ด้วย robots: 'noindex' เพื่อการกำหนดค่าแบบรวมศูนย์ หากต้องการบล็อก crawling ทั้งหมด จำเป็นต้องใช้ robots.txt ด้วย Disallow แต่ยืดหยุ่นน้อยกว่าในแต่ละหน้า

## มีอีก 17 คำถาม

- พร็อพเพอร์ตี้ Open Graph ที่จำเป็นสำหรับการแชร์บนโซเชียลที่ดีมีอะไรบ้าง?
- จะสร้าง sitemap แบบไดนามิกใน Nuxt จาก API ภายนอกได้อย่างไร?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/javascript-fundamentals.md): 20 คำถาม, Junior
- [JavaScript สมัยใหม่ (ES6+)](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/es6-modern-javascript.md): 20 คำถาม, Junior
- [พื้นฐาน Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-basics.md): 22 คำถาม, Junior
- [คอมโพเนนต์ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-components.md): 20 คำถาม, Junior
- [Vue Router](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-router.md): 18 คำถาม, Junior
- [Pinia State Management](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/pinia-state-management.md): 20 คำถาม, Junior
- [Vuex (Legacy)](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vuex-legacy.md): 15 คำถาม, Mid-Level
- [Composition API](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/composition-api.md): 24 คำถาม, Mid-Level
- [ระบบ Reactivity ของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-reactivity.md): 20 คำถาม, Mid-Level
- [พื้นฐาน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-fundamentals.md): 22 คำถาม, Mid-Level
- [การดึงข้อมูล (Data Fetching) ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-data-fetching.md): 20 คำถาม, Mid-Level
- [SSR และ SSG ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-ssr-ssg.md): 22 คำถาม, Mid-Level
- [Server Routes ของ Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-server-routes.md): 20 คำถาม, Mid-Level
- [โมดูล Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-modules.md): 18 คำถาม, Mid-Level
- [Composables ใน Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-composables.md): 20 คำถาม, Mid-Level
- [ฟอร์มและการตรวจสอบ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-forms-validation.md): 20 คำถาม, Mid-Level
- [การจัดการสถานะใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-state-management.md): 18 คำถาม, Mid-Level
- [การทดสอบ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-testing.md): 20 คำถาม, Mid-Level
- [การ Deploy Nuxt และ CI/CD](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-deployment-cicd.md): 22 คำถาม, Mid-Level
- [ประสิทธิภาพของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-performance.md): 22 คำถาม, Senior
- [รูปแบบขั้นสูงของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24 คำถาม, Senior
- [TypeScript กับ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/typescript-vue.md): 22 คำถาม, Senior
- [การยืนยันตัวตน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-auth.md): 20 คำถาม, Senior
- [การทำ Internationalization ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-i18n.md): 18 คำถาม, Senior
- [สถาปัตยกรรม Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-architecture.md): 22 คำถาม, Senior
- [ความปลอดภัยของ Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-security.md): 20 คำถาม, Senior
- [ระบบนิเวศ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-ecosystem.md): 18 คำถาม, Senior
- [การย้าย Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/migration-vue2-vue3-nuxt2-nuxt3.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-seo