元数据 | Mkdirs - 最好的内置 AI 功能的导航站模板

本文档涵盖了您的 MkSaaS 网站中的元数据系统，如何自定义 SEO 相关信息，以及如何配置社交分享元数据以获得最佳 SEO 效果。

核心功能

MkSaaS 模板配备了强大的元数据系统，提供：

SEO 优化的页面标题和描述
社交媒体分享元数据（Open Graph 和 Twitter）
网站图标和应用图标
社交分享的自定义图像支持
元数据的国际化支持

理解元数据系统

MkSaaS 中的元数据系统基于 Next.js 元数据 API 构建，通过几个关键文件进行配置：

1. 集中配置

主要网站配置在 src/config/website.tsx 中定义：

src/config/website.tsx

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',
      twitter: 'https://x.com/mksaascom',
      discord: 'https://mksaas.link/discord',
      youtube: 'https://www.youtube.com/@MkSaaS',
    },
  },
  // 其他配置部分...
};

此配置定义：

默认主题和暗黑模式设置
Logo 和 Open Graph 图像路径
社交媒体链接

2. 翻译文件

基本网站元数据（如名称、标题和描述）在翻译文件中定义：

messages/en.json

{
  "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"
  },
  // 其他翻译...
}

3. 元数据构建

src/lib/metadata.ts 中的 constructMetadata 函数处理为每个页面创建元数据对象：

src/lib/metadata.ts

export function constructMetadata({
  title,
  description,
  canonicalUrl,
  image,
  noIndex = false,
}: {
  title?: string;
  description?: string;
  canonicalUrl?: string;
  image?: string;
  noIndex?: boolean;
} = {}): Metadata {
  title = title || defaultMessages.Metadata.name;
  description = description || defaultMessages.Metadata.description;
  image = image || websiteConfig.metadata.images?.ogImage;
  const ogImageUrl = new URL(`${getBaseUrl()}${image}`);
  return {
    title,
    description,
    alternates: canonicalUrl
      ? {
          canonical: canonicalUrl,
        }
      : undefined,
    openGraph: {
      type: 'website',
      locale: 'en_US',
      url: canonicalUrl,
      title,
      description,
      siteName: title,
      images: [ogImageUrl.toString()],
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [ogImageUrl.toString()],
      site: getBaseUrl(),
    },
    icons: {
      icon: '/favicon.ico',
      shortcut: '/favicon-32x32.png',
      apple: '/apple-touch-icon.png',
    },
    metadataBase: new URL(getBaseUrl()),
    manifest: `${getBaseUrl()}/manifest.webmanifest`,
    ...(noIndex && {
      robots: {
        index: false,
        follow: false,
      },
    }),
  };
}

此函数处理：

从翻译文件的配置中设置元数据的默认值
配置 Open Graph 和 Twitter 卡片元数据
设置网站图标和图标信息
管理规范 URL 和爬虫指令

自定义网站元数据

基本网站信息

要更改基本网站信息（如名称、标题和描述）：

编辑 messages/en.json 文件（如果您使用多语言，还要编辑其他语言文件）：

messages/en.json

{
  "Metadata": {
    "name": "您的网站名称",
    "title": "您的网站标题 - 标语",
    "description": "您网站的详细描述，用于 SEO 目的"
  }
}

对于多语言网站，使用适当的翻译更新每个语言文件：

messages/zh.json

{
  "Metadata": {
    "name": "您的网站名称",
    "title": "您的网站标题 - 标语",
    "description": "您网站的详细描述，用于 SEO 目的"
  }
}

自定义社交图像

要更改 Open Graph 图像和Logo：

将您的图片放在 public 目录中 (如果替换原始文件，则不用更新路径)
如有必要，在 src/config/website.tsx 中更新路径：

src/config/website.tsx

metadata: {
  // 其他设置...
  images: {
    ogImage: '/your-og-image.png',  // 用于社交分享
    logoLight: '/your-logo-light.png',  // 明亮模式的Logo
    logoDark: '/your-logo-dark.png',  // 暗黑模式的Logo
  },
}

推荐尺寸：

OG 图像：1200×630 像素，在社交平台上获得最佳显示效果
Logo：至少 512×512 像素，适用于高分辨率显示

社交媒体链接

在网站配置中更新您的社交媒体链接：

src/config/website.tsx

metadata: {
  // 其他设置...
  social: {
    github: 'https://github.com/YourUsername',
    twitter: 'https://x.com/YourHandle',
    discord: 'https://discord.gg/YourInvite',
    youtube: 'https://www.youtube.com/@YourChannel',
    // 根据需要添加其他社交平台
  },
}

网站图标和应用图标 (Favicon)

要替换默认的网站图标和应用图标：

使用 Real Favicon Generator 等工具生成完整的图标集
将生成的文件放在 public 目录中 (如果替换原始文件，则不用更新路径)
如有必要，在 constructMetadata 函数中更新路径：

src/lib/metadata.ts

icons: {
  icon: '/favicon.ico',
  shortcut: '/favicon-32x32.png',
  apple: '/apple-touch-icon.png',
},

public-images

规范 URL

