{"id":13832481,"url":"https://github.com/webmasterish/vuepress-plugin-autometa","last_synced_at":"2025-06-22T14:11:17.293Z","repository":{"id":33896715,"uuid":"163416665","full_name":"webmasterish/vuepress-plugin-autometa","owner":"webmasterish","description":"Auto meta tags plugin for VuePress 1.x","archived":false,"fork":false,"pushed_at":"2022-03-29T22:12:31.000Z","size":34,"stargazers_count":40,"open_issues_count":6,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-15T06:09:17.210Z","etag":null,"topics":["head","meta","meta-tags","page","post","social","social-metas","vue","vuepress","vuepress-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webmasterish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-28T14:02:28.000Z","updated_at":"2022-11-27T10:02:52.000Z","dependencies_parsed_at":"2022-08-07T23:30:32.369Z","dependency_job_id":null,"html_url":"https://github.com/webmasterish/vuepress-plugin-autometa","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/webmasterish/vuepress-plugin-autometa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterish%2Fvuepress-plugin-autometa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterish%2Fvuepress-plugin-autometa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterish%2Fvuepress-plugin-autometa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterish%2Fvuepress-plugin-autometa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webmasterish","download_url":"https://codeload.github.com/webmasterish/vuepress-plugin-autometa/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmasterish%2Fvuepress-plugin-autometa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261304266,"owners_count":23138301,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["head","meta","meta-tags","page","post","social","social-metas","vue","vuepress","vuepress-plugin"],"created_at":"2024-08-04T11:00:19.157Z","updated_at":"2025-06-22T14:11:12.277Z","avatar_url":"https://github.com/webmasterish.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Community"],"readme":"# VuePress Plugin Auto Meta\n\n\u003e Auto meta tags plugin for [VuePress](https://vuepress.vuejs.org/) 1.x\n\n[![Build Status](https://img.shields.io/travis/webmasterish/vuepress-plugin-autometa/master.svg?style=flat-square)](https://travis-ci.org/webmasterish/vuepress-plugin-autometa)\n[![npm version](https://img.shields.io/npm/v/vuepress-plugin-autometa.svg?style=flat-square)](http://npm.im/vuepress-plugin-autometa)\n[![Greenkeeper badge](https://badges.greenkeeper.io/webmasterish/vuepress-plugin-autometa.svg?style=flat-square)](https://greenkeeper.io/)\n[![MIT License](https://img.shields.io/npm/l/express.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n\n\n## What\n\nThis is a Plug-and-Forget VuePress plugin that will auto generate the meta tags\nfor VuePress pages or posts.\n\n\n## Install\n\n\n```sh\n$ npm install -D vuepress-plugin-autometa\n\n# or\n\n$ yarn add -D vuepress-plugin-autometa\n```\n\n\n## Usage\n\nAdd `vuepress-plugin-autometa` in your site or theme config file.\n\n\u003e See [official docs on using a plugin](https://vuepress.vuejs.org/plugin/using-a-plugin.html)\n\n\n```js\n// .vuepress/config.js\n// or\n// .vuepress/theme/index.js\n\n// set your global autometa options - override in page frontmatter\nconst autometa_options = {\n  site: {\n    name   : 'Webmasterish',\n    twitter: 'webmasterish',\n  },\n  canonical_base: 'https://webmasterish.com',\n};\n\nmodule.exports = {\n  plugins: [\n    [ 'autometa', autometa_options ]\n  ]\n}\n```\n\n\n## Options\n\n\u003e See Plugin Option API [official docs](https://vuepress.vuejs.org/plugin/option-api.html)\n\n\n### Default options\n\nYou can override default options in 2 ways:\n\n1. Global plugin options set in `.vuepress/config.js` or `.vuepress/theme/index.js`\n   as described in [Usage](#usage)\n2. Individual page/post `frontmatter` as shown in [Examples](#examples)\n\n\n```js\nconst default_options = {\n\n  enable : true, // enables/disables everything - control per page using frontmatter\n  image  : true, // regular meta image used by search engines\n  twitter: true, // twitter card\n  og     : true, // open graph: facebook, pinterest, google+\n  schema : true, // schema.org for google\n\n  // -------------------------------------------------------------------------\n\n  // canonical_base is the canonical url base - best to set once in config.js\n  // if set it will be used to prepend page path and add it to the following:\n  // - twitter:url\n  // - og:url\n  // - canonical link (not yet supported)\n\n  canonical_base: '',\n\n  // @todo\n  //canonical_link: true,\n  //\n  // having only started with vuepress a few days ago,\n  // so far, i couldn't figure out a proper way to extend config head\n  // and add \u003clink rel=\"canonical\" href=\"URL.resolve( canonical_base, $page.path )\"\u003e\n  // feel free to tip-in\n\n  // ---------------------------------------------------------------------------\n\n  author: {\n    name   : '',\n    twitter: '',\n  },\n\n  // ---------------------------------------------------------------------------\n\n  site: {\n    name   : '',\n    twitter: '',\n  },\n\n  // ---------------------------------------------------------------------------\n\n  // order of what gets the highest priority:\n  //\n  // 1. frontmatter\n  // 2. page excerpt\n  // 3. content markdown paragraph\n  // 4. content regular html \u003cp\u003e\n\n  description_sources: [\n\n    'frontmatter',\n    'excerpt',\n\n    // markdown paragraph regex\n    //\n    /^((?:(?!^#)(?!^\\-|\\+)(?!^[0-9]+\\.)(?!^!\\[.*?\\]\\((.*?)\\))(?!^\\[\\[.*?\\]\\])(?!^\\{\\{.*?\\}\\})[^\\n]|\\n(?! *\\n))+)(?:\\n *)+\\n/img,\n    //\n    // this excludes blockquotes using `(?!^\u003e)`\n    ///^((?:(?!^#)(?!^\\-|\\+)(?!^[0-9]+\\.)(?!^!\\[.*?\\]\\((.*?)\\))(?!^\u003e)(?!^\\[\\[.*?\\]\\])(?!^\\{\\{.*?\\}\\})[^\\n]|\\n(?! *\\n))+)(?:\\n *)+\\n/img,\n\n    // html paragraph regex\n    /\u003cp(?:.*?)\u003e(.*?)\u003c\\/p\u003e/i,\n\n  ],\n\n  // ---------------------------------------------------------------------------\n\n  // order of what gets the highest priority:\n  //\n  // 1. frontmatter\n  // 2. content markdown image such as `![alt text](http://url)`\n  // 3. content regular html img\n\n  image_sources: [\n\n    'frontmatter',\n\n    /!\\[.*?\\]\\((.*?)\\)/i,        // markdown image regex\n    /\u003cimg.*?src=['\"](.*?)['\"]/i, // html image regex\n\n  ],\n\n};\n```\n\n\n## Examples\n\n\nAssuming we have this sample `index.md` file\n\n```md\n---\n\ntitle: Plans for the Next Iteration of VuePress\n\ndate: 2018-12-28T15:18:13+0200\n\nautometa:\n  author:\n    name: Evan You\n    twitter: youyuxi\n\ntags:\n  - VuePress\n  - auto meta tags\n  - are cool\n\n---\n\n# {{ $page.title }}\n\n\n## Simplicity First\n\nMinimal setup with markdown-centered project structure\nhelps you focus on writing.\n\n![random image](http://lorempixel.com/640/480)\n\n\n## Vue-Powered\n\nEnjoy the dev experience of Vue + webpack, use Vue components in markdown,\nand develop custom themes with Vue.\n\n\n## Performant\n\nVuePress generates pre-rendered static HTML for each page,\nand runs as an SPA once a page is loaded.\n\n```\n\nThe auto generated metas will be as follows:\n\n```html\n\u003cmeta name=\"description\" content=\"Minimal setup with markdown-centered project structure helps you focus on writing.\"\u003e\n\u003cmeta name=\"image\" content=\"http://lorempixel.com/640/480\"\u003e\n\n\u003cmeta name=\"twitter:title\" content=\"Plans for the Next Iteration of VuePress\"\u003e\n\u003cmeta name=\"twitter:description\" content=\"Minimal setup with markdown-centered project structure helps you focus on writing.\"\u003e\n\u003cmeta name=\"twitter:card\" content=\"summary_large_image\"\u003e\n\u003cmeta name=\"twitter:image\" content=\"http://lorempixel.com/640/480\"\u003e\n\u003cmeta name=\"twitter:url\" content=\"https://webmasterish.com/plans-for-the-next-iteration-of-vuepress/\"\u003e\n\u003cmeta name=\"twitter:creator\" content=\"@youyuxi\"\u003e\n\u003cmeta name=\"twitter:site\" content=\"@webmasterish\"\u003e\n\n\u003cmeta property=\"og:type\" content=\"article\"\u003e\n\u003cmeta property=\"og:title\" content=\"Plans for the Next Iteration of VuePress\"\u003e\n\u003cmeta property=\"og:description\" content=\"Minimal setup with markdown-centered project structure helps you focus on writing.\"\u003e\n\u003cmeta property=\"og:image\" content=\"http://lorempixel.com/640/480\"\u003e\n\u003cmeta property=\"og:url\" content=\"https://webmasterish.com/plans-for-the-next-iteration-of-vuepress/\"\u003e\n\u003cmeta property=\"og:site_name\" content=\"Webmasterish\"\u003e\n\u003cmeta property=\"article:author\" content=\"Evan You\"\u003e\n\u003cmeta property=\"article:published_time\" content=\"2018-12-28T15:18:13+0200\"\u003e\n\u003cmeta property=\"article:tag\" content=\"VuePress\"\u003e\n\u003cmeta property=\"article:tag\" content=\"auto meta tags\"\u003e\n\u003cmeta property=\"article:tag\" content=\"are cool\"\u003e\n\n\u003cmeta itemprop=\"name\" content=\"Plans for the Next Iteration of VuePress\"\u003e\n\u003cmeta itemprop=\"description\" content=\"Minimal setup with markdown-centered project structure helps you focus on writing.\"\u003e\n\u003cmeta itemprop=\"image\" content=\"http://lorempixel.com/640/480\"\u003e\n```\n\n\n## Reference\n\n- VuePress official [plugin docs](https://vuepress.vuejs.org/plugin/)\n- VuePress official [Front Matter](https://vuepress.vuejs.org/guide/frontmatter.html)\n- [HEAD guide](https://github.com/joshbuchea/HEAD)\n- [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards)\n- [Open Graph protocol](http://ogp.me/)\n- [Schema.org](https://schema.org/)\n\n\n## License\n\nMIT © [webmasterish](https://webmasterish.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmasterish%2Fvuepress-plugin-autometa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebmasterish%2Fvuepress-plugin-autometa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmasterish%2Fvuepress-plugin-autometa/lists"}