Nuxt.js Fundamental ตอนที่ 11 - ทำ SEO และ Meta tags

เนื้อหาของบทเรียน Nuxt.js

ต่อมาดูเรื่องของการทำ 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 แบบนี้

1
head: {
2
  titleTemplate: 'Nuxt.js Fundamental - %s',
3
  title: 'Nuxt.js Fundamental',
4
  meta: [
5
    { charset: 'utf-8' },
6
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
7
    { hid: 'description', name: 'description', content: 'Meta description' }
8
  ]
9
}

เราสามารถกำหนด

title - คือ document.title ได้เลย
titleTemplate - สามารกำหนด Template ได้ โดย title จะมาแทนที่ %s นั่นเอง
meta - สามารถใส่ charset, description ได้ (โดยใช้ hid เพื่อหลีกเลี่ยง duplicate data เวลาใช้ใน child component)

หรือจะใส่ script หรือ stylesheet ก็ได้เช่นกัน แบบนี้

1
export default {
2
  head: {
3
    script: [
4
      {
5
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
6
      }
7
    ],
8
    link: [
9
      {
10
        rel: 'stylesheet',
11
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
12
      }
13
    ]
14
  }
15
}

2. กำหนดแต่ละ Page (Local Setting)

เราสามารถกำหนด global และแต่ละหน้า ก็สามารถกำหนดแยกได้เช่น กัน เช่น ผมแก้ไฟล์ /pages/about.vue แบบนี้

1
<template>
2
  <h2>This is about</h2>
3
</template>
4
<script>
5
  export default {
6
    head() {
7
      return {
8
        title: 'This is about title',
9
        link: [
10
          {
11
            rel: 'stylesheet',
12
            href: 'https://fonts.googleapis.com/css?family=Lato&display=swap'
13
          }
14
        ]
15
      }
16
    }
17
  }
18
</script>

3. แบบ Dynamic Local

แบบนี้คือการกำหนด head แยกแต่ละหน้า และสามารถกำหนด dynamic data โดยอ่านค่าจาก data() หรือ computed() ได้ เช่น เราอาจจะ fetch() ข้อมูลจาก API มาเซฟลง data จากนั้น ตัว head() ก็จะใช้ค่าจาก API มากำหนด SEO ได้ เช่น

1
<template>
2
  <h1>{{ title }}</h1>
3
</template>
4
<script>
5
  export default {
6
    data() {
7
      return {
8
        title: 'Home page'
9
      }
10
    },
11
    async asyncData({ $axios }) {
12
      const response = await $axios.$get('/path/to/some/api')
13
      return {
14
        title: response.title
15
      }
16
    },
17
    head() {
18
      return {
19
        title: this.title
20
      }
21
    }
22
  }
23
</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 บางส่วนละ จะเหมือนกันมั้ย?)

อ่านบทถัดไป 👉 ตอนที่ 12 - Workshop

Nuxt.js Fundamental ตอนที่ 11 - ทำ SEO และ Meta tags

1. กำหนดแบบ Global

2. กำหนดแต่ละ Page (Local Setting)

3. แบบ Dynamic Local

Hints & Questions?

Chai Phonbopit

Related Posts

Nuxt.js Fundamental ตอนที่ 12 - ทำ Workshop เว็บ Portfolio

Nuxt.js Fundamental ตอนที่ 10 - การทำ Internal API และ Middleware

Nuxt.js Fundamental ตอนที่ 8 - การทำระบบ Authentication