> ## Documentation Index
> Fetch the complete documentation index at: https://docs.acondawayuno.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```text theme={null}
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:

```typescript theme={null}
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.",
  },
};
```

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

***

## 部署到自定义域名后 / 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:

<Steps>
  <Step title="添加 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:

    ```typescript theme={null}
    export const metadata: Metadata = {
      metadataBase: new URL("https://yourname.com"),
      title: "Your Name | Personal Homepage",
      // ...其余字段 / rest of fields
    };
    ```
  </Step>

  <Step title="添加 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:

    ```typescript theme={null}
    export const metadata: Metadata = {
      metadataBase: new URL("https://yourname.com"),
      alternates: {
        canonical: "/",
      },
      // ...
    };
    ```
  </Step>

  <Step title="添加验证过的 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:

    ```typescript theme={null}
    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"],
    },
    ```
  </Step>

  <Step title="为每个章节添加 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:

    ```typescript theme={null}
    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.
  </Step>
</Steps>

***

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

<Tip>
  **当前实现 / 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.
</Tip>

***

## 完整上线前 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](https://www.opengraph.xyz/) 或类似工具验证分享卡片 / Validate the sharing card with [OpenGraph.xyz](https://www.opengraph.xyz/) or a similar tool
* [ ] 通过 [Twitter Card Validator](https://cards-dev.twitter.com/validator) 验证 Twitter 卡片 / Validate the Twitter card with the Twitter Card Validator