Skip to content
πŸ”Œ Generate SEO friendly meta header for every page
Branch: master
Clone or download
Latest commit 8140762 Jan 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE πŸ“š Create LICENSE Jan 18, 2019
README.md πŸ“š Document plugin Jan 18, 2019
index.js πŸš‘ Fix defaultOptions overrides Jan 20, 2019
package.json πŸ”– Tag v0.1.2 Jan 20, 2019

README.md

Vuepress Plugin SEO

πŸ”Œ Generate SEO friendly meta header for every page

Installation

npm i vuepress-plugin-seo -D

Usage

plugins: {
    'seo': { /* options */ }
},

Note that Vuepress allows multiple syntaxes to register plugins. See Vuepress documentation on how to use a plugin for more information.

Options

The default options below show you how the relevant data is being retrieved from your vuepress application and its pages. Simply override the function of your choice to define your own logic.

// Options
{
    siteTitle: (_, $site) => $site.title,
    title: $page => $page.title,
    description: $page => $page.frontmatter.description,
    author: (_, $site) => $site.themeConfig.author,
    tags: $page => $page.frontmatter.tags,
    twitterCard: _ => 'summary_large_image',
    type: $page => ['articles', 'posts', 'blog'].some(folder => $page.regularPath.startsWith('/' + folder)) ? 'article' : 'website',
    url: (_, $site, path) => ($site.themeConfig.domain || '') + path,
    image: ($page, $site) => $page.frontmatter.image && (($site.themeConfig.domain || '') + $page.frontmatter.image),
    publishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date),
    modifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated),
}

A few things to note:

  • Each of those functions take three agurments: $page (page configs provided by Vuepress), $site (site configs provided by Vuepress) and path (the built permalink of the page which is different than $page.path in the plugin world).
  • If the return value of any of these options is null or undefined, it will not add the metadata. This avoids having lots of empty meta header in your pages.
  • The author option should be an object with any of the following values: name (the full name of the author) and twitter (the Twitter handle of the author, e.g. @lorismatic).
  • The tags option should be an array.
  • The type should be part of the Open Graph protocol. E.g. article, profile, book, website.
  • Both the url and image options try to use the $site.themeConfig.domain variable as a prefix. If it's not available, it will still work but the links of your meta headers will be relative and not absolute.
  • When defining the image attribute in your frontmatter, you should make sure that its path is already resolved. That means, either storing your SEO images in the public folder or simply copy/pasting the path of a resolved image from the browser, e.g. /assets/img/my_image.8b54ab32.jpg. You cannot use for example image: ./my_image.jpg to reference the image in the current folder. We cannot resolve this path for you at this time because vuepress does not support asset resolution in frontmatter.
  • It can be wise to include a timezone when defining publishedAt in your frontmatter. E.g. date: 2018-06-07 23:46 UTC.
  • The modifiedAt default value will work out-of-the-box if you registers the @vuepress/last-updated plugin before this one.

Finally you can also add your own custom meta headers through the customMeta option:

// Options
{
    //...
    customMeta: (add, context) => {

        const {
            $site, // Site configs provided by Vuepress
            $page, // Page configs provided by Vuepress

            // All the computed options from above:
            siteTitle, title, description, author, tags, 
            twitterCard, type, url, image, publishedAt, modifiedAt,
        } = context

        add('twitter:site', $site.themeConfigs.twitter)
        // -> <meta name="twitter:site" content="@github"></meta>

        add('book:isbn', '9780091929114', 'property')
        // -> <meta property="book:isbn" content="9780091929114"></meta>
    },
}

Note that customMeta defaults to () => {}.

You can’t perform that action at this time.