Configure SEO Metadata for The Living Index Homepage

Update the title, description, Open Graph tags, and Twitter card metadata in app/layout.tsx before deploying The Living Index to your custom domain.

在把 The Living Index 部署到自定义域名之前，你需要更新站点的 SEO 元数据，让搜索引擎、社交平台和浏览器标签页正确展示你的主页信息。所有元数据集中在一个文件中管理。

Before deploying The Living Index to a custom domain, update the site’s SEO metadata so search engines, social platforms, and browser tabs display your homepage correctly. All metadata is managed in a single file.

---

编辑元数据 / Edit Your Metadata

需要编辑的文件 / File to Edit

app/layout.tsx

需要更新的字段 / Fields to Update

打开 app/layout.tsx，找到 metadata 导出对象，更新以下字段：

Open app/layout.tsx, locate the metadata export object, and update these fields:

字段 / Field	说明 / Description
title	浏览器标签和搜索结果中显示的页面标题 / Page title shown in browser tabs and search results
description	搜索引擎摘要，建议 130–155 字符 / Search engine snippet, recommended 130–155 characters
keywords	以数组形式列出的关键词 / Comma-separated keywords as an array
openGraph.title	分享到社交平台时显示的标题 / Title shown when sharing to social platforms
openGraph.description	分享卡片中的描述文字 / Description shown in social sharing cards
twitter.title	Twitter/X 分享卡片标题 / Title for Twitter/X sharing cards
twitter.description	Twitter/X 分享卡片描述 / Description for Twitter/X sharing cards

元数据结构示例 / Example Metadata Structure

以下是基于 Next.js App Router 规范的完整示例，直接替换各字段的占位值即可：

The following is a complete example based on the Next.js App Router pattern. Replace the placeholder values with your own:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Your Name | Personal Homepage",
  description: "A brief description of who you are and what you do.",
  keywords: ["your", "keywords", "here"],
  openGraph: {
    title: "Your Name",
    description: "A brief description for social sharing.",
  },
  twitter: {
    title: "Your Name",
    description: "A brief description for Twitter cards.",
  },
};

The Living Index 当前使用服务端首屏双语 metadata，客户端根据用户语言选择动态更新 <title> 和 <meta name="description">。在 app/layout.tsx 中设置的值会作为服务端渲染的基础值，也是社交平台爬虫看到的版本。

The Living Index uses server-rendered bilingual metadata on first load. The client updates <title> and <meta name="description"> dynamically based on the user’s language selection. The values you set in app/layout.tsx serve as the server-rendered baseline and are what social platform crawlers see.

---

部署到自定义域名后 / After Deploying to a Custom Domain

将站点部署到自定义域名后，还需要补充以下元数据，才能让 Open Graph 分享图、搜索引擎 canonical URL 和 sitemap 正常工作：

After deploying to a custom domain, add these additional metadata fields to make Open Graph images, canonical URLs, and sitemaps work correctly:

1. 添加 metadataBase / Add metadataBase

   在 metadata 对象中添加 metadataBase，指向你的正式域名。这是解析相对 URL（包括 Open Graph 图片路径）的基准：

   Add metadataBase to your metadata object pointing to your live domain. This resolves relative URLs including Open Graph image paths:

   export const metadata: Metadata = {
     metadataBase: new URL("https://yourname.com"),
     title: "Your Name | Personal Homepage",
     // ...其余字段 / rest of fields
   };
   
2. 添加 canonical URL / Add Canonical URL

   为首页设置 canonical URL，防止多个 URL 指向同一内容时产生重复索引：

   Set a canonical URL for the homepage to prevent duplicate indexing when multiple URLs resolve to the same content:

   export const metadata: Metadata = {
     metadataBase: new URL("https://yourname.com"),
     alternates: {
       canonical: "/",
     },
     // ...
   };
   
3. 添加验证过的 Open Graph 图片 / Add a Verified Open Graph Image

   准备一张尺寸为 1200×630 px 的社交分享图，放入 public/ 目录后在 metadata 中引用：

   Prepare a 1200×630 px social sharing image, place it in public/, then reference it in metadata:

   openGraph: {
     title: "Your Name",
     description: "A brief description for social sharing.",
     images: [
       {
         url: "/og-image.png",
         width: 1200,
         height: 630,
         alt: "Your Name — Personal Homepage",
       },
     ],
   },
   twitter: {
     card: "summary_large_image",
     title: "Your Name",
     description: "A brief description for Twitter cards.",
     images: ["/og-image.png"],
   },
   
