ตอนที่ 11 - ทำ SEO และ Meta tags

ต่อมาดูเรื่องของการทำ SEO กันบ้างนะครับ การทำ SEO ใน Nuxt.js คือ เราสามารถกำหนด title, แทรก script หรือ stylesheet ลงไปใน <head></head> ได้ หรือ การกำหนด meta tag ของ Social media เช่น Facebook, Twitter เวลาแชร์ link แล้วให้โชว์ thumbnail หรือ title เป็นต้น การทำ SEO ของ Nuxt.js ก็ง่ายมากๆ คือ

  1. กำหนดแบบ Global ที่ไฟล์ nuxt.config.js
  2. กำหนดแต่ละ Page ผ่าน head()
  3. สามารถทำ 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 บางส่วนละ จะเหมือนกันมั้ย?)
FacebookTwitterSupport Me
< Previous
ตอนที่ 10 - การทำ Internal API และ Middleware
Next >
ตอนที่ 12 - Workshop