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> 及描述，搜尋引擎因此難以分辨各頁面的內容。

這並不代表單頁應用程式無法建立索引，而是代表你要依賴爬蟲做更多工作，而且你無法控制非渲染的讀取程式所見的內容。

選擇渲染方式

要令爬蟲取得真正的 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 keywords。Google 表示該標籤對建立索引及排名沒有任何作用。

網址、標題及連結

• **真實頁面使用真實網址。**每項內容都需要自己的路徑（例如 /services/sports-massage），而不是只在點擊後才出現的分頁或彈出視窗。若希望內容被建立索引，應避免使用 # 片段路由。
• 每個頁面只有一個 h1，其後是合理的 h2／h3 大綱。AI 生成的設計有時會使用標題來作樣式，因此應要求使用語意化的標題。
• **可供爬蟲抓取的連結。**導覽請使用真正的 <a href> 連結。以 JavaScript 改變頁面的按鈕，對於跟隨連結的爬蟲而言是看不見的。
• 標準標籤，將每個頁面指向其偏好的網址，令 ?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。說明文件在你的應用程式的 SEO 中提供了有關標題、Open Graph 標籤、網站地圖及 robots.txt 的起始提示，而靜態網站則涵蓋以內容為主的網站。修改後請重新發布，讓正式網站套用更改。自訂網域可於 Pro 方案使用。

常見問題