4. 为每个章节添加 sitemap 条目（可选）/ Add Sitemap Entries per Chapter (Optional)

   如果你希望章节深链接被独立索引，可以在 app/sitemap.ts 中为当前启用的交互 ID 生成 ?section= 条目。默认 12 个内置 ID 只是起点：

   If you want chapter deep links indexed independently, generate ?section= entries for the currently enabled interactive IDs. The 12 default built-in IDs are only a starting point:

   import type { MetadataRoute } from "next";
   
   const ASSET_IDS = [
     "music", "fitness", "reading", "research",
     "making", "photography", "ritual", "growth",
     "about", "travel", "contact", "future",
   ];
   
   export default function sitemap(): MetadataRoute.Sitemap {
     const base = "https://yourname.com";
     const chapters = ASSET_IDS.map((id) => ({
       url: `${base}/?section=${id}`,
       lastModified: new Date(),
       changeFrequency: "monthly" as const,
       priority: 0.7,
     }));
     return [
       { url: base, lastModified: new Date(), priority: 1.0 },
       ...chapters,
     ];
   }
   

   如果你允许停用内置物件或增加 interactive 自定义资产，应从已发布 scene 计算有效 ID，而不是永久硬编码该数组。不要为 decorative 或 disabled 资产发布失效 URL。

   If your site disables built-ins or adds interactive custom assets, derive the effective IDs from the published scene instead of permanently hard-coding this array. Do not publish dead URLs for decorative or disabled assets.

---

双语 SEO 的现状与未来规划 / Bilingual SEO: Current State and Future Path

当前实现 / Current Implementation

The Living Index 目前使用”单入口、查询参数切换”的双语实现（?lang=zh / ?lang=en），共享同一份 metadata。这对交互式个人主页来说是合理的起点，可以让你快速上线。

The Living Index currently uses a single-entry bilingual implementation (?lang=zh / ?lang=en) with shared metadata. This is a practical starting point for an interactive personal homepage and lets you launch quickly.

如果需要独立搜索排名 / If You Need Independent Search Rankings

若未来希望中文版和英文版章节各自获得独立的搜索引擎排名，需要将内容升级为 /zh/... 和 /en/... 静态路由，并为各章节生成：

If you later want each language version of a chapter to rank independently in search engines, migrate the content to /zh/... and /en/... static routes and generate per-chapter:

• 独立的 canonical URL / Independent canonical URLs
• 独立的 Open Graph 标签 / Independent Open Graph tags
• 独立的 sitemap 条目 / Independent sitemap entries
• hreflang 互指标注 / hreflang cross-reference annotations

这是一个较大的架构变更，不建议在内容完善之前着急进行。先让当前单入口版本完整运行，再评估是否需要双语 SEO。

This is a significant architectural change and is not recommended before your content is complete. Get the single-entry version fully working first, then evaluate whether bilingual SEO is necessary for your goals.

---

完整上线前 SEO 检查清单 / Pre-Launch SEO Checklist

在部署到正式域名并宣传你的主页前，完成以下核查：

Before deploying to your custom domain and sharing your homepage, complete these checks:

• title 包含你的真实姓名 / title includes your real name
• description 是原创文字，不是复制的占位内容 / description is original text, not copied placeholder content
• keywords 反映你的真实专业方向 / keywords reflect your actual areas of focus
• openGraph.title 和 openGraph.description 已更新 / openGraph.title and openGraph.description are updated
• twitter.title 和 twitter.description 已更新 / twitter.title and twitter.description are updated
• 已添加 metadataBase 并指向正式域名 / metadataBase is set to your live domain
• 已添加 canonical URL / Canonical URL is set
• 已准备并引用 1200×630 px Open Graph 图片 / A 1200×630 px Open Graph image is prepared and referenced
• 通过 OpenGraph.xyz 或类似工具验证分享卡片 / Validate the sharing card with OpenGraph.xyz or a similar tool
• 通过 Twitter Card Validator 验证 Twitter 卡片 / Validate the Twitter card with the Twitter Card Validator