ถ้าใน WordPress มันจะมีการกำหนดประมาณว่า “WebName | KanexKane” อะไรแบบนี้เนอะ แต่ใน Nuxt ถ้าจะมากำหนดทีละหน้า มันดูไม่น่าใช่ เราก็จะมาทำให้มันกำหนดออกมาได้แบบนี้ เหมือนกำลังใช้ Yoast SEO กันอยู่เลย
// file: nuxt.config.ts export default defineNuxtConfig({ app: { head: { title: '', titleTemplate: '%s %separator %siteName' templateParams: { siteName: 'KanexKane', separator: '|', } } } });
เท่านี้เราก็จะได้ title template ที่เราต้องการละ แล้วถ้าต้องการเพิ่มพวก meta description เข้าไปอีกก็เพิ่มไปแบบนี้
// file: nuxt.config.ts export default defineNuxtConfig({ app: { head: { title: '', titleTemplate: '%s %separator %siteName' templateParams: { siteName: 'KanexKane', separator: '|', } meta: [ { name: 'description', content: 'สอนทำ title template และเพิ่ม meta description' }, ], } } });
วิธีใช้แบบหน้าเดียว
// pages/index.vue <script setup> useHead({ title: 'หน้าแรก', }); </script> <template> INDEX </template>
วิธีใช้แบบทุกหน้าด้วย Middleware
// pages/index.vue <script setup> definePageMeta({ title: 'หน้าแรก', }); </script> <template> INDEX </template>
// middleware/head.global.js export default defineNuxtMiddleware((to, from) => { useHead({ title: to.meta.title, }); });
สร้างไฟล์ head.global.js การสร้างไฟล์ที่ .global ใน middleware แปลว่ามันจะถูกเรียกใช้ทุกครั้งอัตโนมัติทุกหน้าเลย ในกรณีที่ทำอย่างนี้คือบางทีการกำหนดแต่ละหน้า มันไม่ได้กำหนดแค่ title อย่างเดียว จะมีการกำหนด Layout ด้วย แบบนี้
// pages/index.vue <script setup> definePageMeta({ layout: 'admin', }); useHead({ title: 'หน้าแรก', }); </script> <template> INDEX </template>
การเขียน defindPageMeta กับ useHead เลยดูโค้ดยุ่งยากขึ้นนิดนึง เลยทำการรวบแบบนี้จะดูง่ายกว่า
// pages/index.vue <script setup> definePageMeta({ layout: 'admin', title: 'หน้าแรก', }); </script> <template> INDEX </template>
// middleware/head.global.js export default defineNuxtMiddleware((to, from) => { useHead({ title: to.meta.title, }); });