AI 构建网站的 SEO：真正重要的是什么

AI 构建的网站完全可以和其他网站一样获得良好排名：搜索引擎判断的是页面包含什么内容、能多好地服务访客，而不是代码是哪个工具写的。问题在于技术层面。许多 AI 构建工具生成的单页应用，发送给浏览器的 HTML 文件几乎是空的，内容要靠 JavaScript 绘制出来，这会让爬虫更难读取和分享每个页面。解决方法是：使用预渲染或服务器端渲染，为每个页面设置独立的标题、描述和 URL，添加站点地图，保持速度快，然后做工具无法替你完成的那部分工作：撰写人们正在搜索的内容。

为什么单页应用在搜索中可能表现不佳

传统网站会在 HTML 中发送每个页面的完整文本。单页应用（SPA）则是许多 AI 构建工具的默认输出，通常是 React 加上 Vite 等工具，它发送的是一个很小的 HTML 外壳，类似一个空的 <div id="root">，外加一个 JavaScript 包。浏览器运行 JavaScript，再由它构建出页面。

这对搜索有三方面的影响：

1. 渲染是额外的一步。 Google 将 JavaScript 页面的处理分为三个阶段：抓取 HTML，在无头 Chromium 浏览器中渲染，然后索引渲染后的结果。Google 自己的指南表示，服务器端渲染或预渲染仍然是个好主意，因为它对用户和爬虫都更快，而且并非所有机器人都能运行 JavaScript。
2. 其他读取你页面的程序根本不会渲染。 聊天应用和社交网络中的链接预览，以及许多其他爬虫，通常只读取最初的 HTML。如果你的标题和预览图是在页面加载后由 JavaScript 设置的，那么这些预览显示的就是空外壳的默认值，通常每个页面都是同一个标题。
3. 所有页面共用一个 HTML 文件。 除非应用对其进行更新，否则每个 URL 的 <title> 和描述都相同，这几乎无法告诉搜索引擎每个页面的内容。

这并不意味着单页应用无法被索引，而是说你得依赖爬虫做更多工作，同时你也无法控制不渲染内容的读取者看到什么。

选择渲染方式

有四种常见方式可以把真正的 HTML 提供给爬虫。按它们对你的应用改动程度大致排序：

一个实用的原则是：网站中公开、需要被搜索的部分应当是静态或预渲染的；其背后的登录后应用可以保持为普通的单页应用。 搜索引擎本来就不应该索引仪表盘。

如果你从零开始，并且 SEO 很重要，那就在第一条提示词中说明，让 AI 选择合适的架构：

为一家物理治疗诊所构建营销网站，包含首页、服务（每项服务一个页面）、关于我们、定价和联系我们页面。SEO 很重要：每个页面都必须在初始 HTML 中提供完整内容，以及各自的标题和元描述——请使用静态或预渲染方案，而不是纯客户端的单页应用。

如果你已经有一个 Vite 单页应用，可以要求对公开路由进行预渲染：

保持这个 React 应用的现状，但在构建时把公开路由（/、/pricing、/about、/blog 以及每个 /blog/:slug）预渲染为静态 HTML，每个页面都带有各自的标题、元描述、规范 URL 和 Open Graph 标签。登录后的 /app 路由可以保持客户端渲染。

之后自己检查结果：打开一个页面，选择查看页面源代码（而不是开发者工具中的 Elements 面板，后者显示的是渲染后的页面），确认文本和标题都在原始 HTML 中。

把页面基础做对

无论采用哪种渲染方式，这些基础都适用。

标题与元描述

• 每个页面都有唯一的 <title>，并把页面的主要主题放在最前面。大约 50–60 个字符是常见的参考值，因为过长的标题在搜索结果中容易被截断。
• 每个页面都有唯一的元描述，写成一句能让人想点击的话，而不是关键词堆砌。Google 可能会改写它，但一个好的描述通常会被采用。
• 不要使用元关键词。Google 表示，该标签对索引和排名没有任何作用。

URL、标题层级与链接

• 真实页面使用真实的 URL。 每块内容都应有自己的路径（例如 /services/sports-massage），而不是只有点击后才会出现的标签页或弹窗。对于希望被索引的内容，避免使用 # 片段路由。
• 每个页面只有一个 h1，然后是合理的 h2/h3 层级。AI 生成的设计有时会用标题来做样式，因此要明确要求使用语义化的标题。
• 可爬取的链接。 导航使用真正的 <a href> 链接。用 JavaScript 切换页面的按钮，对于沿链接爬行的爬虫来说是不可见的。
• 规范标签（canonical），指向每个页面的首选 URL，这样 ?utm= 变体和末尾斜杠的重复地址就不会互相争夺排名。
• 有描述性的图片替代文本（alt），用于有实际意义的图片。

社交分享预览

为每个公开页面在初始 HTML 中添加 Open Graph 标签（og:title、og:description、og:image、og:url）。这是单页应用最常出错的部分，因为链接预览机器人不运行 JavaScript。

站点地图与 robots.txt

