webmasterish / vuepress-plugin-autometa

Auto meta tags plugin for VuePress 1.x

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

vuepress-plugin-autometa's Issues

Front matter image source

Description

Better customisation of image source selection

Expected Behavior

I would be able to programatically choose the image source in frontmatter, using a string path or perhaps a function:

image_sources: [
    page => page.frontmatter.media.thumbnail || page.frontmatter.image
],

Actual Behavior

It seems the code only picks a frontmatter node called image but I want to pick one at media.thumbnail

Also, when the code moves on to use regex to grab a page tag, it ends up with:

<meta name="twitter:image" content="https://davestewart.co.uk/./screens/loading.png">

Also, note that this link shows a path relative the actual page - is there some way to get round this?

In my own code, I resolve the path and then require().

The compiled page (the image was just in markdown) actually shows this:

<img src="/assets/img/loading.143ab32a.png" alt="">

Steps to Reproduce

N/A

Your Environment

Sorry removed this as didn't think it was a bug before.

But, Node 12, latest everything else.

Great plugin, thanks for your hard work!

generated image URLs broken for urls computed by Vue e.g $withBase

Description

The VuePress documentation recommends to use $withBase() to include images when the site is deployed at a non root url:

<img :src="$withBase('/img/logo.svg')" alt="logo" />

Expected Behavior

I'd expect that the url is computed correctly, based on the vuepress config.

Actual Behavior

Generated is this:

<meta property="og:image" content="https://example.com/$withBase(">

Steps to Reproduce

Put the img tag as stated above in your md file.

Your Environment

• vuepress-plugin-autometa version: 0.1.13
• vuepress version : 1.2.0
• OS : win

Permalink is not reflected

Description

Autometa has not catch the rewritten by another extended function.

This problem may be a problem to be solved by the Vuepress core in the future, such as setting the execution order of plugins.

What do you think about this problem?

Temporary solution

before

module.exports = ( plugin_options, context ) => ({
  extendPageData ( $page ) {
    const { frontmatter } = $page;
    ...

after

module.exports = ( plugin_options, context ) => ({
  ready () {
    const { pages } = context
  
    pages.forEach( page => {
      const { frontmatter } = page;
      ...

Expected Behavior

/about.md

---
title: Hello
permalink: about-page
---

# About

output

/about-page/index.html

<!DOCTYPE html>
<head>
  <meta name="twitter:url" content="https://example.com/about-page/">
  ...

Actual Behavior

/about.md

---
title: Hello
permalink: about-page
---

# About

output

/about-page/index.html

<!DOCTYPE html>
<head>
  <meta name="twitter:url" content="https://example.com/about.html">
  ...

Your Environment

• vuepress-plugin-autometa version: 0.1.10
• vuepress version: 1.0.0-alpha.40
• node version: 10.7.0
• npm version: 6.6.0
• OS: MacOS 10.14.2

sorry, I'm using translation.
love this plugin. thanks!

support for VuePress 2.x

Can you please make it support VuePress 2.x?

Change PATH.join to URL.resolve for URLs

Description

Change PATH.join to URL.resolve for URLs in the following lines:

• vuepress-plugin-autometa/index.js

  Line 253 in 0192b42

  return PATH.join( options.canonical_base, $page.path );

• vuepress-plugin-autometa/index.js

  Line 499 in 0192b42

  out = PATH.join( options.canonical_base, out );

Your Environment

• vuepress-plugin-autometa version: v0.1.7