去年某天，Alex Rivera的朋友让他搜自己的名字。他输入"alex riveria developer portfolio"，结果翻了三页才找到自己的网站——埋在LinkedIn档案、GitHub仓库，以及一个同名Minecraft模组作者后面。那一刻他意识到：设计再好看，搜不到就等于不存在。

六周后，他的新网站登上谷歌首页，Lighthouse跑分接近满分。这不是什么大厂工程团队的杰作，而是一个开发者单枪匹马的重建记录。以下是他的完整操作手册。

第一步：放弃Create React App，Next.js的SSG才是答案

第一步：放弃Create React App，Next.js的SSG才是答案

Alex之前用Create React App（CRA）搭过内部仪表盘，体验尚可。但CRA有个致命缺陷：浏览器收到的几乎是个空HTML文件，全靠JavaScript去抓取内容。Google现在确实能索引JavaScript了，但速度慢、可靠性差，更麻烦的是社交媒体的Open Graph预览会崩——因为爬虫不运行JS。

Next.js提供了三种渲染策略：静态站点生成（SSG）、服务端渲染（SSR）、增量静态再生（ISR）。对于一个内容不常更新的作品集，SSG是理想选择：构建时生成静态HTML，加载瞬间完成，搜索引擎可完整索引。

他也考虑过Gatsby，最终选Next.js出于四个实际考量：学习曲线更平缓（就是React加文件路由）、未来可能用上React服务端组件、Vercel部署无缝且每次git push自动生成预览、以及next/image组件的图片优化能力极强。他已经会React了，没必要为展示项目重新学一套范式。

第二步：把SEO从"事后补丁"变成架构设计

第二步：把SEO从"事后补丁"变成架构设计

旧网站的问题不是没做SEO，而是根本没给SEO留位置。新网站的每个页面都携带完整的元数据武器库。

Alex为每个路由配置了动态标题和描述。首页是"Alex Rivera | Full-Stack Developer"，项目页变成"Project Name | Alex Rivera"。他手动编写了Open Graph标签，确保LinkedIn和Twitter分享时能正确抓取标题、描述和预览图。Twitter Card用了summary_large_image格式，视觉冲击力更强。

结构化数据是很多人忽略的暗器。他在首页注入了JSON-LD格式的Person Schema，包含姓名、职位、头像URL、社交链接。Google搜索结果的"知识面板"就依赖这类标记。项目页则用了CreativeWork Schema，标记技术栈、创建日期、关联代码仓库。

站点地图（sitemap.xml）和robots.txt是基本功，但他用Next.js的API路由动态生成sitemap，每次构建自动更新，不用手动维护。

第三步：让Core Web Vitals从扣分项变成加分项

第三步：让Core Web Vitals从扣分项变成加分项

Google把页面体验正式纳入排名因素后，Lighthouse分数不再是虚荣指标。Alex的目标很明确：3G网络下也不让人流失。

最大内容绘制（LCP）的优化靠三招。所有图片转为WebP格式，用next/image自动提供响应式尺寸，首屏图片加priority属性预加载。累积布局偏移（CLS）的控制更隐蔽：图片必须声明宽高，字体用font-display: swap防止闪烁，关键CSS直接内联到HTML头部。

首次输入延迟（FID）的优化指向JavaScript瘦身。他审计了每个npm包，用webpack-bundle-analyzer找出体积元凶，用动态导入（dynamic import）把非关键代码拆到交互时才加载。最终首包体积从187KB压到67KB。

一个意外发现：Vercel的边缘网络缓存让全球访问速度趋于一致。他从柏林和新加坡分别测试，首字节时间差距不到100毫秒。

第四步：内容策略——让搜索引擎"读懂"你的价值

技术优化是基础设施，内容才是排名战场。Alex重新撰写了所有项目描述，不再罗列技术栈，而是回答三个问题：解决了什么业务问题、我的具体贡献、可量化的结果。

他新增了一个"写作"板块，把过去散落在Medium和Dev.to的技术文章迁移到自有域名下。每篇文章内部链接到相关项目，项目页又反向链接到技术详解。这种内容集群（content cluster）结构让Google更容易理解网站的主题权威。

URL结构也经过设计：/projects/ecommerce-dashboard比/project?id=123对搜索引擎友好得多。他设置了规范链接（canonical tags）防止重复内容，用301重定向处理了旧网站的死链，保住已有的微薄外链权重。

六周后的数据：搜索"alex riveria developer"，他排在第3位；搜索全名，第1位是LinkedIn，第2位就是他的网站。自然搜索流量从零涨到月均400访问，更意外的是——有三个招聘邮件明确提到"在谷歌搜到你"。

重建成本呢？域名和Vercel Hobby套餐免费，主要投入是时间。但他算了笔账：按咨询时薪折算，约等于两个工作日的收入。而旧网站"隐身"的代价，可能是永远错失的面试机会。

现在他的Lighthouse分数是：性能98，可访问性100，最佳实践100，SEO 100。不是满分，但足够让99%的开发者作品集相形见绌。

最后一个细节：他在页脚加了一行小字，"这个网站是用Next.js构建的，源代码在GitHub"——链接指向一个500多星的公开仓库。那里面没有魔法，只有他走过的每一步。

你的个人网站现在在谷歌第几页？