元数据

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

核心功能

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

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

理解元数据系统

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

1. 网站配置

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

src/config/website.tsx

export const websiteConfig: WebsiteConfig = {
  metadata: {
    mode: {
      defaultMode: 'dark',
      enableSwitch: true,
    },
    images: {
      ogImage: '/og.png',
      logoLight: '/logo.png',
      logoDark: '/logo-dark.png',
    },
    social: {
      github: 'https://github.com/LandingMoreHQ',
      twitter: 'https://x.com/LandingMorecom',
      discord: 'https://LandingMore.link/discord',
      youtube: 'https://www.youtube.com/@LandingMore',
    },
  },
  // 其他配置部分...
};

此配置定义：

默认主题和暗黑模式设置
Logo 和 Open Graph 图像路径
社交平台的官方账号链接

2. 翻译文件

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

messages/en.json

{
  "Metadata": {
    "name": "LandingMore",
    "title": "LandingMore - The Best AI SaaS Boilerplate",
    "description": "LandingMore 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,
  image,
  noIndex = false,
  locale,
  pathname,
}: {
  title?: string;
  description?: string;
  image?: string;
  noIndex?: boolean;
  locale?: Locale;
  pathname?: string;
} = {}): Metadata {
  title = title || defaultMessages.Metadata.title;
  description = description || defaultMessages.Metadata.description;
  image = image || websiteConfig.metadata.images?.ogImage;
  const ogImageUrl = getImageUrl(image || '');
 
  // Generate canonical URL from pathname and locale
  const canonicalUrl = locale
    ? getUrlWithLocale(pathname || '', locale).replace(/\/$/, '')
    : undefined;
 
  // Generate hreflang alternates if pathname is provided and we have multiple locales
  const alternates =
    pathname && routing.locales.length > 1
      ? {
          canonical: canonicalUrl,
          ...generateAlternates(pathname),
        }
      : canonicalUrl
        ? { canonical: canonicalUrl }
        : undefined;
 
  return {
    title,
    description,
    alternates,
    openGraph: {
      type: 'website',
      locale: locale ? getCurrentHreflang(locale).replace('-', '_') : 'en_US',
      url: canonicalUrl,
      title,
      description,
      siteName: defaultMessages.Metadata.name,
      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',
},

规范 URL

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

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

无索引页面

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

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

页面特定元数据

向 MDX 页面添加元数据

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

content/blog/example-post.mdx

---
title: 示例博客文章
description: 这是一个带有自定义元数据的示例博客文章
---
 
内容在这里...

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

程序化元数据

对于其他的功能性页面，您可以使用 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: ['作者姓名'],
    // 其他文章特定字段
  },
};