通常建议在网页中包含 meta 标签，以确保您的内容可以被搜索引擎索引，并在社交媒体上正确显示。
构建钩子
VitePress 的构建钩子使您能够增强网站的功能，例如添加站点地图、PWA 支持和搜索索引。transformHead 构建钩子可用于将页面数据动态添加到页面 head 的中。
配置 VitePress
在本示例中，我们展示了如何使用 transformHead 构建钩子来设置一些 Open Graph meta 标签。不过，它还可以用来设置规范 URL、Twitter meta 标签、文章标签等。
vitepress/config.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
}
})如何使用
VitePress 允许在所有 Markdown 文件中使用 frontmatter，必须位于文件顶部。下面是一个 Markdown 文件示例，它使用 frontmatter 来设置 title 和 description 元数据：
my-awesome-page.md
---
title: 我的精彩页面标题
description: 我的精彩页面描述
---
# 我的精彩页面标题在您添加了示例页面后，运行 vitepress build 命令。以下是输出示例：
my-awesome-page.html
<!DOCTYPE html>
<html>
<head>
...
<meta property="og:title" content="我的精彩页面标题">
<meta property="og:description" content="我的精彩页面描述">
</head>
<body>
这样，您就能为每个页面动态添加 meta 标签，使其在搜索引擎和社交媒体中表现更佳。