对于具有多个 URL 或防止重复内容问题的页面，设置规范 URL：

export const metadata = constructMetadata({
  title: '示例页面',
  description: '描述',
  canonicalUrl: 'https://yourdomain.com/preferred-path',
});

无索引页面

对于您不希望搜索引擎索引的页面：

export const metadata = constructMetadata({
  title: '私人页面',
  description: '此页面不适用于搜索引擎',
  noIndex: true,
});

为了获得完整的 PWA 体验，还要更新 public 目录中的 manifest.webmanifest 文件。

页面特定元数据

向 MDX 页面添加元数据

在您的 MDX 内容页面中 (博客文章、文档等)，您可以在前言中定义元数据：

content/blog/example-post.mdx

---
title: 示例博客文章
description: 这是一个带有自定义元数据的示例博客文章
image: /images/blog/example-post.png
---

内容在这里...

元数据系统将在渲染页面时自动使用这些值。

程序化元数据

对于 React 页面，您可以使用 constructMetadata 函数：

src/app/[locale]/example/page.tsx

import { constructMetadata } from '@/lib/metadata';

export const metadata = constructMetadata({
  title: '示例页面',
  description: '这是一个带有自定义元数据的示例页面',
  image: '/images/example-page.png',
});

自定义 Open Graph 数据

对于需要特定 Open Graph 数据的页面：

import { Metadata } from 'next';
import { constructMetadata } from '@/lib/metadata';

export const metadata: Metadata = {
  ...constructMetadata({
    title: '自定义页面',
    description: '描述',
  }),
  openGraph: {
    type: 'article',
    publishedTime: '2023-01-01T00:00:00.000Z',
    authors: ['作者姓名'],
    // 其他文章特定字段
  },
};

测试社交分享

使用 AITDK Chrome 扩展等工具测试您的社交分享元数据。

AITDK

最佳实践

保持标题简洁：目标是标题少于 60 个字符，以在搜索结果中获得最佳显示
描述性元描述：编写 150-160 个字符的引人注目的描述
独特内容：确保每个页面都有独特的标题和描述
使用高质量图像：为 OG 和 Twitter 卡片创建专业、相关的图像
包含关键词：在标题和描述中自然地包含相关关键词
持续更新：保持元数据与您的内容更改同步
移动优化：确保您的元数据在移动设备上看起来良好
特定语言内容：为国际内容使用适当的语言标签

视频教程

下一步

现在您了解了如何在 MkSaaS 中自定义元数据，探索这些相关主题：

主题

配置主题和外观设置

图像

配置网站各种图片

国际化

配置多语言功能

网站配置

配置网站核心设置

本文档涵盖了您的 MkSaaS 网站中的元数据系统，如何自定义 SEO 相关信息，以及如何配置社交分享元数据以获得最佳 SEO 效果。

核心功能

MkSaaS 模板配备了强大的元数据系统，提供：

SEO 优化的页面标题和描述
社交媒体分享元数据（Open Graph 和 Twitter）
网站图标和应用图标
社交分享的自定义图像支持
元数据的国际化支持

理解元数据系统

MkSaaS 中的元数据系统基于 Next.js 元数据 API 构建，通过几个关键文件进行配置：

1. 集中配置

主要网站配置在 src/config/website.tsx 中定义：

src/config/website.tsx

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',
      twitter: 'https://x.com/mksaascom',
      discord: 'https://mksaas.link/discord',
      youtube: 'https://www.youtube.com/@MkSaaS',
    },
  },
  // 其他配置部分...
};

此配置定义：

默认主题和暗黑模式设置
Logo 和 Open Graph 图像路径
社交媒体链接

2. 翻译文件

基本网站元数据（如名称、标题和描述）在翻译文件中定义：

messages/en.json

{
  "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"
  },
  // 其他翻译...
}

3. 元数据构建

src/lib/metadata.ts 中的 constructMetadata 函数处理为每个页面创建元数据对象：

src/lib/metadata.ts

export function constructMetadata({
  title,
  description,
  canonicalUrl,
  image,
  noIndex = false,
}: {
  title?: string;
  description?: string;
  canonicalUrl?: string;
  image?: string;
  noIndex?: boolean;
} = {}): Metadata {
  title = title || defaultMessages.Metadata.name;
  description = description || defaultMessages.Metadata.description;
  image = image || websiteConfig.metadata.images?.ogImage;
  const ogImageUrl = new URL(`${getBaseUrl()}${image}`);
  return {
    title,
    description,
    alternates: canonicalUrl
      ? {
          canonical: canonicalUrl,
        }
      : undefined,
    openGraph: {
      type: 'website',
      locale: 'en_US',
      url: canonicalUrl,
      title,
      description,
      siteName: title,
      images: [ogImageUrl.toString()],
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [ogImageUrl.toString()],
      site: getBaseUrl(),
    },
    icons: {
      icon: '/favicon.ico',
      shortcut: '/favicon-32x32.png',
      apple: '/apple-touch-icon.png',
    },
    metadataBase: new URL(getBaseUrl()),
    manifest: `${getBaseUrl()}/manifest.webmanifest`,
    ...(noIndex && {
      robots: {
        index: false,
        follow: false,
      },
    }),
  };
}

