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 บางส่วนละ จะเหมือนกันมั้ย?)
