元数据
学习如何为MkSaaS 模板自定义元数据
MkSaaS文档学习如何为MkSaaS 模板自定义元数据
export const websiteConfig: WebsiteConfig = {
metadata: {
theme: {
defaultTheme: 'default',
enableSwitch: true,
},
mode: {
defaultMode: 'dark',
enableSwitch: true,
},
images: {
ogImage: '/og.png',
logoLight: '/logo.png',
logoDark: '/logo-dark.png',
},
social: {
github: 'https://github.com/MkSaaSHQ'
此配置定义：
基本网站元数据（如名称、标题和描述）在翻译文件中定义：
{
"Metadata": {
"name": "MkSaaS",
"title": "MkSaaS - The Best AI SaaS Boilerplate",
"description": "MkSaaS is the best AI SaaS boilerplate. Make AI SaaS in days, simply and effortlessly"
},
// 其他翻译...
}src/lib/metadata.ts 中的 constructMetadata 函数可以为每个页面创建元数据对象：
export function constructMetadata({
title,
description,
canonicalUrl,
image,
noIndex = false,
}: {
title?: string;
此函数处理：
要更改基本网站信息（如名称、标题和描述）：
messages/en.json 文件：{
"Metadata": {
"name": "您的网站名称",
"title": "您的网站标题 - 标语",
"description": "您网站的详细描述，用于 SEO 目的"
}
}对于多语言网站，使用适当的翻译更新每个语言文件：
{
"Metadata": {
"name": "您的网站名称",
"title": "您的网站标题 - 标语",
"description": "您网站的详细描述，用于 SEO 目的"
}
}要更改 Open Graph 图像和Logo：
public 目录中 (如果替换原始文件，则不用更新路径)src/config/website.tsx 中更新路径：metadata: {
// 其他设置...
images: {
ogImage: '/your-og-image.png', // 用于社交分享
logoLight: '/your-logo-light.png', // 明亮模式的Logo
logoDark: '/your-logo-dark.png', // 暗黑模式的Logo
},
}推荐尺寸：
在网站配置中更新您的社交媒体官方账号链接：
metadata: {
// 其他设置...
social: {
github: 'https://github.com/YourUsername',
twitter: 'https://x.com/YourHandle',
discord: 'https://discord.gg/YourInvite',
youtube: 'https://www.youtube.com/@YourChannel',
要替换默认的网站图标和应用图标：
public 目录中 (如果替换原始文件，则不用更新路径)constructMetadata 函数中更新路径：icons: {
icon: '/favicon.ico',
shortcut: '/favicon-32x32.png',
apple: '/apple-touch-icon.png',
},
对于具有多个 URL 或防止重复内容问题的页面，设置规范 URL：
export const
对于您不希望搜索引擎索引的页面：
export const
在您的 MDX 内容页面中 (博客文章、文档等)，您可以在前言中定义元数据：
---
title: 示例博客文章
description: 这是一个带有自定义元数据的示例博客文章
image: /images/blog/example-post.png
---
内容在这里...元数据系统将在渲染页面时自动使用这些值。
对于 React 页面，您可以使用 constructMetadata 函数：
import
对于需要特定 Open Graph 数据的页面：
import { Metadata }
使用 AITDK Chrome 扩展 等工具测试您的社交分享元数据。
现在您了解了如何在 MkSaaS 模板中自定义元数据，探索这些相关主题：
配置网站核心设置