SEO ด้วย Nuxt
Meta tag, useHead, useSeoMeta, structured data, sitemap, robots.txt, Open Graph, การแชร์บนโซเชียล
1ความแตกต่างหลักระหว่าง useHead และ useSeoMeta ใน Nuxt คืออะไร?
ความแตกต่างหลักระหว่าง 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 คืออะไรและทำไมจึงสำคัญต่อ SEO?
คำตอบ
แท็ก canonical (rel=canonical) บอกเครื่องมือค้นหาว่าเวอร์ชันหลักของหน้าคือเวอร์ชันใดเมื่อมีหลาย URL ที่มีเนื้อหาคล้ายกันหรือเหมือนกัน ช่วยป้องกันการลงโทษเนื้อหาซ้ำและรวม PageRank ไปยัง URL ที่เป็น canonical ใน Nuxt แท็ก canonical จะถูกสร้างขึ้นโดยอัตโนมัติเป็นค่าเริ่มต้นสำหรับแต่ละหน้า โดยชี้ไปยัง URL ปัจจุบัน สามารถปิดหรือปรับแต่งได้ผ่าน useSeoMeta ด้วย canonical: false หรือ URL ที่ระบุ จำเป็นอย่างยิ่งสำหรับเว็บไซต์ที่มีการแบ่งหน้า ตัวกรอง หรือเวอร์ชันหลายภาษา
3จะปิดการจัดทำดัชนีของหน้าใดหน้าหนึ่งใน Nuxt โดยยังอนุญาตให้ crawling ได้อย่างไร?
จะปิดการจัดทำดัชนีของหน้าใดหน้าหนึ่งใน Nuxt โดยยังอนุญาตให้ crawling ได้อย่างไร?
คำตอบ
การใช้ useSeoMeta ด้วย robots: 'noindex, follow' จะอนุญาตให้ครอว์เลอร์เข้าชมหน้าและติดตามลิงก์ได้ แต่ป้องกันการจัดทำดัชนีในผลการค้นหา วิธีนี้ดีกว่า robots.txt สำหรับหน้าที่ถูกจัดทำดัชนีไปแล้ว เพราะ robots.txt บล็อก crawling แต่ไม่ลบหน้าออกจากดัชนี ทางเลือก: ใช้ defineRouteRules ด้วย robots: 'noindex' เพื่อการกำหนดค่าแบบรวมศูนย์ หากต้องการบล็อก crawling ทั้งหมด จำเป็นต้องใช้ robots.txt ด้วย Disallow แต่ยืดหยุ่นน้อยกว่าในแต่ละหน้า
พร็อพเพอร์ตี้ Open Graph ที่จำเป็นสำหรับการแชร์บนโซเชียลที่ดีมีอะไรบ้าง?
จะสร้าง sitemap แบบไดนามิกใน Nuxt จาก API ภายนอกได้อย่างไร?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ
พื้นฐาน JavaScript
JavaScript สมัยใหม่ (ES6+)
พื้นฐาน Vue
คอมโพเนนต์ Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
ระบบ Reactivity ของ Vue
พื้นฐาน Nuxt
การดึงข้อมูล (Data Fetching) ใน Nuxt
SSR และ SSG ใน Nuxt
Server Routes ของ Nuxt
โมดูล Nuxt
Composables ใน Vue
ฟอร์มและการตรวจสอบ Vue
การจัดการสถานะใน Nuxt
การทดสอบ Vue
การ Deploy Nuxt และ CI/CD
ประสิทธิภาพของ Vue
รูปแบบขั้นสูงของ Vue
TypeScript กับ Vue
การยืนยันตัวตน Nuxt
การทำ Internationalization ใน Nuxt
สถาปัตยกรรม Vue
ความปลอดภัยของ Nuxt
ระบบนิเวศ Vue
การย้าย Vue 2→3 & Nuxt 2→3
เชี่ยวชาญ Vue.js / Nuxt.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี