Paul Laros

Appearance

Adding dynamic meta tags to VitePress ​

It is generally recommended to include meta tags on your webpage to ensure that your content can be indexed by search engines and is displayed correctly when shared on social media.

Build Hooks ​

VitePress build hooks enable you to enhance the functionality of your website, such as adding sitemaps, PWA support, and search indexing. The transformHead build hook can be used to add page data dynamically to the <head> of the page.

Configuring VitePress ​

In this example we demonstrate how to set some of the Open Graph meta tags using the transformHead build hook. However, it can also be used to set the canonical URL, Twitter meta tags, article tags, and more.

.vitepress/config.ts

ts
import { defineConfig, HeadConfig } from 'vitepress'

export default defineConfig({
  transformHead: ({ pageData }) => {
    const head: HeadConfig[] = []

    head.push(['meta', { property: 'og:title', content: pageData.frontmatter.title }])
    head.push(['meta', { property: 'og:description', content: pageData.frontmatter.description }])
    
    return head
  }
})

How to use ​

VitePress allows frontmatter in all Markdown files, which must be at the top of the file. Here is an example of a markdown file, which utilizes frontmatter to set the title and description metadata:

my-awesome-page.md

md
---
title: My awesome page title
description: My awesome page description
---

# My awesome page title

One you have added the example page, run the vitepress build command. Here is an example of what the output should look like:

my-awesome-page.html

html
<!DOCTYPE html>
<html>
  <head>
    ...
    
    <meta property="og:title" content="My awesome page title">
    <meta property="og:description" content="My awesome page description">
  </head>
  <body>
    ...
  </body>
</html>

Resources ​