LogoMkSaaS Docs

Metadata

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.

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://discord.gg/yVwpEtTT',
      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:

  1. 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 目的"
  }
}

Customizing Social Images

To change the Open Graph image and logos:

  1. Place your image files in the public directory
  2. 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:

  1. Generate a complete set of icons using a tool like Real Favicon Generator
  2. Place the generated files in the public directory
  3. 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',
},

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

Test Social Sharing

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

Next Steps

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

Themes

Configure theme and appearance settings

Images

Work with images in your MkSaaS website

Internationalization

Configure multi-language support

Website Configuration

Configure core settings for the website

Notification

Learn how to set up and use notifications in MkSaaS

Fonts

Learn how to customize the fonts in your MkSaaS website