Metadata

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.

Core Features

The MkSaaS template comes with a robust metadata system that provides:

SEO-optimized page titles and descriptions
Social media sharing metadata (Open Graph and Twitter)
Favicon and app icons
Custom image support for social sharing
Internationalization support for metadata

Understanding the Metadata System

The metadata system in MkSaaS is built on Next.js metadata API and is configured through several key files:

1. Centralized Configuration

The main website configuration is defined in 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',
    },
  },
  // Other configuration sections...
};

This configuration defines:

Default theme and dark mode settings
Logo and Open Graph image paths
Social media links

2. Translation Files

The basic website metadata such as name, title, and description are defined in the translation files:

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"
  },
  // Other translations...
}

3. Metadata Construction

The constructMetadata function in src/lib/metadata.ts handles creating the metadata object for each page:

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,
      },
    }),
  };
}

This function handles:

Setting default values from translations
Configuring Open Graph and Twitter card metadata
Setting up favicon and icon information
Managing canonical URLs and robots directives

Customizing Website Metadata

Basic Website Information

To change the basic website information like name, title, and description:

Edit the messages/en.json file (and other language files if you're using them):

messages/en.json

{
  "Metadata": {
    "name": "Your Website Name",
    "title": "Your Website Title - Tagline",
    "description": "A detailed description of your website for SEO purposes"
  }
}

For multilingual sites, update each language file with appropriate translations:

messages/zh.json

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

To change the Open Graph image and logos:

Place your image files in the public directory
Update the paths in src/config/website.tsx:

src/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 dimensions:

OG Image: 1200×630 pixels for optimal display on social platforms
Logo: At least 512×512 pixels for high-resolution displays

Update your social media links in the website configuration:

src/config/website.tsx

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',
    // Add other social platforms as needed
  },
}

Favicons and App Icons

To replace the default favicons and app icons:

Generate a complete set of icons using a tool like Real Favicon Generator
Place the generated files in the public directory
Update the paths in the constructMetadata function if necessary:

src/lib/metadata.ts

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

public-images

Canonical URLs

For pages with multiple URLs or to prevent duplicate content issues, set canonical URLs:

export const metadata = constructMetadata({
  title: 'Example Page',
  description: 'Description',
  canonicalUrl: 'https://yourdomain.com/preferred-path',
});

No-Index Pages

For pages you don't want indexed by search engines:

export const metadata = constructMetadata({
  title: 'Private Page',
  description: 'This page is not for search engines',
  noIndex: true,
});

For a complete PWA experience, also update the manifest.webmanifest file in the public directory.

Page-Specific Metadata

Adding Metadata to MDX Pages

In your MDX content pages (blog posts, docs, etc.), you can define metadata in the frontmatter:

content/blog/example-post.mdx

---
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.

Programmatic Metadata

For React pages, you can use the constructMetadata function:

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

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

export const metadata = constructMetadata({
  title: 'Example Page',
  description: 'This is an example page with custom metadata',
  image: '/images/example-page.png',
});

Custom Open Graph Data

For pages that need specific Open Graph data:

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

export const metadata: Metadata = {
  ...constructMetadata({
    title: 'Custom Page',
    description: 'Description',
  }),
  openGraph: {
    type: 'article',
    publishedTime: '2023-01-01T00:00:00.000Z',
    authors: ['Author Name'],
    // Other article-specific fields
  },
};

Use tools like AITDK Chrome Extension to test your social sharing metadata.

AITDK

Best Practices

Keep Titles Concise: Aim for titles under 60 characters for optimal display in search results
Descriptive Meta Descriptions: Write compelling descriptions of 150-160 characters
Unique Content: Ensure each page has unique title and description
Use High-Quality Images: Create professional, relevant images for OG and Twitter cards
Include Keywords: Incorporate relevant keywords naturally in titles and descriptions
Update Consistently: Keep metadata current with your content changes
Mobile Optimization: Ensure your metadata looks good on mobile devices
Language-Specific Content: Use appropriate language tags for international content

Video Tutorial

Next Steps

Now that you understand how to customize metadata in MkSaaS, explore these related topics:

Themes

Configure theme and appearance settings

Images

Configure images in your website

Internationalization

