更好的网站SEO！ Meta插件可以动态更改页面标题、管理<meta>标记、管理<html>和<body>DOM元素属性、添加/删除/更改文档头部的<style>和<script>标记（例如，对于CDN样式表或json-ld标记非常有用）或管理<noscript>标签。
TIP
结合使用Quasar CLI来充分利用此功能，尤其是对于SSR（服务器端渲染）版本。 将其用于SPA（单页应用程序）也是有意义的。尽管在这种情况下，meta信息将在运行时添加，而不是由Web服务器直接提供（如在SSR构建中）,但像Googlebot 这样的现代web爬虫程序将呈现动态页面并提取出动态设置的meta信息。
安装
// quasar.conf.js
return {
framework: {
plugins: [
'Meta'
]
}
}用法
Meta插件的作用是可以在Vue组件中使用称为“ meta”的特殊属性。 看看下面的示例，它几乎具有所有功能。
Important!
确保不要重复/src/index.template.html中已经存在的内容。如果你想使用Meta插件，推荐的方法是将相同的标签从html模板中删除。但是，在你知道一个标签永远不会改变，并且你总是希望它被呈现出来的情况下，那么最好只把它放在html模板上。
// 一些.vue文件
export default {
// ...
meta: {
// 设置文件标题
title: 'Index Page',
// 可选的; 将最终标题设置为“Index Page - My Website”，对于多级meta有用
titleTemplate: title => `${title} - My Website`,
// meta标记
meta: {
description: { name: 'description', content: 'Page 1' },
keywords: { name: 'keywords', content: 'Quasar website' },
equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' },
// 注意：对于opengraph类型的metadata，您需要使用SSR，以确保页面由服务器渲染
ogTitle: {
name: 'og:title',
// 可选；类似于titleTemplate，但允许使用其他meta属性进行模板化
template (ogTitle) {
return `${ogTitle} - My Website`
}
}
},
// CSS标记
link: {
material: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
},
// JS标记
script: {
ldJson: {
type: 'application/ld+json',
innerHTML: `{ "@context": "http://schema.org" }`
}
},
// <html>属性
htmlAttr: {
'xmlns:cc': 'http://creativecommons.org/ns#' // 生成<html xmlns:cc="http://creativecommons.org/ns#">,
empty: undefined // 生成<html empty>
},
// <body> attributes
bodyAttr: {
'action-scope': 'xyz', // 生成<body action-scope="xyz">
empty: undefined // 生成<body empty>
},
// <noscript>标记
noscript: {
default: 'This is content for browsers with no JS (or disabled JS)'
}
}
}
工作原理
元数据(Meta)是由Vue Router激活的.vue文件顺序计算出来的（为进一步说明，我们将其称为链）。 示例：App.vue > SomeLayout.vue > IndexPage.vue > …?
当包含meta属性的组件被渲染或销毁时，会将其添加到链中/从链中删除，并相应地更新meta。
注意，所有属性（title和titleTemplate除外）都是对象； 您可以通过再次使用相同的键来覆盖链中先前Vue组件中定义的meta属性。 例：
// 首先加载的Vue组件
meta: {
meta: {
myKey: { name: 'description', content: 'My Website' }
}
}
// 链中的后续Vue组件；
// 这将覆盖“myKey”上的第一个定义
meta: {
meta: {
myKey: { name: 'description', content: 'Page 1' }
}
}
在上面的示例中，您注意到所有meta属性都是“静态”的。 但是，如果您愿意，它们可以是动态的。 这是您可以将它们绑定到Vue范围的方法。 将它们视为Vue计算属性。
// 一些.vue文件
export default {
data () {
return {
title: 'Some title' // 我们定义"title"属性
}
},
// 注意meta是此处的函数，
// 是您从Vue组件的作用域引用属性的方式
meta () {
return {
// 这将访问data“数据”中的“title”属性;
// 每当“title”属性更改时，您的meta将自动更新
title: this.title
}
},
methods: {
setAnotherTitle () {
this.title = 'Another title' // 由于绑定，将自动触发meta更新
}
}
// ...
}
测试Meta
部署之前，您确实应该确保对meta标记的工作符合要求。 尽管您可以仅将链接复制并粘贴到Discord聊天室、Facebook帖子或Tweet中，但是我们建议您使用https://metatags.io/进行验证。
Important!
这个测试只适用于SSR构建，因为SSR在访问Webserver时直接提供了渲染的HTML（与SPA或PWA相反，后者提供一个空的页面，然后在客户端的浏览器上加载渲染页面的代码）。像上面的服务（metatags.io）在获取页面时希望它已经被渲染了（它不会自己运行JS来渲染它）。