DEV Community

Paul Laros 🇳🇱
Paul Laros 🇳🇱

Posted on • Originally published at on

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.


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
Enter fullscreen mode Exit fullscreen mode

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:

title: My awesome page title
description: My awesome page description

# My awesome page title
Enter fullscreen mode Exit fullscreen mode

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


<!DOCTYPE html>

    <meta property="og:title" content="My awesome page title">
    <meta property="og:description" content="My awesome page description">
Enter fullscreen mode Exit fullscreen mode


Top comments (0)