站点地图是一个列出你希望被索引的 URL 的 XML 文件。它有助于搜索引擎发现页面，对于外部链接较少的新网站尤其有用。根据 Google 的文档（截至 2026 年 9 月）：

• 单个站点地图最多可包含 50,000 个 URL 或未压缩 50 MB；较大的网站应使用站点地图索引进行拆分。
• Google 会忽略 <priority> 和 <changefreq>。
• 只有 <lastmod> 持续准确时，Google 才会使用它，因此应在真正的内容发生变化时更新，而不是每次构建都更新。

robots.txt 文件告诉爬虫哪些路径不应抓取。用它把爬虫挡在 /app、/admin 和 API 路由之外，并在其中指向站点地图。请记住，robots.txt 只阻止抓取，而不阻止索引：如果要让某个页面不出现在搜索结果中，应使用 noindex 的 robots 元标签，并且允许该页面被抓取。

网站正式上线到最终域名后，请在 Google Search Console 中提交站点地图。Search Console 还会显示哪些页面已被索引，以及其他页面未被索引的原因，它是最有用的免费 SEO 工具。

结构化数据

结构化数据是一种机器可读的标记，用来描述页面是什么：一个组织、一家本地商户、一件商品、一篇文章、一个活动。Google 推荐使用 JSON-LD 格式，并在两点上明确表示：

• 它可以让页面有资格获得富媒体结果，但不保证一定会获得。
• 它必须描述页面上可见的信息。不要标记访客看不到的评价、价格或常见问题。

合理的起点是：首页使用 Organization 或 LocalBusiness，商品页使用 Product，博客文章使用 Article，深层页面使用 BreadcrumbList。可以用 Google 的富媒体结果测试工具进行测试。

添加 JSON-LD 结构化数据：首页使用 LocalBusiness，内容取自页面上已显示的地址、电话和营业时间；每篇博客文章使用 Article。不要添加评分或评价。

速度与移动端

Google 会参考页面体验信号，包括 Core Web Vitals，而且无论如何，速度对访客都很重要。Google 的“良好”阈值以页面加载的第 75 百分位数衡量，具体如下：

AI 构建网站的常见优化方法：

• 图片：缩小尺寸、压缩、使用现代格式，设置宽高（这可以防止布局偏移），并对首屏以下的图片使用懒加载。
• JavaScript：大型包会拖慢单页应用的一切。预渲染有帮助，按路由拆分代码也有帮助。
• 字体：限制字体家族和字重数量，并预加载首屏使用的字体。
• 第三方脚本：每个聊天组件和跟踪像素都会拖慢速度。只保留你真正在用的。

使用 PageSpeed Insights 或 Lighthouse 的移动模式测试线上 URL。

内容仍然是大部分的工作

技术 SEO 只是清除障碍，并不能创造需求。页面之所以能获得排名，是因为它比其他选择更好地回答了搜索问题。对大多数小型网站来说，这意味着：

• 每个人们会搜索的主题都有一个页面。 水管工需要为每项服务、每个服务区域分别建页，而不是只有一个列出所有内容的“服务”页面。
• 具体、原创的细节：价格、流程、真实作品的照片、对客户电话中常问问题的解答。
• 有变化时及时更新。 过时的营业时间和旧价格会迅速失去信任。

AI 可以很快起草页面，这让人很容易想发布大量单薄、相似的页面。Google 的指南针对的是主要为排名而非为帮助用户而制作的内容，无论它是如何产生的。用 AI 起草，然后补充只有你自己知道的内容。目录式网站面临的问题最多，参见如何搭建目录网站，了解如何让列表页面值得被索引。

上线检查清单

• 公开页面在初始 HTML 中提供完整内容（用“查看页面源代码”检查）
• 每个页面都有唯一的标题、元描述和规范 URL
• 每个公开页面都有 Open Graph 标签和分享图片
• 每个页面一个 h1，使用真正的 <a href> 链接，图片带替代文本
• sitemap.xml 包含真实 URL；robots.txt 屏蔽应用和 API 路径
• 结构化数据只针对可见内容，并已测试
• 移动端的 LCP、INP 和 CLS 处于“良好”范围
• 网站位于最终域名，使用 HTTPS，并已提交到 Search Console

在开始积累搜索流量之前就迁移到你自己的域名，可以避免之后的重定向，参见如何连接自定义域名。关于整体的搭建流程，请阅读如何用 AI 搭建网站；关于促成访客转化的页面，请阅读如何搭建能够转化的落地页。

Mythex 上的 SEO

Mythex 没有独立的 SEO 面板；你需要通过聊天或代码修改应用来改善 SEO。新的网页应用默认使用 Vite 和 React 单页应用，因此当搜索很重要时，请从一开始就要求使用静态或预渲染的网站，或要求使用 Next.js。文档中的为你的应用做 SEO提供了关于标题、Open Graph 标签、站点地图和 robots.txt 的起始提示词，而静态网站一文则介绍了以内容为主的网站。修改后请重新发布，线上网站才会生效。自定义域名是 Pro 功能。

常见问题