让搜索引擎找到你：AI 生成站点的 SEO 实战

先说残酷的真相：搜索引擎看到的根本不是你的网站

你在浏览器里看到的是一个精美的 landing 页，动画流畅、交互丝滑。但搜索引擎看到的可能完全是另一幅画面：一个空的 <div id="root"></div>，加一个几 MB 的 JS 文件——正文内容要等 JS 下载、执行完才出现。

这就是 vibe coding 项目的 SEO 先天不足，而且是三重 debuff 叠满：第一，AI 默认给你客户端渲染。Vite React 模板、create-react-app，脚手架吐出来的就是 SPA；你让 AI“做个官网”，它从不会主动提醒你“这个渲染方式搜索引擎可能看不见”。第二，标题千篇一律。<title> 永远是 “Vite + React + TS” 或者 “My App”——我见过上线半年的产品，浏览器标签页上还挂着这个。第三，没有 sitemap.xml。搜索引擎发现你新页面的唯一方式是顺着链接爬，而你的内链可能藏在 JS 路由里。

有人会说：Googlebot 不是能执行 JS 吗？能，但有代价。Googlebot 用的是常青版 Chromium，确实会渲染 JS，可渲染要排队——你的页面先进抓取队列，再进渲染队列，小站等上几天才被真正“看见”都不稀奇；这还浪费了本就不多的抓取预算（crawl budget）。Bing、DuckDuckGo 的渲染能力更弱。更要命的是新玩家：AI 搜索（ChatGPT、Perplexity 这类）的引用来源，基本只读静态 HTML，你的客户端渲染内容在它们眼里约等于不存在。

怎么做：上线前花 10 分钟自查。终端跑 curl -s https://你的域名 | head -60，看看返回的 HTML 里有没有你的正文案；Google 搜 site:你的域名 看实际收录了几页；进 Google Search Console 用“网址检查”看 Google 渲染后的页面长什么样。如果 curl 下来是空壳，别往下读了，先去看下一节。

别这么干：网站上线三个月，跑来问“为什么没流量”，一查 Google 只收录了首页——标题还是 “Vite App”。

渲染策略是第一道分水岭：错了，后面全白搭

SEO 所有的技术动作都建立在一个前提上：搜索引擎一次请求就能拿到完整 HTML。渲染策略选错，后面做的 metadata、结构化数据全是沙上建塔。决策不复杂，按页面类型分：

• 营销页、博客、文档、定价页 → SSG（静态生成）。构建时直接吐出 HTML，又快又稳，这是 SEO 的最优解。
• 内容更新频繁但可缓存 → ISR（增量静态再生）。比如博客列表、排行榜，设个 revalidate 时间，后台更新后自动刷新。
• 需要登录态、个性化 → SSR（服务端渲染）。每次请求实时渲染，适合 dashboard 这类页面。
• 纯交互工具（编辑器、看板）→ CSR 可以留着。但对外获客的 landing 页必须 SSR/SSG，别让获客页陪着工具一起“客户端渲染”。

怎么做（Next.js App Router）：在 app/layout.tsx 里导出 export const metadata: Metadata = { metadataBase: new URL('https://你的域名'), title: { default: '产品名 - 一句话说清它是干嘛的', template: '%s | 产品名' }, description: '150 字以内的页面描述，带一个行动词' }；动态路由比如 app/blog/[slug]/page.tsx 用 export async function generateMetadata({ params }) 按文章查数据、返回独立标题和描述；ISR 只需加一行 export const revalidate = 3600。

这里有个 AI 时代最高频的坑：metadata 只在 Server Component 里生效。文件顶部写了 'use client'，再 export metadata 会被直接忽略，而且不报错。AI 特别爱在页面组件第一行加 'use client'，然后“贴心”地帮你写好 metadata——写了等于没写。逐个页面检查，把代码库里 'use client' 和 generateMetadata 出现在同一个文件的情况全部揪出来。

