Auto meta tags plugin for VuePress 1.x
This is a Plug-and-Forget VuePress plugin that will auto generate the meta tags for VuePress pages or posts.
$ npm install -D vuepress-plugin-autometa # or $ yarn add -D vuepress-plugin-autometa
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 frontmatter const autometa_options = { site: { name : 'Webmasterish', twitter: 'webmasterish', }, canonical_base: 'https://webmasterish.com', }; module.exports = { plugins: [ [ 'autometa', autometa_options ] ] }
See Plugin Option API official docs
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 // /^((?:(?!^#)(?!^\-|\+)(?!^[0-9]+\.)(?!^!\[.*?\]\((.*?)\))(?!^\[\[.*?\]\])(?!^\{\{.*?\}\})[^\n]|\n(?! *\n))+)(?:\n *)+\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 `` // 3. content regular html img image_sources: [ 'frontmatter', /!\[.*?\]\((.*?)\)/i, // markdown image regex /<img.*?src=['"](.*?)['"]/i, // html image regex ], };
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 structure helps you focus on writing.  ## 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:
<meta name="description" content="Minimal setup with markdown-centered project structure helps you focus on writing."> <meta name="image" content="http://lorempixel.com/640/480"> <meta name="twitter:title" content="Plans for the Next Iteration of VuePress"> <meta name="twitter:description" content="Minimal setup with markdown-centered project structure helps you focus on writing."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="http://lorempixel.com/640/480"> <meta name="twitter:url" content="https://webmasterish.com/plans-for-the-next-iteration-of-vuepress/"> <meta name="twitter:creator" content="@youyuxi"> <meta name="twitter:site" content="@webmasterish"> <meta property="og:type" content="article"> <meta property="og:title" content="Plans for the Next Iteration of VuePress"> <meta property="og:description" content="Minimal setup with markdown-centered project structure helps you focus on writing."> <meta property="og:image" content="http://lorempixel.com/640/480"> <meta property="og:url" content="https://webmasterish.com/plans-for-the-next-iteration-of-vuepress/"> <meta property="og:site_name" content="Webmasterish"> <meta property="article:author" content="Evan You"> <meta property="article:published_time" content="2018-12-28T15:18:13+0200"> <meta property="article:tag" content="VuePress"> <meta property="article:tag" content="auto meta tags"> <meta property="article:tag" content="are cool"> <meta itemprop="name" content="Plans for the Next Iteration of VuePress"> <meta itemprop="description" content="Minimal setup with markdown-centered project structure helps you focus on writing."> <meta itemprop="image" content="http://lorempixel.com/640/480">
- VuePress official plugin docs
- VuePress official Front Matter
- HEAD guide
- Twitter Cards
- Open Graph protocol
- Schema.org
MIT © webmasterish