为您的网站提供更好的 SEO！元数据插件可以动态更改页面标题，管理 <meta> 标签，管理 <html> 和 <body> DOM 元素属性，在文档的头部添加/删除/更改 <style> 和 <script> 标签（例如，对 CDN 样式表或 json-ld 标记有用），或管理 <noscript> 标签。
提示
通过将此功能与 **Quasar CLI**（尤其是 **用于 SSR（服务器端渲染）构建**）结合使用，充分利用此功能。将它用于 SPA（单页应用程序）也可能很有意义，但是，在这种情况下，元数据将在运行时添加，而不是直接由 Web 服务器提供（如 SSR 构建中）。像 Googlebot 等现代网络爬虫可能会渲染动态页面并提取出动态设置的元数据。
// quasar.config file
return {
framework: {
plugins: [
'Meta'
]
}
}用法
Meta 插件的功能是它允许在 Vue 组件中使用一个名为 meta 的特殊属性。请看下面的示例，它包含了几乎所有功能。
重要！
确保不要重复 /index.html 或 /src/index.template.html 中已有的内容。如果你想使用 Meta 插件，建议从 html 模板中移除相同的标签。但如果你的标签内容不会改变，并且你希望始终渲染它，那么最好将它放在 html 模板中。
组合式 API
我们将使用 useMeta 组合式函数。
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 对象，那么你可以提供一个函数而不是对象本身。有关更多信息，请查看此页面上的“响应式”部分。
选项 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)
]
}对于选项 API 方法，如果你依赖于组件的状态来计算 meta 对象，那么你可以提供一个函数而不是对象本身。
export default {
mixins: [
createMetaMixin(function () {
// "this" here refers to your component
return {
// assuming `this.myTitle` exists in your mixed in component
title: this.myTitle
}
})
]
}工作原理
元数据是从 .vue 文件中计算出来的，其顺序是 Vue Router 激活它们对应的 Vue 组件的顺序（我们称之为链，以便于解释）。例如：App.vue > SomeLayout.vue > IndexPage.vue > …?
当使用 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=""非响应式
注意，所有属性（除了 title 和 titleTemplate）都是对象；你可以使用相同的键来覆盖先前 Vue 组件链中定义的元属性。例如
// 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' }
}
})
}响应式
在上面的部分中，你注意到所有的元属性都是“静态”的。但它们也可以是动态的（响应式的），如果你愿意的话。这是你可以像 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
}
}
}测试元数据
在部署之前，你真的应该确保你的元标签工作符合规范。虽然你可以在 Discord 聊天、Facebook 帖子或推文中复制粘贴你的链接，但我们建议使用 https://metatags.io/ 进行验证。
重要！
此测试仅适用于 SSR 构建，因为 SSR 在访问 Web 服务器时直接提供渲染后的 HTML（与 SPA 或 PWA 相反，SPA 或 PWA 提供一个空页面，然后在客户端的浏览器中加载渲染页面的代码）。像上述服务（metatags.io）在获取页面时期望页面已经渲染（它不会自己运行 JS 来渲染页面）。