纯 CSR 老站点的补救（按推荐度排序）：最彻底的是迁到 Next.js / Astro / Remix，至少把 landing、定价、博客迁过去，工具本体保持 CSR 不动；次选是 prerender.io 这类预渲染中间层——检测到爬虫 UA 就返回预渲染好的 HTML。但注意红线：返回给爬虫的内容必须和用户看到的一致，搞两套内容就是 cloaking（伪装），抓到会被惩罚。别这么干：为了“快”全站 CSR 然后指望 Google 慢慢渲染你；也别去翻已经停止维护的构建期预渲染插件，依赖死了比没做更麻烦。

一句话：搜索引擎是“先看 HTML，再决定要不要等你的 JS”——别让它等。

技术 SEO 清单：一个周末做完，长期受益

渲染策略定死之后，下面 7 项逐项过一遍。都是确定性工作，没有玄学：

1. 语义化 HTML：每页只允许一个 h1。层级不许跳——h2 下面直接接 h4 是 AI 最爱犯的病；导航用 <nav>、正文用 <main> / <article>，把 AI 生成的 div soup 重构掉。跑一遍 Lighthouse，它的 SEO 分类会直接点名缺了啥。

2. sitemap.xml + robots.txt。Next.js 在 app/sitemap.ts 里返回 { url, lastModified, changeFrequency, priority } 数组，app/robots.ts 里写 rules 并指向 sitemap；其他框架用 next-sitemap 或构建脚本手写。生成后去 GSC 和 Bing Webmaster 各提交一份——提交了不等于秒收录，但不提交一定慢。

3. canonical（规范地址）。每个页面声明 alternates: { canonical: 'https://你的域名/blog/xxx' }。带 ?utm_source= 的分享链接、www 与裸域、http 与 https——不统一，权重就被稀释成几份。

4. JSON-LD 结构化数据。在页面里放 <script type="application/ld+json">：博客用 Article（headline、datePublished、author），产品/工具页用 SoftwareApplication，页面里有 FAQ 板块就加 FAQPage。写完用 Google 的 Rich Results Test 验证。别这么干：编造 aggregateRating 给自己刷五星——虚假结构化数据会被手动惩罚，得不偿失。

5. Open Graph / Twitter Card。每页配 og:title、og:description、og:image（1200×630），Twitter 用 summary_large_image。社交分享图别用默认灰盒子——用 @vercel/og 在 Edge 上按标题动态生成，成本几乎为零。发之前去 metatags.io 预览一眼，错位、截断当场就能看见。

6. 图片：alt 写清楚，体积先压。alt 写图片实际内容（“深色模式下的看板界面”），而不是“图片1”；大图先压缩，Squoosh 在线压一次，或构建时用 sharp 处理；Next.js 直接用 next/image，响应式尺寸和懒加载开箱即用。

7. 404 / 301。死链给一个带导航、能回首页的 404 页，别扔个空白页；改版换 URL 一律 301（next.config.js 的 redirects()），别用 302 凑合——302 不传递权重，旧链接积累的排名就浪费了。

这 7 项一个周末能做完。做完之后，你的站点在技术上就“配得上”被收录了——剩下的事交给内容和时间。

内容策略：AI 可以帮你写，但不能替你“值得被收录”

技术 SEO 解决的是“被看见”，内容解决的是“值得被收录”。程序化 SEO（用 AI 批量生成页面）本身不违规，红线在于信息增量：每个页面必须能回答——它比搜索结果前 10 名多提供了什么？真实数据、真实对比、真实截图、真实踩坑经历，至少占一条。全是“正确的废话”的页面，批量生产 1000 个也没用。

这不是危言耸听：Google 2024 年 3 月核心更新明确把 “scaled content abuse”（规模化内容滥用）列为垃圾内容政策——纯为冲排名、批量生产的低价值内容，会被整站降权。别这么干：“Best {keyword} in {city}” 一键生成 1000 个城市页；拿 AI 把别人的文章洗稿一遍换个标题发；正文里关键词堆砌。AI 写作最大的坑不是“被识别出是 AI 写的”，而是“写了等于没写”。

