0%

在Nuxt上設定SEO、SMO

Posted on Edited on In

使用Nuxt來製作網站，不外乎就是需要SEO、SMO的功能，而要怎麼在Nuxt中建立SEO需要的資訊呢？

以一個一般網頁來看，只要在html的head標籤內埋入相對應的meta tag就可以完成基礎的設定，以下為基礎的SEO與Facebook SMO設定

1
2
3
4
5
6
7
8
9
<head>
<title>KenLee</title>
<meta property="description" content="我的部落格">
<meta property="og:title" content="KenLee">
<meta property="og:description" content="我的部落格">
<meta property="og:image" content="https://ken551113.github.io/image.jpg">
<meta property="og:url" content="https://ken551113.github.io/">
<meta property="og:type" content="website">
</head>

自定義Meta

而在Nuxt中，分別有兩種方式讓你自訂你的meta tag：

  1. 全域：透過nuxt.config.js，對整個網站的所有頁面做設定
  2. 單頁：透過每個pages底下的vue中的head做設定，達到個別顯示的作用

全域

在全域中的設定方法為

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  head: {
    title: 'KenLee',
    meta: [
      { charset: 'utf-8' },
      { hid: 'description', name: 'description', content: '我的部落格' },
      { hid: 'og:title'  , property: 'og:title'  , content: 'KenLee'},
      { hid: 'og:description' , property: 'og:description' , content: '我的部落格'},
      { hid: 'og:url' , property: 'og:url' , content: 'https://ken551113.github.io/'},
      { hid: 'og:image' , property: 'og:image' , content: 'https://ken551113.github.io/image.jpg'},
      { hid: 'og:type' , property: 'og:type' , content: 'website'},
    ]
  }
}

單頁

在單頁設定方法為

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default {
  head () {
    return {
      title: 'KenLee',
      meta: [
          { charset: 'utf-8' },
          { hid: 'description', name: 'description', content: '我的部落格' },
          { hid: 'og:title'  , property: 'og:title'  , content: 'KenLee'},
          { hid: 'og:description' , property: 'og:description' , content: '我的部落格'},
          { hid: 'og:url' , property: 'og:url' , content: 'https://ken551113.github.io/'},
          { hid: 'og:image' , property: 'og:image' , content: 'https://ken551113.github.io/image.jpg'},
          { hid: 'og:type' , property: 'og:type' , content: 'website'},
        ]
    }
  }
}

避免重複的meta標籤

為了解決meta重複的問題，Nuxt中則會多出一個hid的屬性，因為在一個頁面中若父組件與子組件同時存在meta時，則會造成一個頁面有許多重複的meta標籤，hid這個屬性就是用來為meta配一個為一個標誌編號，讓子組件中的meta值可以覆蓋父元件相同的hid值的meta

如果在nuxt.config.js中設定了下面的meta

1
2
3
4
5
6
7
8
9
head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'keywords', content: 'keyword 1, keyword 2'},
      { hid: 'description', name: 'description', content: 'This is the generic description.'}
    ],
  },

那在某頁面組件中就可以利用下面的設定將description從原本的This is the generic description.更改為'My custom description'

1
2
3
4
5
6
7
8
9
export default {
  head () {
    return {
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}

SMO測試

最基本設定的SMO分別就是Facebook與Twitter，可以到這邊看兩者的meta標籤設定規範
Facebook : https://developers.facebook.com/docs/sharing/webmasters?locale=zh_TW
Twitter : https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

設定完之後facebook與twitter也有提供debug網站讓大家測試自己的meta是否有測試成功

Facebook : https://developers.facebook.com/tools/debug/sharing/
Twitter : https://cards-dev.twitter.com/validator

API: head 屬性配置
API: head 方法
Nuxt 客製《甜點電商》SEO 基本資訊
重複的 Meta 標籤
想要你的文章讓更多使用者點閱，Open graph你不能不知道！！
How to Build a SEO-friendly Website Using Nuxt.js