Quasar Meta插件

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

TIP

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

安装

// quasar.conf.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' },
      // 注意:对于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' }
  }
}

WARNING

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

在上面的示例中,您注意到所有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/进行验证。