在 VitePress 中实现 Open Graph元标签可以通过自定义 <head> 来完成。你可以在项目的 config.js 或 config.ts 文件中，使用 head 配置来加入 Open Graph 标签。这些标签主要用于社交媒体分享时，决定如何展示网页的内容。
以下是一个示例：
// .vitepress/config.js
export default {
head: [
// Open Graph metadata
['meta', { property: 'og:title', content: 'Your Website Title' }],
['meta', { property: 'og:description', content: 'A short description of the content' }],
['meta', { property: 'og:image', content: 'https://example.com/path/to/your-image.jpg' }],
['meta', { property: 'og:url', content: 'https://example.com' }],
['meta', { property: 'og:type', content: 'website' }]
]
}
你可以根据需要调整这些属性的内容：
og:title: 网站或页面的标题og:description: 网站或页面的描述og:image: 页面分享时显示的图片 URLog:url: 网页的 URL 地址og:type: 网页的类型（比如website,article,video等）
如果你希望针对不同页面设置不同的 og 元数据，可以在每个页面的 Markdown 文件中使用 Frontmatter 配置：
---
title: "Page Title"
ogTitle: "Custom OG Title"
ogDescription: "Custom OG Description"
ogImage: "https://example.com/path/to/custom-image.jpg"
ogUrl: "https://example.com/page"
---
# Page Content
然后，在 config.js 中使用条件渲染来实现：
// .vitepress/config.js
export default {
head: (ctx) => {
const frontmatter = ctx.page.frontmatter || {};
return [
['meta', { property: 'og:title', content: frontmatter.ogTitle || 'Default Title' }],
['meta', { property: 'og:description', content: frontmatter.ogDescription || 'Default description' }],
['meta', { property: 'og:image', content: frontmatter.ogImage || 'default-image.jpg' }],
['meta', { property: 'og:url', content: frontmatter.ogUrl || ctx.page.filePathRelative }],
['meta', { property: 'og:type', content: 'website' }]
];
}
}
这样每个页面都可以有自己独立的 Open Graph 元数据，或者使用默认值。
如果要做的更智能一点，可以使用下面方法。
// .vitepress/config.js
import fs from 'fs'
import path from 'path'
export default {
head: (ctx) => {
const { frontmatter, filePathRelative, rawContent } = ctx.page;
// 1. 自动读取 ogTitle
const ogTitle = frontmatter.ogTitle || frontmatter.title || extractH1(rawContent);
// 2. 自动读取 ogDescription
const ogDescription = frontmatter.ogDescription || frontmatter.description || extractDescription(rawContent);
// 3. 自动拼接 ogUrl
const baseUrl = 'https://example.com'; // 这里可以设置为你网站的基本 URL
const ogUrl = `${baseUrl}/${filePathRelative}`;
// 4. 自动读取 ogImage（第一个图片的 URL）
const ogImage = extractFirstImage(rawContent);
return [
['meta', { property: 'og:title', content: ogTitle }],
['meta', { property: 'og:description', content: ogDescription }],
['meta', { property: 'og:image', content: ogImage }],
['meta', { property: 'og:url', content: ogUrl }],
['meta', { property: 'og:type', content: 'website' }]
]
}
}
// 辅助函数：从 Markdown 内容中提取第一个 <h1> 内容
function extractH1(content) {
const match = content.match(/^# (.+)/);
return match ? match[1] : '';
}
// 辅助函数：从 Markdown 内容中提取前200个字符作为描述
function extractDescription(content) {
return content.slice(0, 200); // 截取前200个字符作为描述
}
// 辅助函数：从 Markdown 内容中提取第一个图片的 URL
function extractFirstImage(content) {
const match = content.match(/!\[.*?\]\((.*?)\)/);
return match ? match[1] : ''; // 返回第一个图片 URL
}
说明：
- ogTitle：优先使用
frontmatter.ogTitle，如果不存在，使用frontmatter.title，如果title也不存在，则从 Markdown 内容中提取第一个<h1>标签。 - ogDescription：优先使用
frontmatter.ogDescription，如果不存在，使用frontmatter.description，否则从 Markdown 内容中提取前 200 个字符作为描述。 - ogUrl：自动拼接当前页面的 URL 地址，基于你网站的基础 URL 和文件路径。
- ogImage：从 Markdown 内容中提取第一个图片的 URL（假设图片是使用
格式插入的）。
扩展：
- 你可以调整提取
ogDescription的逻辑，比如通过正则表达式提取更有意义的文本，或处理 HTML 标签。 - 对
ogImage的提取逻辑可以进一步优化，比如获取特定格式的图片或排除某些图片。