此函数处理：

从翻译文件的配置中设置元数据的默认值
配置 Open Graph 和 Twitter 卡片元数据
设置网站图标和图标信息
管理规范 URL 和爬虫指令

自定义网站元数据

基本网站信息

要更改基本网站信息（如名称、标题和描述）：

编辑 messages/en.json 文件（如果您使用多语言，还要编辑其他语言文件）：

messages/en.json

{
  "Metadata": {
    "name": "您的网站名称",
    "title": "您的网站标题 - 标语",
    "description": "您网站的详细描述，用于 SEO 目的"
  }
}

对于多语言网站，使用适当的翻译更新每个语言文件：

messages/zh.json

{
  "Metadata": {
    "name": "您的网站名称",
    "title": "您的网站标题 - 标语",
    "description": "您网站的详细描述，用于 SEO 目的"
  }
}

自定义社交图像

要更改 Open Graph 图像和Logo：

将您的图片放在 public 目录中 (如果替换原始文件，则不用更新路径)
如有必要，在 src/config/website.tsx 中更新路径：

src/config/website.tsx

metadata: {
  // 其他设置...
  images: {
    ogImage: '/your-og-image.png',  // 用于社交分享
    logoLight: '/your-logo-light.png',  // 明亮模式的Logo
    logoDark: '/your-logo-dark.png',  // 暗黑模式的Logo
  },
}

推荐尺寸：

OG 图像：1200×630 像素，在社交平台上获得最佳显示效果
Logo：至少 512×512 像素，适用于高分辨率显示

社交媒体链接

在网站配置中更新您的社交媒体链接：

src/config/website.tsx

metadata: {
  // 其他设置...
  social: {
    github: 'https://github.com/YourUsername',
    twitter: 'https://x.com/YourHandle',
    discord: 'https://discord.gg/YourInvite',
    youtube: 'https://www.youtube.com/@YourChannel',
    // 根据需要添加其他社交平台
  },
}

网站图标和应用图标 (Favicon)

要替换默认的网站图标和应用图标：

使用 Real Favicon Generator 等工具生成完整的图标集
将生成的文件放在 public 目录中 (如果替换原始文件，则不用更新路径)
如有必要，在 constructMetadata 函数中更新路径：

src/lib/metadata.ts

icons: {
  icon: '/favicon.ico',
  shortcut: '/favicon-32x32.png',
  apple: '/apple-touch-icon.png',
},

public-images

规范 URL

对于具有多个 URL 或防止重复内容问题的页面，设置规范 URL：

export const metadata = constructMetadata({
  title: '示例页面',
  description: '描述',
  canonicalUrl: 'https://yourdomain.com/preferred-path',
});

无索引页面

对于您不希望搜索引擎索引的页面：

export const metadata = constructMetadata({
  title: '私人页面',
  description: '此页面不适用于搜索引擎',
  noIndex: true,
});

为了获得完整的 PWA 体验，还要更新 public 目录中的 manifest.webmanifest 文件。

页面特定元数据

向 MDX 页面添加元数据

在您的 MDX 内容页面中 (博客文章、文档等)，您可以在前言中定义元数据：

content/blog/example-post.mdx

---
title: 示例博客文章
description: 这是一个带有自定义元数据的示例博客文章
image: /images/blog/example-post.png
---

内容在这里...

元数据系统将在渲染页面时自动使用这些值。

程序化元数据

对于 React 页面，您可以使用 constructMetadata 函数：

src/app/[locale]/example/page.tsx

import { constructMetadata } from '@/lib/metadata';

export const metadata = constructMetadata({
  title: '示例页面',
  description: '这是一个带有自定义元数据的示例页面',
  image: '/images/example-page.png',
});

自定义 Open Graph 数据

对于需要特定 Open Graph 数据的页面：

import { Metadata } from 'next';
import { constructMetadata } from '@/lib/metadata';

export const metadata: Metadata = {
  ...constructMetadata({
    title: '自定义页面',
    description: '描述',
  }),
  openGraph: {
    type: 'article',
    publishedTime: '2023-01-01T00:00:00.000Z',
    authors: ['作者姓名'],
    // 其他文章特定字段
  },
};

测试社交分享

使用 AITDK Chrome 扩展等工具测试您的社交分享元数据。

AITDK

最佳实践

保持标题简洁：目标是标题少于 60 个字符，以在搜索结果中获得最佳显示
描述性元描述：编写 150-160 个字符的引人注目的描述
独特内容：确保每个页面都有独特的标题和描述
使用高质量图像：为 OG 和 Twitter 卡片创建专业、相关的图像
包含关键词：在标题和描述中自然地包含相关关键词
持续更新：保持元数据与您的内容更改同步
移动优化：确保您的元数据在移动设备上看起来良好
特定语言内容：为国际内容使用适当的语言标签

视频教程

下一步

现在您了解了如何在 MkSaaS 中自定义元数据，探索这些相关主题：

主题

配置主题和外观设置

图像

配置网站各种图片

国际化

配置多语言功能

网站配置

配置网站核心设置