使用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>
|
而在Nuxt中,分別有兩種方式讓你自訂你的meta tag:
- 全域:透過nuxt.config.js,對整個網站的所有頁面做設定
- 單頁:透過每個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重複的問題,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