上一章讓登入頁有了基本樣貌,但需要 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')
title 甜點電商
meta(property='og:title', content='甜點電商')
meta(property='og:description', content='六角學院的甜點電商')
meta(property='og:site_name', content='甜點電商')
meta(property='og:locale', content='zh_TW')
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>
社群媒體有各自的定義,你可以針對需要,查詢該 SMS 需要填寫哪些資訊
洋洋灑灑列出如下:
Twitter meta-tags
Open Graph Data
Facebook specific tags
Google plus specific tags
SMS 也有提供偵錯工具,供人預覽自家網站的完成度
Facebook Debugger - https://developers.facebook.com/tools/debug/
聰慧如你,其他欄位就交給讀者自己加囉!