AI 建置網站的 SEO：真正重要的是什麼

AI 建置的網站和其他網站一樣，都能獲得良好排名：搜尋引擎評斷的是頁面包含什麼內容，以及它為訪客提供的服務好壞，而不是哪個工具寫了程式碼。關鍵在於技術層面。許多 AI 建置工具會產生單頁應用程式，只傳送幾乎空白的 HTML 檔案給瀏覽器，再以 JavaScript 繪製內容，這使得每個頁面更難被爬蟲讀取與分享。解決方法是採用預先渲染或伺服器端渲染，讓每個頁面都有自己的標題、描述與網址，加上網站地圖，保持網站快速，然後做工具無法替你完成的部分：撰寫人們正在搜尋的內容。

為什麼單頁應用程式在搜尋中可能遇到困難

傳統網站會在 HTML 中傳送每個頁面的完整文字。單頁應用程式（SPA）則是許多 AI 建置工具的預設輸出，通常是搭配 Vite 的 React，它會傳送一個小型的 HTML 外殼，類似一個空白的 <div id="root">，再加上 JavaScript 套件。瀏覽器執行 JavaScript 後才會建構出頁面。

這對搜尋有三方面的影響：

1. 渲染是額外的步驟。 Google 將 JavaScript 頁面的處理分為三個階段：抓取 HTML、在無頭 Chromium 瀏覽器中渲染，然後為渲染後的結果建立索引。Google 自己的指南表示，伺服器端渲染或預先渲染仍然是好的做法，因為對使用者和爬蟲來說都更快，而且並非所有機器人都能執行 JavaScript。
2. 其他讀取你頁面的程式根本不會渲染。 聊天應用程式與社群網路的連結預覽，以及許多其他爬蟲，通常只讀取初始的 HTML。如果你的標題與預覽圖片是在頁面載入後由 JavaScript 設定，那些預覽就會顯示空白外殼的預設值，通常每個頁面都是同一個標題。
3. 所有頁面共用同一個 HTML 檔案。 除非應用程式更新它，否則每個網址都會有相同的 <title> 與描述，這對搜尋引擎來說無法說明每個頁面的差異。

這些都不代表 SPA 無法被建立索引。它的意思是你依賴爬蟲做更多工作，而且你無法控制不渲染頁面的讀取者會看到什麼。

選擇渲染方式

有四種常見方法可以讓爬蟲取得真正的 HTML。以下依照對你應用程式改動幅度由小到大排列：

一個實用的原則：網站上公開、可被搜尋的部分應該是靜態或預先渲染的；其背後的登入應用程式則可以維持一般的 SPA。 反正搜尋引擎也不應該為儀表板建立索引。

如果你是從零開始，而且 SEO 很重要，請在第一個提示中就說明，讓 AI 選擇合適的架構：

為一家物理治療診所建置行銷網站，包含首頁、服務（每項服務一個頁面）、關於我們、定價與聯絡我們頁面。SEO 很重要：每個頁面都必須在初始 HTML 中包含完整內容，以及它自己的標題與 meta 描述 — 請使用靜態或預先渲染的架構，而不是僅在用戶端運作的單頁應用程式。

如果你已經有 Vite SPA，請要求預先渲染公開路由：

保持這個 React 應用程式現狀，但在建置時將公開路由（/、/pricing、/about、/blog 以及每個 /blog/:slug）預先渲染為靜態 HTML，每個頁面都要有自己的標題、meta 描述、標準網址與 Open Graph 標籤。登入後的 /app 路由可以維持用戶端渲染。

之後請自己檢查結果：開啟一個頁面，選擇檢視網頁原始碼（而不是開發者工具的 Elements 面板，那會顯示渲染後的頁面），並確認文字與標題都在原始 HTML 中。

做好頁面內的基本功

無論採用哪種渲染方式，這些都適用。

標題與 meta 描述

• 每個頁面都有獨一無二的 <title>，並把頁面的主要主題放在最前面。大約 50 至 60 個字元是常見的準則，因為較長的標題在搜尋結果中往往會被截斷。
• 每個頁面都有獨一無二的 meta 描述 — 一句讓人想點擊的話，而不是關鍵字清單。Google 可能會改寫，但好的描述常常會被採用。
• 略過 meta 關鍵字。Google 表示此標籤對建立索引或排名沒有任何影響。

網址、標題結構與連結

