Learn how to customize metadata for your MkSaaS website
This guide covers the metadata system in your MkSaaS website, how to customize SEO-related information, and how to configure social sharing metadata for optimal visibility.
The MkSaaS template comes with a robust metadata system that provides:
The metadata system in MkSaaS is built on Next.js metadata API and is configured through several key files:
The main website configuration is defined in src/config/website.tsx:
MkSaaS Docsexport const websiteConfig: WebsiteConfig = {
metadata: {
theme: {
defaultTheme: 'default',
enableSwitch: true,
},
mode: {
defaultMode: 'dark',
enableSwitch:
This configuration defines:
The basic website metadata such as name, title, and description are defined in the translation files:
{
"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"
},
// Other translations...
}The constructMetadata function in src/lib/metadata.ts can create the metadata object for each page:
export function constructMetadata({
title,
description,
canonicalUrl,
image,
noIndex = false,
}: {
title?: string;
This function handles:
To change the basic website information like name, title, and description:
messages/en.json file:{
"Metadata": {
"name": "Your Website Name",
"title": "Your Website Title - Tagline",
"description": "A detailed description of your website for SEO purposes"
}
}For multilingual websites, update each language file with appropriate translations:
{
"Metadata": {
"name": "您的网站名称",
"title": "您的网站标题 - 标语",
"description": "您网站的详细描述，用于 SEO 目的"
}
}To change the Open Graph image and logos:
public directorysrc/config/website.tsx:metadata: {
// Other settings...
images: {
ogImage: '/your-og-image.png', // Used for social sharing
logoLight: '/your-logo-light.png', // Logo for light mode
logoDark: '/your-logo-dark.png', // Logo for dark mode
},
Recommended sizes:
Update your social media official account links in the website configuration:
metadata: {
// Other settings...
social: {
github: 'https://github.com/YourUsername',
twitter: 'https://x.com/YourHandle',
discord: 'https://discord.gg/YourInvite',
youtube: 'https://www.youtube.com/@YourChannel',
To replace the default favicons and app icons:
public directoryconstructMetadata function if necessary:icons: {
icon: '/favicon.ico',
shortcut: '/favicon-32x32.png',
apple: '/apple-touch-icon.png',
},
For pages with multiple URLs or to prevent duplicate content issues, set canonical URLs:
export const
For pages you don't want indexed by search engines:
export const
In your MDX content pages (blog posts, docs, etc.), you can define metadata in the frontmatter:
---
title: Example Blog Post
description: This is an example blog post with custom metadata
image: /images/blog/example-post.png
---
Content goes here...The metadata system will automatically use these values when rendering the page.
For React pages, you can use the constructMetadata function:
import
For pages that need specific Open Graph data:
import { Metadata }
Use tools like AITDK Chrome Extension to test your social sharing metadata.
Now that you understand how to customize metadata in MkSaaS, explore these related topics:
Configure website settings