Quasar Meta插件

更好的网站SEO! Meta插件可以动态更改页面标题、管理<meta>标记、管理<html><body>DOM元素属性、添加/删除/更改文档头部的<style><script>标记(例如,对于CDN样式表或json-ld标记非常有用)或管理<noscript>标签。

TIP

结合使用Quasar CLI来充分利用此功能,尤其是对于SSR(服务器端渲染)版本。 将其用于SPA(单页应用程序)也没有多大意义,因为在这种情况下,meta信息将在运行时添加,而不是由Web服务器直接提供(与SSR构建一样)。

安装


// quasar.config.js

return {
  framework: {
    plugins: [
      'Meta'
    ]
  }
}

用法

Meta插件的作用是可以在Vue组件中使用称为meta的特殊属性。 看看下面的示例,它几乎具有所有功能:

// 一些.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' }
    },

    // 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>属性
    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)'
    }
  }
}

How It Works

metas是按照Vue Router激活的顺序从.vue文件中计算出来的(为了进一步解释,我们把这称为一个链)。例如:App.vue > SomeLayout.vue > IndexPage.vue > …?

当一个包含 meta属性的组件被渲染或销毁时,它将被添加/移除到链中,metas也会相应地被更新。

注意,所有属性(title和titleTemplate除外)都是对象; 您可以通过再次使用相同的键来覆盖链中先前Vue组件中定义的meta属性。 例:

// 首先加载的Vue组件
meta: {
  meta: {
    myKey: { name: 'description', content: 'My Website' }
  }
}

// 链中的后续Vue组件; 
// 这将覆盖“myKey”上的第一个定义
meta: {
  meta: {
    myKey: { name: 'description', content: 'Page 1' }
  }
}

WARNING

只要确保不重复/src/index.template.html中已经存在的内容即可。 如果要使用Meta插件,建议的方法是从html模板中删除相同的标记。 但是在用例中,您知道标记永远不会改变,并且始终希望渲染它,那么最好只在html模板上使用它。

在上面的例子中,你注意到所有的meta属性都是"静态"的。但如果你愿意,它们也可以是动态的。这就是你如何用它们绑定到Vue范围的方法。把它们看作是Vue的一个计算属性。

// 一些.vue文件
export default {
  data () {
    return {
      title: 'Some title' // 我们定义"title"属性
    }
  },

  // 注意meta在这里是一个函数,
  // 它是你从Vue组件的范围中引用属性的方法
  meta () {
    return {
      // 这将访问你的Vue "data"中的"title"属性;
      // 只要上面的 "title"发生变化,你的meta就会自动更新
      title: this.title
    }
  },

  methods: {
    setAnotherTitle () {
      this.title = 'Another title' // 将自动触发一个Meta更新,由于绑定了
    }
  }
  // ...
}

Testing Meta

部署之前,您确实应该确保对meta标记的工作符合要求。 尽管您可以仅将链接复制并粘贴到Discord聊天室、Facebook帖子或Tweet中,但是我们建议您使用https://metatags.io/进行验证。