- Nuxt.js Fundamental ตอนที่ 0 - พื้นฐานการเขียนเว็บด้วย Nuxt.js
- Nuxt.js Fundamental ตอนที่ 1 - เริ่มต้นกับ Nuxt.js
- Nuxt.js Fundamental ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app
- Nuxt.js Fundamental ตอนที่ 3 - การกำหนด Routing
- Nuxt.js Fundamental ตอนที่ 4 - Nuxt.js Concept
- Nuxt.js Fundamental ตอนที่ 5 - Nuxt Content และ Async Data
- Nuxt.js Fundamental ตอนที่ 6 - การ Fetch ข้อมูลจาก API
- Nuxt.js Fundamental ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store
- Nuxt.js Fundamental ตอนที่ 8 - การทำระบบ Authentication
- Nuxt.js Fundamental ตอนที่ 9 - การ Deploy Nuxt.js
- Nuxt.js Fundamental ตอนที่ 10 - การทำ Internal API และ Middleware
- Nuxt.js Fundamental ตอนที่ 11 - ทำ SEO และ Meta tags
- Nuxt.js Fundamental ตอนที่ 12 - ทำ Workshop เว็บ Portfolio
Nuxt.js Fundamental ตอนที่ 11 - ทำ SEO และ Meta tags
เขียนวันที่ : Aug 25, 2020
(อัพเดท : Mar 20, 2022)
ต่อมาดูเรื่องของการทำ SEO กันบ้างนะครับ การทำ SEO ใน Nuxt.js คือ เราสามารถกำหนด title, แทรก script หรือ stylesheet ลงไปใน <head></head>
ได้ หรือ การกำหนด meta tag ของ Social media เช่น Facebook, Twitter เวลาแชร์ link แล้วให้โชว์ thumbnail หรือ title เป็นต้น การทำ SEO ของ Nuxt.js ก็ง่ายมากๆ คือ
- กำหนดแบบ Global ที่ไฟล์
nuxt.config.js
- กำหนดแต่ละ Page ผ่าน
head()
- สามารถทำ dynamic อ่านค่าจาก
data
ได้เช่นกัน
โดยตัว SEO นั้น ก็ใช้ Vue Meta นั่นเอง สำหรับใครติดปัญหา ก็ดู reference จาก Vue Meta ได้เลย
1. กำหนดแบบ Global
ตัวอย่าง เราแก้ไขไฟล์ nuxt.config.js
ให้ setup SEO แบบ global แบบนี้
head: {
titleTemplate: 'Nuxt.js Fundamental - %s',
title: 'Nuxt.js Fundamental',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
เราสามารถกำหนด
title
- คือdocument.title
ได้เลยtitleTemplate
- สามารกำหนด Template ได้ โดยtitle
จะมาแทนที่%s
นั่นเองmeta
- สามารถใส่ charset, description ได้ (โดยใช้hid
เพื่อหลีกเลี่ยง duplicate data เวลาใช้ใน child component)
หรือจะใส่ script หรือ stylesheet ก็ได้เช่นกัน แบบนี้
export default {
head: {
script: [
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
}
],
link: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
}
]
}
};
2. กำหนดแต่ละ Page (Local Setting)
เราสามารถกำหนด global และแต่ละหน้า ก็สามารถกำหนดแยกได้เช่น กัน เช่น ผมแก้ไฟล์ /pages/about.vue
แบบนี้
<template>
<h2>This is about</h2>
</template>
<script>
export default {
head() {
return {
title: 'This is about title',
link: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Lato&display=swap'
}
]
};
}
};
</script>
3. แบบ Dynamic Local
แบบนี้คือการกำหนด head
แยกแต่ละหน้า และสามารถกำหนด dynamic data โดยอ่านค่าจาก data()
หรือ computed()
ได้ เช่น เราอาจจะ fetch()
ข้อมูลจาก API มาเซฟลง data
จากนั้น ตัว head()
ก็จะใช้ค่าจาก API มากำหนด SEO ได้ เช่น
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: 'Home page'
};
},
async asyncData({ $axios }) {
const response = await $axios.$get('/path/to/some/api');
return {
title: response.title
};
},
head() {
return {
title: this.title
};
}
};
</script>
นี้ก็เป็นเพียงแค่ตัวอย่างคร่าวๆ ของการปรับ SEO และใส่พวก tag ต่างๆ ใน Head ครับ นอกจากนี้ก็ยังมีเรื่องอื่นๆ อีก เช่น
- เราสามารถกำหนด
prefetch
หรือpreload
ได้ - เราควรกำหนด
hid
ให้กับทุกๆ tag เพื่อกันข้อมูล duplicate เพราะ default ตัว Vue Meta จะสร้าง duplicate tag ให้อัตโนมัติ นอกเสียจากเราจะกำหนดhid
มันถึงจะ override ค่าเก่า
ลองไปปรับแก้ และของทำกันดูครับ
Hints & Questions?
- ลองใส่ meta tag
og:image
เพื่อแชร์ลง Facebook หรือ Twitter - ถ้าเราเปลี่ยนโหมดเป็น
spa
ตอน build SEO ยังทำงานหรือไม่? - ระหว่าง Server side rendering กับ Static generate แบบ Pre-rendering มีผลต่อ SEO มั้ย? (แน่นอน static web มันมี HTML ทั้งหมด ดีต่อ SEO อยู่แล้ว แต่ถ้า Pre-rendering บางส่วนละ จะเหมือนกันมั้ย?)