从 E-E-A-T（经验、专业度、权威性、可信度，Google 质量评分指南里的概念）视角看，vibe 站点建立可信度有四件具体事：作者页写真人——真名、真头像、GitHub / Twitter 链接，别是个“Admin”；案例页放真实数据截图（敏感信息打码也行）；每篇文章标注发布日期和更新日期，让搜索引擎和读者都知道这内容还活着；about 页面说清楚这是谁做的、为什么做。匿名 + 无联系方式 + 全 AI 文，是信任度最低的组合，搜索引擎和用户都不傻。

内容复利的真相：10 篇真解决问题的深度内容，胜过 100 篇 AI 水文。选题不用愁——先写你被问过最多次的那 10 个问题，每篇都给出“别人没给过的细节”，这就是你的信息增量。

测量与迭代：不接 Search Console 就是闭眼开车

必接两个：Google Search Console（DNS TXT 记录或 HTML 文件验证）和 Bing Webmaster Tools（支持从 GSC 一键导入验证，5 分钟搞定）。别只接 GA 之类的数据统计——它们告诉你“来了多少人”，但不告诉你“搜索引擎怎么看你”。

看数据只看三级漏斗，顺序不能反：第一级看收录数——GSC 里“网页”→“编入索引”的曲线在涨吗？没收录，后面全是空谈。第二级看展示——效果报告里 impressions 有没有曲线？有展示说明 Google 愿意给你机会。第三级看点击——CTR 低于 1% 的页面，重写 title 和 description（加数字、加年份、加具体收益），这是投入产出比最高的优化。

新页面发布后，别干等爬虫：去 GSC“网址检查”里手动请求编入索引。另外，每周花 20 分钟看一次“效果”报告里的查询词——用户实际搜什么词找到你，往往和你预想的不一样，这是调 title 和补内容的免费情报。

上线 30 天 SEO 行动表：

• 第 1 周（技术项）：渲染策略定死并上线；全站 title / description 补齐；sitemap.xml + robots.txt 生成，并提交 GSC 和 Bing；404 / 301 处理完；确认 GSC 数据开始进来。
• 第 2 周（技术收尾 + 内容启动）：JSON-LD 全站加上并用 Rich Results Test 验证；OG 分享图配好；图片 alt 全站过一遍；发布 2 篇深度内容（解决真实问题的那种）。
• 第 3 周：保持每周 2 篇内容；看 GSC 效果报告，有展示没点击的页面重写 title；去 2-3 个相关社区做一次有信息量的分享（Show HN、Product Hunt、V2EX——发解决问题的过程，别发硬广）。
• 第 4 周：复盘漏斗——收录涨了多少、哪类词开始有展示；给有展示的页面加深内容（加 FAQ 板块，顺手配上 FAQPage 结构化数据）；规划下个月 8 篇内容的选题。

别这么干：买外链、刷点击。短期可能有点用，被抓到就是整站惩罚——独立开发者赌不起这一把。

最后的判断：SEO 是慢变量，先让网站值得被收录

给这篇定个调：SEO 是 vibe 项目最便宜的增长渠道——不花一分广告费，流量来了就是复利。但它也是最慢的变量之一，3-6 个月才看到曲线。指望“上周做了 SEO 这周就爆流量”的人，99% 会在第 3 周放弃，然后得出“SEO 没用”的结论。

顺序永远是：先让网站值得被收录，再谈收录技巧。内容有信息量、技术没硬伤、可信度立得住——这三样做到了，SEO 的技术动作只是在帮搜索引擎“看见”这份有用。反过来，一个没人需要的产品，SEO 做得再好，也只是让更多人更快地发现“这东西我不需要”。

所以行动清单其实只有三行：这周把渲染和 metadata 修好；这个月写出 8 篇有信息增量的内容；然后给搜索引擎一点耐心。剩下的，交给时间。