All Projects → webmasterish → vuepress-plugin-autometa

webmasterish / vuepress-plugin-autometa

Licence: MIT license
Auto meta tags plugin for VuePress 1.x

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to vuepress-plugin-autometa

Head
A simple guide to HTML <head> elements
Stars: ✭ 28,892 (+72130%)
Mutual labels:  meta-tags, head
Ngx Meta
Dynamic page title & meta tags utility for Angular (w/server-side rendering)
Stars: ✭ 331 (+727.5%)
Mutual labels:  meta, meta-tags
oge
Page metadata as a service
Stars: ✭ 22 (-45%)
Mutual labels:  meta, page
vuepress-creator
A lightweight creator for VuePress project.
Stars: ✭ 23 (-42.5%)
Mutual labels:  vuepress, vuepress-plugin
vuepress-plugin-svg-icons
🔥 SVG sprite plugin for VuePress
Stars: ✭ 17 (-57.5%)
Mutual labels:  vuepress, vuepress-plugin
vuepress-plugin-demo-code
📝 Demo and code plugin for vuepress
Stars: ✭ 119 (+197.5%)
Mutual labels:  vuepress, vuepress-plugin
Toolbelt.Blazor.HeadElement
Head element support (change the document title, "meta" elements such as OGP, and "link" elements) for Blazor apps.
Stars: ✭ 137 (+242.5%)
Mutual labels:  meta, head
vuepress-pass
VuePress authentication plugin
Stars: ✭ 13 (-67.5%)
Mutual labels:  vuepress, vuepress-plugin
Fusebox Angular Universal Starter
Angular Universal seed project featuring Server-Side Rendering, @fuse-box bundling, material, firebase, Jest, Nightmare, and more
Stars: ✭ 132 (+230%)
Mutual labels:  social, meta-tags
Laravelmetatags
The most powerful and extendable tools for managing SEO Meta Tags in your Laravel project
Stars: ✭ 226 (+465%)
Mutual labels:  meta, meta-tags
vuepress-plugin-feed
RSS, Atom, and JSON feeds generator plugin for VuePress 1.x
Stars: ✭ 46 (+15%)
Mutual labels:  vuepress, vuepress-plugin
Awesome-meta-tags
📙 Awesome collection of meta tags
Stars: ✭ 18 (-55%)
Mutual labels:  meta, meta-tags
laravel-assets
Laravel Assets manager
Stars: ✭ 13 (-67.5%)
Mutual labels:  meta, meta-tags
Magento 2 Seo
Magento 2 SEO extension will do perfectly for your better SEO. This is a bundle of outstanding features that are auto-active when you install it from Mageplaza without any code modifications. It is also friendly with your store if you need to insert meta keywords and meta descriptions for your product.
Stars: ✭ 99 (+147.5%)
Mutual labels:  meta, meta-tags
laravel-meta
💥 Render meta tags within your Laravel application
Stars: ✭ 36 (-10%)
Mutual labels:  meta, meta-tags
vuepress-plugin-run
vuepress 在线运行 Vue 单文件
Stars: ✭ 28 (-30%)
Mutual labels:  vuepress, vuepress-plugin
go-coronanet
Go implementation of the Corona Network
Stars: ✭ 35 (-12.5%)
Mutual labels:  social
protocol
This repo contains the Spacemesh protocol specifications and related documentation
Stars: ✭ 29 (-27.5%)
Mutual labels:  post
developer-docs
developers.komodoplatform.com
Stars: ✭ 24 (-40%)
Mutual labels:  vuepress
vuepress-theme-aurora
🔥Aurora是一款基于Vuepress2的博客主题,将本地Markdown文件解析成静态html页面,作为博客文章。搭配说说,时间轴,文章分类,评论,友情链接,相册,音乐播放器等特色功能,给您不一样的使用体验。
Stars: ✭ 225 (+462.5%)
Mutual labels:  vuepress

VuePress Plugin Auto Meta

Auto meta tags plugin for VuePress 1.x

Build Status npm version Greenkeeper badge MIT License

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

License

MIT © webmasterish

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].