iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

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

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

  • 分享至 

  • xImage
  •  

客製 SEO 資訊

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

  • SEO
  • SMO

具體怎麼做?

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

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

  1. 頁面基本資訊與宣告
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')
  1. 基本 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')
  1. 這行定義全域 css,前一篇已做完
link(rel="stylesheet", href="css/all.css?#{Date.now()}")

所以,該做什麼?

讓 Nuxt 產生 12 Meta Tag

Nuxt 能夠讓你客製 <HEAD>

  • 全域: 整個網站,寫在全域設定檔 nuxt.config.js
  • 單頁: 套用單頁,寫在頁面元件 pages/*.vuehead 設定

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

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)

SMS 也有提供偵錯工具,供人預覽自家網站的完成度
Facebook Debugger - https://developers.facebook.com/tools/debug/

聰慧如你,其他欄位就交給讀者自己加囉!


上一篇
07. Nuxt 頁面怎麼切會更好?以電商登入頁為例
下一篇
09. Nuxt 頁面元件細部設定
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言