• 真實頁面使用真實網址。 每項內容都需要自己的路徑（例如 /services/sports-massage），而不是只有點擊後才會出現的分頁或彈出視窗。若希望內容被建立索引，請避免使用 # 片段路由。
• 每個頁面只有一個 h1，接著是合理的 h2／h3 大綱。AI 生成的設計有時會用標題來做樣式，請要求使用語意化的標題。
• 可供爬蟲抓取的連結。 導覽請使用真正的 <a href> 連結。以 JavaScript 改變頁面的按鈕對於會追蹤連結的爬蟲來說是看不見的。
• 標準標籤（canonical），指向每個頁面偏好的網址，避免 ?utm= 變體與結尾斜線的重複頁面互相競爭。
• 有意義的圖片要提供描述性的替代文字。

社群預覽

在每個公開頁面的初始 HTML 中加入 Open Graph 標籤（og:title、og:description、og:image、og:url）。這是 SPA 最常出錯的部分，因為連結預覽機器人不會執行 JavaScript。

網站地圖與 robots.txt

網站地圖是一個 XML 檔案，列出你希望被建立索引的網址。它能幫助搜尋引擎找到頁面，對於外部連結很少的新網站尤其有用。根據 Google 截至 2026 年 9 月的文件：

• 單一網站地圖最多可包含 50,000 個網址或未壓縮 50 MB；較大的網站應使用網站地圖索引來拆分。
• Google 會忽略 <priority> 與 <changefreq>。
• Google 只有在 <lastmod> 持續準確時才會採用它，因此應在真實內容變更時更新，而不是每次建置都更新。

robots.txt 檔案會告訴爬蟲哪些路徑不要抓取。可以用它讓爬蟲遠離 /app、/admin 與 API 路由，並在其中指向網站地圖。請記住，robots.txt 阻止的是抓取，而不是建立索引：若要讓頁面不出現在搜尋結果中，請使用 noindex 的 robots meta 標籤，並讓該頁面能被抓取。

網站上線到最終網域後，請在 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 — 過大的套件會拖慢 SPA 的一切。預先渲染有幫助；依路由拆分程式碼也有幫助。
• 字型 — 限制字型家族與字重，並預先載入首屏使用的字型。
• 第三方腳本 — 每個聊天小工具與追蹤像素都會影響速度。只保留你真正使用的。

請使用 PageSpeed Insights 或 Lighthouse 的行動裝置模式測試正式網址。

內容仍然佔大部分

技術 SEO 只是移除障礙，它無法創造需求。頁面能獲得排名，是因為它比其他選擇更能回答搜尋的問題。對大多數小型網站來說，這意味著：

• 每個人們會搜尋的主題都有一個頁面。 水電工需要每項服務、每個服務地區各一個頁面，而不是一個列出所有項目的「服務」頁面。
• 具體、原創的細節 — 價格、流程、真實工作的照片，以及客戶在電話中提出問題的解答。
• 有變動時就更新。 過時的營業時間與舊價格會迅速失去信任。

AI 可以快速撰寫草稿頁面，這讓人很想發布大量內容單薄、相似的頁面。Google 的指南針對的是主要為了排名、而非為了協助人們而製作的內容，無論它是如何產生的。請用 AI 撰寫草稿，再加入只有你知道的內容。目錄型網站最容易面臨這個問題；如何讓列表頁值得被建立索引，請參見如何建置目錄網站。

上線檢查清單

• 公開頁面在初始 HTML 中包含完整內容（請檢視網頁原始碼確認）
• 每個頁面都有獨一無二的標題、meta 描述與標準網址
• 每個公開頁面都有 Open Graph 標籤與分享圖片
• 每個頁面只有一個 h1、真正的 <a href> 連結，圖片有替代文字
• sitemap.xml 使用真實網址；robots.txt 阻擋應用程式與 API 路徑
• 結構化資料只描述可見內容，並已測試
• 行動裝置上的 LCP、INP 與 CLS 都在「良好」範圍內
• 網站位於最終網域、使用 HTTPS，並已提交至 Search Console

在開始建立搜尋流量之前，先遷移到你自己的網域，可以避免之後需要重新導向 — 請參見如何連接自訂網域。若想了解更完整的建置流程，請閱讀如何用 AI 建置網站；若是要促成訪客轉換的頁面，請參見如何建置能促成轉換的登陸頁。

Mythex 上的 SEO

Mythex 沒有獨立的 SEO 面板；你可以透過對話或程式碼修改應用程式來改善 SEO。新的網頁應用程式預設為 Vite 與 React 單頁應用程式，因此當搜尋很重要時，請從一開始就要求建置靜態或預先渲染的網站，或使用 Next.js。文件中有一則用於標題、Open Graph 標籤、網站地圖與 robots.txt 的入門提示，請參見為你的應用程式設定 SEO；以內容為主的網站則可參見靜態網站。變更後請重新發布，讓正式網站套用更新。自訂網域可在 Pro 方案中使用。

常見問題