Vuepress open graph metadata

config.js

let ogprefix = 'og: http://ogp.me/ns#'
let title = 'Wire Up Your Front-End'
let description = 'Get your personal guide to finally piece together the missing puzzles to communicate with your server'
let color = '#f42525'
let author = 'Martin Muzatko'

module.exports = {
    title,
    description,
    serviceWorker: true,
    head: [
        ['link', { rel: 'icon', href: `/assets/favicon.ico` }],
        ['meta', { name: 'theme-color', content: color }],
        ['meta', { prefix: ogprefix, property: 'og:title', content: title }],
        ['meta', { prefix: ogprefix, property: 'twitter:title', content: title }],
        ['meta', { prefix: ogprefix, property: 'og:type', content: 'article' }],
        ['meta', { prefix: ogprefix, property: 'og:url', content: 'https://wireupyourfrontend.com' }],
        ['meta', { prefix: ogprefix, property: 'og:description', content: description }],
        ['meta', { prefix: ogprefix, property: 'og:image', content: 'https://wireupyourfrontend.com/assets/logo.png' }],
        ['meta', { prefix: ogprefix, property: 'og:article:author', content: author }],
        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
        ['link', { rel: 'apple-touch-icon', href: `/assets/apple-touch-icon.png` }],
        ['link', { rel: 'mask-icon', href: '/assets/safari-pinned-tab.svg', color: color }],
        ['meta', { name: 'msapplication-TileImage', content: '/assets/mstile-150x150.png' }],
        ['meta', { name: 'msapplication-TileColor', content: color }],
    ],

Hey Martin, thanks for this.

BTW, I use helper functions (which you could adapt) to make this stuff neater:

function meta (name, content, props = {}) {
  return ['meta', { name, content, ...props }]
}

function link (rel, href) {
  return ['link', { rel, href }]
}

Is there a way to place meta data on individual pages?