Configure multi-language support

Website Configuration

Configure website settings

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.

Core Features

The MkSaaS template comes with a robust metadata system that provides:

SEO-optimized page titles and descriptions
Social media sharing metadata (Open Graph and Twitter)
Favicon and app icons
Custom image support for social sharing
Internationalization support for metadata

Understanding the Metadata System

The metadata system in MkSaaS is built on Next.js metadata API and is configured through several key files:

1. Centralized Configuration

The main website configuration is defined in 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',
    },
  },
  // Other configuration sections...
};

This configuration defines:

Default theme and dark mode settings
Logo and Open Graph image paths
Social media links

2. Translation Files

The basic website metadata such as name, title, and description are defined in the translation files:

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"
  },
  // Other translations...
}

3. Metadata Construction

The constructMetadata function in src/lib/metadata.ts handles creating the metadata object for each page:

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,
      },
    }),
  };
}

This function handles:

Setting default values from translations
Configuring Open Graph and Twitter card metadata
Setting up favicon and icon information
Managing canonical URLs and robots directives

Customizing Website Metadata

Basic Website Information

To change the basic website information like name, title, and description:

Edit the messages/en.json file (and other language files if you're using them):

messages/en.json

{
  "Metadata": {
    "name": "Your Website Name",
    "title": "Your Website Title - Tagline",
    "description": "A detailed description of your website for SEO purposes"
  }
}

For multilingual sites, update each language file with appropriate translations:

messages/zh.json

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

To change the Open Graph image and logos:

Place your image files in the public directory
Update the paths in src/config/website.tsx:

src/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 dimensions:

OG Image: 1200×630 pixels for optimal display on social platforms
Logo: At least 512×512 pixels for high-resolution displays

Update your social media links in the website configuration:

src/config/website.tsx

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',
    // Add other social platforms as needed
  },
}

Favicons and App Icons

To replace the default favicons and app icons:

Generate a complete set of icons using a tool like Real Favicon Generator
Place the generated files in the public directory
Update the paths in the constructMetadata function if necessary:

src/lib/metadata.ts

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

public-images

Canonical URLs

For pages with multiple URLs or to prevent duplicate content issues, set canonical URLs:

export const metadata = constructMetadata({
  title: 'Example Page',
  description: 'Description',
  canonicalUrl: 'https://yourdomain.com/preferred-path',
});

No-Index Pages

For pages you don't want indexed by search engines:

export const metadata = constructMetadata({
  title: 'Private Page',
  description: 'This page is not for search engines',
  noIndex: true,
});

For a complete PWA experience, also update the manifest.webmanifest file in the public directory.

Page-Specific Metadata

Adding Metadata to MDX Pages

In your MDX content pages (blog posts, docs, etc.), you can define metadata in the frontmatter:

content/blog/example-post.mdx

---
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.

Programmatic Metadata

For React pages, you can use the constructMetadata function:

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

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

export const metadata = constructMetadata({
  title: 'Example Page',
  description: 'This is an example page with custom metadata',
  image: '/images/example-page.png',
});

Custom Open Graph Data

For pages that need specific Open Graph data:

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

export const metadata: Metadata = {
  ...constructMetadata({
    title: 'Custom Page',
    description: 'Description',
  }),
  openGraph: {
    type: 'article',
    publishedTime: '2023-01-01T00:00:00.000Z',
    authors: ['Author Name'],
    // Other article-specific fields
  },
};

Use tools like AITDK Chrome Extension to test your social sharing metadata.

AITDK

Best Practices

Keep Titles Concise: Aim for titles under 60 characters for optimal display in search results
Descriptive Meta Descriptions: Write compelling descriptions of 150-160 characters
Unique Content: Ensure each page has unique title and description
Use High-Quality Images: Create professional, relevant images for OG and Twitter cards
Include Keywords: Incorporate relevant keywords naturally in titles and descriptions
Update Consistently: Keep metadata current with your content changes
Mobile Optimization: Ensure your metadata looks good on mobile devices
Language-Specific Content: Use appropriate language tags for international content

Themes

Images

Internationalization

Website Configuration

Table of Contents

Metadata

Themes

Images

Internationalization

Website Configuration

Table of Contents