08. Nuxt 客製《甜點電商》SEO 基本資訊

2019 iT 邦幫忙鐵人賽

DAY 8

Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 8 篇

2019鐵人賽 ssr vue nuxt seo

Ralph

團隊InfoSec Horadrim

2018-10-23 18:46:58

11903 瀏覽

分享至

客製 SEO 資訊

上一章讓登入頁有了基本樣貌，但需要 SSR 是為了解決兩大問題

具體怎麼做？

前端最基本的，在埋對應的 Meta Tag

來看《甜點電商》版面怎麼定義 Meta Tag

頁面基本資訊與宣告

meta(charset="UTF-8")
meta(name='viewport', content='width=device-width, initial-scale=1')
link(href='img/favicon_48.ico',rel="shortcut icon" type="image/x-icon")
link(rel='stylesheet', href='https://use.fontawesome.com/releases/v5.3.1/css/all.css', integrity='sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU', crossorigin='anonymous')
meta(http-equiv='X-UA-Compatible', content='ie=edge')

基本 SEO、SMO(對 Facebook) 所需資訊

title 甜點電商
meta(property='og:title', content='甜點電商')
meta(property='og:description', content='六角學院的甜點電商')
meta(property='og:site_name', content='甜點電商')
meta(property='og:locale', content='zh_TW')

這行定義全域 css，前一篇已做完

link(rel="stylesheet", href="css/all.css?#{Date.now()}")

所以，該做什麼？

讓 Nuxt 產生 1 與 2 Meta Tag

Nuxt 能夠讓你客製 <HEAD>

全域: 整個網站，寫在全域設定檔 nuxt.config.js
單頁: 套用單頁，寫在頁面元件 pages/*.vue 的 head 設定

兩者只差在寫的地方不同
先照原切版，填入全域設定

head: {
  title: '甜點電商',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { 'http-equiv': 'X-UA-Compatible', content:'ie=edge' },
    { property: 'og:title', content: '甜點電商' },
    { property: 'og:description', content: '六角學院的甜點電商' },
    { property: 'og:site_name', content: '甜點電商' },
    { property: 'og:locale', content: 'zh_TW' }
  ],
  link: [
    { rel: 'shortcut icon', href: '~/img/favicon_48.ico', type: 'image/x-icon' },
    { rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.3.1/css/all.css', integrity: 'sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU', crossorigin: 'anonymous' }
  ]
}

若沒設的話，Nuxt 帶入預設值:

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

套用單頁

若想讓各頁面被搜到的資訊不同，像是每一頁 title 都不同 (例如商品頁資訊)
將該頁資訊寫在對應的 pages/*.vue 設定，輕輕鬆鬆！

<template>
...
</template>
<script>
    export default {
        head: {
          title: '甜點電商 - 巧克力布朗尼'
        },
        /*...略*/
    }
</script>

關於 SMO Tag

社群媒體有各自的定義，你可以針對需要，查詢該 SMS 需要填寫哪些資訊

洋洋灑灑列出如下:

Twitter meta-tags
- twitter:card
- twitter:site
- twitter:title
- twitter:description
- twitter:creator
- twitter:image
- twitter:data1
- twitter:label1
- twitter:data2
- twitter:label2
Open Graph Data
- og:title
- og:type
- og:image
- og:description
- og:site_name
- og:url
- og:locale
Facebook specific tags
- fb:admins (for an existing related facebook page)
~~Google plus specific tags~~
- ~~itemprop="name"~~
- ~~itemprop="description"~~
- ~~itemprop="image"~~
- ~~g+ publisher (for an existing related google+ page)~~