為您的網站提供更好的 SEO！ Meta 插件可以動態變更頁面標題、管理 <meta> 標籤、管理 <html> 和 <body> DOM 元素屬性、在文件標頭中新增/移除/變更 <style> 和 <script> 標籤（例如，適用於 CDN 樣式表或 json-ld 標記），或管理 <noscript> 標籤。
提示
**充分利用此功能，搭配 Quasar CLI 使用**，特別是 **適用於 SSR（伺服器端渲染）建置**。將其用於 SPA（單頁應用程式）也可能合理，但是，在這種情況下，meta 資訊將在執行階段新增，而不是由網路伺服器直接提供（如同在 SSR 建置中）。諸如 Googlebot 之類的現代網路爬蟲可能會渲染動態頁面，並擷取出動態設定的 meta 資訊。
// quasar.config file
return {
framework: {
plugins: [
'Meta'
]
}
}用法
Meta 插件的作用是讓您能夠在 Vue 元件中使用名為 meta 的特殊屬性。請查看以下範例，其中包含幾乎所有功能。
重要！
請確保不要重複 /index.html 或 /src/index.template.html 中已存在的內容。如果您想要使用 Meta 插件，建議的方式是從 html 範本中移除相同的標籤。但是，在您知道標籤永遠不會變更，並且您始終希望其渲染的情況下，最好只將其放在 html 範本中。
Composition API
我們將使用 useMeta composable。
import { useMeta } from 'quasar'
const metaData = {
// sets document title
title: 'Index Page',
// optional; sets final title as "Index Page - My Website", useful for multiple level meta
titleTemplate: title => `${title} - My Website`,
// meta tags
meta: {
description: { name: 'description', content: 'Page 1' },
keywords: { name: 'keywords', content: 'Quasar website' },
equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' },
// note: for Open Graph type metadata you will need to use SSR, to ensure page is rendered by the server
ogTitle: {
property: 'og:title',
// optional; similar to titleTemplate, but allows templating with other meta properties
template (ogTitle) {
return `${ogTitle} - My Website`
}
}
},
// CSS tags
link: {
material: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
},
// JS tags
script: {
ldJson: {
type: 'application/ld+json',
innerHTML: `{ "@context": "http://schema.org" }`
}
},
// <html> attributes
htmlAttr: {
'xmlns:cc': 'http://creativecommons.org/ns#', // generates <html xmlns:cc="http://creativecommons.org/ns#">,
empty: undefined // generates <html empty>
},
// <body> attributes
bodyAttr: {
'action-scope': 'xyz', // generates <body action-scope="xyz">
empty: undefined // generates <body empty>
},
// <noscript> tags
noscript: {
default: 'This is content for browsers with no JS (or disabled JS)'
}
}
export default {
setup () {
// needs to be called in setup()
useMeta(metaData)
}
}如果您依賴元件的狀態來計算 meta Object，則可以提供 Function 而不是 Object 本身。如需更多資訊，請查看此頁面上的「Reactive」章節。
Options API
import { createMetaMixin } from 'quasar'
const metaData = {
// sets document title
title: 'Index Page',
// optional; sets final title as "Index Page - My Website", useful for multiple level meta
titleTemplate: title => `${title} - My Website`,
// meta tags
meta: {
description: { name: 'description', content: 'Page 1' },
keywords: { name: 'keywords', content: 'Quasar website' },
equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' },
// note: for Open Graph type metadata you will need to use SSR, to ensure page is rendered by the server
ogTitle: {
property: 'og:title',
// optional; similar to titleTemplate, but allows templating with other meta properties
template (ogTitle) {
return `${ogTitle} - My Website`
}
}
},
// CSS tags
link: {
material: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
},
// JS tags
script: {
ldJson: {
type: 'application/ld+json',
innerHTML: `{ "@context": "http://schema.org" }`
}
},
// <html> attributes
htmlAttr: {
'xmlns:cc': 'http://creativecommons.org/ns#', // generates <html xmlns:cc="http://creativecommons.org/ns#">
empty: undefined // generates <html empty>
},
// <body> attributes
bodyAttr: {
'action-scope': 'xyz', // generates <body action-scope="xyz">
empty: undefined // generates <body empty>
},
// <noscript> tags
noscript: {
default: 'This is content for browsers with no JS (or disabled JS)'
}
}
export default {
mixins: [
createMetaMixin(metaData)
]
}對於 Options API 方法，如果您依賴元件的狀態來計算 meta Object，則可以提供 Function 而不是 Object 本身。
export default {
mixins: [
createMetaMixin(function () {
// "this" here refers to your component
return {
// assuming `this.myTitle` exists in your mixed in component
title: this.myTitle
}
})
]
}運作方式
Meta 是從 .vue 檔案中計算而來，順序是它們的 vue 元件由 Vue Router 啟動的順序（為了進一步說明，我們將其稱為鏈）。範例：App.vue > SomeLayout.vue > IndexPage.vue > …?
當使用 Meta 插件的元件被渲染或銷毀時，它會新增/移除到鏈中，並且 meta 會相應地更新。
處理 HTML 屬性
當您需要在 meta、link 或 script 區段中設定布林 HTML 屬性時，請將其值設定為布林 true。
script: {
myScript: {
src: 'https://...',
defer: true
}
}
// will output:
// <script src="https://..."
// defer
// data-qmeta="myScript">如果您有屬性，並且想要將其設定為「true」的實際值，請使用字串形式。更多詳細資訊如下
someattribute: 'true'
// will output: someattribute="true"
someattribute: true
// will output: someattribute
someattribute: void 0
// will NOT output the attribute
// (useful when you set it upstream
// and want to remove it downstream)
someattribute: ''
// will output: someattribute=""非反應式
請注意，所有屬性（標題和 titleTemplate 除外）都是 Object；您可以再次使用相同的鍵來覆寫在鏈中先前的 Vue 元件中定義的 meta 屬性。範例
// first loaded Vue component
setup () {
useMeta({
meta: {
myKey: { name: 'description', content: 'My Website' }
}
})
}
// a subsequent Vue component in the chain;
// this will override the first definition on "myKey"
setup () {
useMeta({
meta: {
myKey: { name: 'description', content: 'Page 1' }
}
})
}反應式
在以上章節中，您注意到所有 meta 屬性都是「靜態」的。但是，如果您願意，它們可以是動態的（反應式）。這就是您可以像管理 Vue 計算屬性一樣管理它們的方式
import { useMeta } from 'quasar'
import { ref } from 'vue'
export default {
setup () {
const title = ref('Some title') // we define the "title" prop
// NOTICE the parameter here is a function
// Under the hood, it is converted to a Vue computed prop for reactivity
useMeta(() => {
return {
// whenever "title" from above changes, your meta will automatically update
title: title.value
}
})
function setAnotherTitle () {
title.value = 'Another title' // will automatically trigger a Meta update due to the binding
}
return {
setAnotherTitle
}
}
}測試 Meta
在您部署之前，您真的應該確保您在 meta 標籤上的工作符合規範。雖然您可以直接複製並貼上您的連結到 Discord 聊天、Facebook 貼文或推文，但我們建議使用 https://metatags.io/ 進行驗證。
重要！
**此測試僅適用於 SSR 建置**，因為 SSR 在存取網路伺服器時直接提供渲染的 HTML（與 SPA 或 PWA 相反，SPA 或 PWA 提供空白頁面，然後載入在用戶端瀏覽器上渲染頁面的程式碼）。諸如上述 (metatags.io) 之類的服務期望頁面在擷取時已渲染（它本身不會執行 JS 來渲染它）。