VuePress Plugin Auto Meta
Auto meta tags plugin for VuePress 1.x
What
This is a Plug-and-Forget VuePress plugin that will auto generate the meta tags for VuePress pages or posts.
Install
$ npm install -D vuepress-plugin-autometa # or $ yarn add -D vuepress-plugin-autometa
Usage
Add vuepress-plugin-autometa
in your site or theme config file.
// .vuepress/config.js// or// .vuepress/theme/index.js // set your global autometa options - override in page frontmatterconst autometa_options = site: name : 'Webmasterish' twitter: 'webmasterish' canonical_base: 'https://webmasterish.com'; moduleexports = plugins: 'autometa' autometa_options
Options
See Plugin Option API official docs
Default options
You can override default options in 2 ways:
- Global plugin options set in
.vuepress/config.js
or.vuepress/theme/index.js
as described in Usage - Individual page/post
frontmatter
as shown in Examples
const default_options = enable : true // enables/disables everything - control per page using frontmatter image : true // regular meta image used by search engines twitter: true // twitter card og : true // open graph: facebook, pinterest, google+ schema : true // schema.org for google // ------------------------------------------------------------------------- // canonical_base is the canonical url base - best to set once in config.js // if set it will be used to prepend page path and add it to the following: // - twitter:url // - og:url // - canonical link (not yet supported) canonical_base: '' // @todo //canonical_link: true, // // having only started with vuepress a few days ago, // so far, i couldn't figure out a proper way to extend config head // and add <link rel="canonical" href="URL.resolve( canonical_base, $page.path )"> // feel free to tip-in // --------------------------------------------------------------------------- author: name : '' twitter: '' // --------------------------------------------------------------------------- site: name : '' twitter: '' // --------------------------------------------------------------------------- // order of what gets the highest priority: // // 1. frontmatter // 2. page excerpt // 3. content markdown paragraph // 4. content regular html <p> description_sources: 'frontmatter' 'excerpt' // markdown paragraph regex // /^+\n/img // // this excludes blockquotes using `(?!^>)` ///^((?:(?!^#)(?!^\-|\+)(?!^[0-9]+\.)(?!^!\[.*?\]\((.*?)\))(?!^>)(?!^\[\[.*?\]\])(?!^\{\{.*?\}\})[^\n]|\n(?! *\n))+)(?:\n *)+\n/img, // html paragraph regex /<p><\/p>/i // --------------------------------------------------------------------------- // order of what gets the highest priority: // // 1. frontmatter // 2. content markdown image such as `![alt text](http://url)` // 3. content regular html img image_sources: 'frontmatter' /!\[.*?\]\(\)/i // markdown image regex /<img.*?src=['"]['"]/i // html image regex ;
Examples
Assuming we have this sample index.md
file
--- title: Plans for the Next Iteration of VuePress date: 2018-12-28T15:18:13+0200 autometa: author: name: Evan You twitter: youyuxi tags: - VuePress - auto meta tags - are cool --- # {{ $page.title }} ## Simplicity First Minimal setup with markdown-centered project structurehelps you focus on writing. ![random image](http://lorempixel.com/640/480) ## Vue-Powered Enjoy the dev experience of Vue + webpack, use Vue components in markdown,and develop custom themes with Vue. ## Performant VuePress generates pre-rendered static HTML for each page,and runs as an SPA once a page is loaded.
The auto generated metas will be as follows:
Reference
- VuePress official plugin docs
- VuePress official Front Matter
- HEAD guide
- Twitter Cards
- Open Graph protocol
- Schema.org
License
MIT © webmasterish