让 Next.js 作品集在 Google 上被看见：真正重要的 SEO

问题：排名靠前，不等于呈现得好

在 Google 里输入我的名字，我的作品集排在第一位。SEO 是奏效的。但一个好排名，并不保证一个好呈现：链接旁显示的图标、站点名称、描述——这一切，都取决于 Google 从你代码里读到的、精确的技术信号。

本文详解那些让结果在「泛泛」与「令人信任」之间拉开差距的设置。

Favicon：一条几乎没人遵守的约束

Google 会在每个结果左侧显示一个图标。要让它是你的、而非一个通用兜底图标，有三个条件：

• Favicon 必须由一个稳定的 URL 提供，并通过 <link rel="icon"> 声明。
• 它的尺寸必须是 48px 的倍数（48、96、144……）。而 64×64，尽管常见，却会被 Google 直接忽略。
• 它必须在极小尺寸下仍然清晰：一个字母组合或一个符号，绝不是细节繁复的 logo。

在 Next.js 里，一个简单的 app/icon.tsx 文件即可生成 favicon，并自动注入 <link> 标签。陷阱，就藏在导出的尺寸里。

一个完美却是 64×64 的 favicon，永远不会出现在 Google 的结果里。这个细节，会让你怀疑好几个星期。

「站点名称」：夺回对 Google 所显示内容的掌控

默认情况下，Google 往往显示域名（monsite.com）而非真实名称。要强加一个正式名称，必须对齐三个信号，且三者必须严格一致：

• WebSite 结构化数据（JSON-LD）里的 name 字段。
• og:site_name 标签（Open Graph）。
• application-name meta。

一旦这三个值出现分歧——哪怕只是一边「Jean Portfolio」、另一边「Jean — Portfolio」——Google 就会放弃，退回到域名。一致，是唯一的规则。

结构化数据：说明你是谁

Person 的 JSON-LD，正是让 Google 理解这个网站讲的是一个具体的人——有职业、有所在地、有社交主页。分量最重的字段：

• name、jobTitle、description — 基础身份。
• sameAs — 你的主页清单（GitHub、LinkedIn）。正是它把你的网站与你的线上存在连接起来，并为知识面板供料。
• image — 一张照片，对富媒体结果有用。

用一个 @id 标识（#person、#website）把每个实体连接起来，可以避免重复，并给 Google 一张干净的图，而非一堆孤立的卡片。

多语言站点地图：别被 hreflang 吞掉

一个多语言网站，必须告诉 Google 该把哪个版本展示给谁。否则，不同语言会在索引里自相蚕食。规则：每个 URL 都通过 alternates.languages 声明它全部的语言变体，外加一个 x-default。

Next.js 会生成一个原生的 sitemap.ts，其中每一条都带着自己的 hreflang。这比第三方插件更可靠——那些插件常常漏掉 [locale] 这类动态路由。

真正重要的，按顺序

如果要为一个新项目排优先级：

1. Google Search Console — 没有它，你就是瞎的。提交站点地图，请求索引。
2. 身份信号的一致 — 合规的 favicon、对齐的站点名称、干净的 JSON-LD。
3. 真实的内容 — 一个单页网站很快就触顶。像这样的技术文章，让你在真实的搜索里存在。
4. Core Web Vitals — 一个快的网站，是一个排名更好的网站。先测量，再优化。

技术 SEO 不是魔法：它是一串清晰的信号，干净地发出去，然后交给 Google 重新抓取所需的时间。剩下的，交给耐心。