Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webmasterish/vuepress-plugin-autometa
Auto meta tags plugin for VuePress 1.x
https://github.com/webmasterish/vuepress-plugin-autometa
head meta meta-tags page post social social-metas vue vuepress vuepress-plugin
Last synced: 3 months ago
JSON representation
Auto meta tags plugin for VuePress 1.x
- Host: GitHub
- URL: https://github.com/webmasterish/vuepress-plugin-autometa
- Owner: webmasterish
- License: mit
- Created: 2018-12-28T14:02:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-29T22:12:31.000Z (over 2 years ago)
- Last Synced: 2024-07-19T04:37:04.490Z (4 months ago)
- Topics: head, meta, meta-tags, page, post, social, social-metas, vue, vuepress, vuepress-plugin
- Language: JavaScript
- Homepage:
- Size: 33.2 KB
- Stars: 40
- Watchers: 1
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# VuePress Plugin Auto Meta
> Auto meta tags plugin for [VuePress](https://vuepress.vuejs.org/) 1.x
[](https://travis-ci.org/webmasterish/vuepress-plugin-autometa)
[](http://npm.im/vuepress-plugin-autometa)
[](https://greenkeeper.io/)
[](http://opensource.org/licenses/MIT)
## What
This is a Plug-and-Forget VuePress plugin that will auto generate the meta tags
for VuePress pages or posts.
## Install
```sh
$ 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](https://vuepress.vuejs.org/plugin/using-a-plugin.html)
```js
// .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](https://vuepress.vuejs.org/plugin/option-api.html)
### 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](#usage)
2. Individual page/post `frontmatter` as shown in [Examples](#examples)
```js
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
// 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
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>/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
/
```
## Reference
- VuePress official [plugin docs](https://vuepress.vuejs.org/plugin/)
- VuePress official [Front Matter](https://vuepress.vuejs.org/guide/frontmatter.html)
- [HEAD guide](https://github.com/joshbuchea/HEAD)
- [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards)
- [Open Graph protocol](http://ogp.me/)
- [Schema.org](https://schema.org/)
## License
MIT © [webmasterish](https://webmasterish.com)