SEO：主站级 Metadata 配置

在 Next.js（App Router）中，metadata 是 SEO 的核心入口之一, 为整个站点提供统一的搜索引擎基础信息。

为什么 Metadata 很重要？

搜索引擎和社交平台主要依赖这些信息来理解你的网站：

• 页面标题（title）
• 页面描述（description）
• 站点地址（canonical）
• 社交分享信息（Open Graph / Twitter）
• favicon / icons

1. 基础 Metadata 配置

在 app/layout.tsx 中：

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://raytonx.com"),

  title: {
    default: "RaytonX Learn - 开发者技术指南",
    template: "%s | RaytonX Learn",
  },

  description:
    "RaytonX Learn xxx。",

  keywords: [
    "Next.js",
    "Supabase",
    "NestJS",
    "全栈开发",
    "远程工作",
    "编程教程",
  ],

  robots: {
    index: true,
    follow: true,
  },
};

2. metadataBase（非常关键）

Next.js 的 metadataBase 用来把 metadata 里的相对路径自动补全为绝对 URL，影响 canonical / og:image / link 等

metadataBase: new URL("https://raytonx.com"),

// 例如 images: [{ url: "/og-image.jpg" }]
// 最终会变成：https://raytonx.com/og-image.jpg

3. Open Graph（社交分享）

用于 Facebook / WhatsApp / LinkedIn 等平台预览

openGraph: {
  type: "website",
  locale: "zh_CN",
  siteName: "RaytonX Learn",
  url: "https://raytonx.com",
  title: "RaytonX Learn - 开发者技术指南",
  description:
    "分享真实项目中的工程实践，帮助开发者构建现代技术体系",
  images: [
    {
      url: "/og-image.jpg",
      width: 1200,
      height: 630,
    },
  ],
},

4. Twitter Card

twitter: {
  card: "summary_large_image",
  title: "RaytonX Learn",
  description: "开发者技术实践与工程经验分享",
  images: ["/og-image.jpg"],
},

5. Favicon / Icons

icons: {
  icon: "/favicon.ico",
  shortcut: "/favicon-16x16.png",
  apple: "/apple-touch-icon.png",
},

6. canonical（避免重复收录）

如何避免重复收录？

搜索引擎发现多条 URL 指向相同内容时，会尝试挑一个“代表页”。 如果你主动声明 canonical，等于是在告诉 Google：请优先把这个地址当成主版本。 但要注意，Google 也明确说了，canonical 是“strong hint”，不是绝对命令；它通常会参考，但不保证 100% 按你指定的来。 所以还需要在构建时，特别是动态路由，将所有页面都指向同一个 canonical。

alternates: {
  canonical: "https://raytonx.com",
},