@mr-hope/vuepress-plugin-seo

Inject <meta> into your webpage to enhance the SEO of your webpage.

# How to use

# Install

npm i -D @mr-hope/vuepress-plugin-seo

yarn add -D @mr-hope/vuepress-plugin-seo

# Usage

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      "@mr-hope/seo",
      {
        // your options
      },
    ],
  ],
};

1
2
3
4
5
6
7
8
9
10
11

# Plugin options

# author

Type: string
Required: No

Default author

# hostname

Type: string
Required: No

Deploy address

# twitterID

Type: string
Required: No

Fill in your twitter username

# restrictions

Type: string
Required: No

The age rating of the content, the format is [int]+, such as '13+'

# seo

Type: (info: PageSeoInfo) => Record<string, string>

The interface types of PageSeoInfo are as follows:

interface PageSeoInfo {
  $page: Page;
  $site: SiteConfig;
  themeConfig: ThemeConfig;
  /** supported languages */
  locales: string[];
  path: string;
}

1
2
3
4
5
6
7
8

You can use this option to inject new or overwrite the default generated SEO, you need to return an object in the format of <property>: <content>.

For example, if you return { 'og:url': 'google.com', 'og:image': 'google.com/logo.jpg' }, the plugin will inject the following into <head> :

<meta property="og:url" content="google.com" />
<meta property="og:image" content="google.com/logo.jpg" />

1
2

# Defaults

The following are the <meta> tags and their values that will be injected into <head> by default:

Property Name	Value
`og:url`	themeConfig.hostname + path
`og:site_name`	$site.title
`og:title`	$page.title
`og:description`	$page.frontmatter.description
`og:type`	`'article'`
`og:image`	themeConfig.hostname + $page.frontmatter.image
`og:updated_time`	$page.lastUpdatedTime
`og:locale`	$page._computed.$ lang
`og:locale:alternate`	other languages included in $themeConfig.locales
`twitter:card`	`'summary_large_image'`
`twitter:image:alt`	$site.title
`article:author`	$page.frontmatter.author \|\| themeConfig.author
`article:tag`	$page.frontmatter.tags \|\| $page.frontmatter.tag
`article:published_time`	$page.frontmatter.time \|\| $page.frontmatter.date
`article:modified_time`	$page.lastUpdatedTime

# customMeta

Type: (meta: Meta, info: PageSeoInfo) => void

You can use this option to inject content directly into Meta. For the format of Meta, please see Frontmatter → Meta (opens new window)

For example:

(meta: Meta, info: PageSeoInfo) => {
  meta.push({ a: "1", b: "2" });
};

1
2
3

Will inject into the current page’s <head> with:

<meta a="1" b="2" />