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.

See official docs on using a plugin

// .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 ]
  ]
}

Options

See Plugin Option API official docs

Default options

You can override default options in 2 ways:

1. Global plugin options set in .vuepress/config.js or .vuepress/theme/index.js as described in Usage
2. 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 `![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 structure
helps 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:

<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">

Reference

• VuePress official plugin docs
• VuePress official Front Matter
• HEAD guide
• Twitter Cards
• Open Graph protocol
• Schema.org

License

MIT © webmasterish