前言摘要：這是一份深度技術 SEO 指南，涵蓋從 301 重定向、網站速度優化、robots.txt 設定，到 SSL 憑證導入等 8 大核心章節。透過專業開發者的視角，我們將揭示如何在網站架設階段就奠定堅實的 SEO 基礎。
第 1 章：設定 301 重定向：優化 URL 變更與維護 SEO 權重
1.1 網站改版的「隱形殺手」：為什麼新網站上線後流量會崩跌？
這是許多企業主的惡夢：滿心歡喜地迎接新網站上線,結果過幾天打開 Google Analytics，發現流量像跳水一樣直線下降。
問題通常出在 URL（網址）改變了。
舊網站的網址可能是 example.com/about.html，新網站改成了 example.com/about-us。當老客戶或外部連結點擊舊網址時，他們只會看到一個冷冰冰的 404 Page Not Found（找不到網頁）。更嚴重的是，Google 會認為：「原本那個排名很好的頁面不見了。」於是，您累積多年的 SEO 權重（Link Juice）瞬間歸零。
1.2 301 重定向 (Redirect)：數位世界的「搬家轉信服務」
要解決這個問題，我們必須使用 301 重定向（Permanent Redirect）。
這就像是您搬家後，去郵局填寫「郵件改投申請單」。當有人寄信到您的舊地址（舊網址）時，郵差（伺服器）會自動把信轉送到您的新地址（新網址），而且會告訴寄信人：「他已經永久搬家了，以後請直接寄到新地址。」
- 無縫體驗：用戶點擊舊連結，會自動跳轉到新頁面，完全感覺不到錯誤。
- 權重轉移：這是 SEO 的關鍵。301 訊號會告訴 Google 把舊頁面累積的權重、排名信號，90%~99% 轉移給新頁面。
1.3 專業開發者的 301 實作策略
在新視野設計的網站改版流程中，301 設定是上線前的「必考題」。我們不會讓客戶承擔排名流失的風險：
- 對照表建立 (Mapping)：在動工前，我們會先爬取舊網站的所有網址，並與新網站的網址建立「一對一」的對應關係。絕對不是簡單地把所有舊網址都轉到首頁（這是懶惰且錯誤的做法，會被 Google 視為軟性 404）。
- 伺服器端設定：若使用 Apache 伺服器，我們會編寫 .htaccess 檔案。若使用 Nginx 伺服器，我們會修改 nginx.conf 設定檔。這種伺服器層級的轉址速度最快，效能最好。
- 工具檢測：上線後，我們會使用專業 SEO 工具（如 Screaming Frog）進行全站掃描，確保每一個重定向都成功執行，沒有死胡同。
第 2 章：改善頁面加載速度：使用快取、縮小 CSS/JS 和延遲加載技術
2.1 速度就是金錢：Google 核心網頁指標 (Core Web Vitals)
在數位世界裡，耐性是稀缺資源。Amazon 的研究曾指出，網頁載入每慢 0.1 秒，營收就會下降 1%。對於 SEO 來說，速度更是排名的硬指標。
Google 已經全面導入 Core Web Vitals（網站核心指標）作為排名因素。它不再只是模糊地感覺「網站快不快」，而是用精確的數據來評分：
- LCP (最大內容繪製)：主畫面出來要多久？（建議 < 2.5 秒）
- INP (互動反應時間)：點擊按鈕後多久有反應？（取代了舊的 FID）
- CLS (累計版面位移)：畫面會不會亂跳？
如果您的網站程式碼寫得雜亂無章，導致這些分數不及格，即便內容再好，排名也會被 Google 降級。
2.2 程式碼「瘦身」計畫：縮小 CSS 與 JS (Minification)
很多現成的網站模板（Template），為了方便修改，裡面塞滿了大量的註解、空白鍵和換行符號。這些對人類閱讀有幫助，但對機器來說全是「多餘的脂肪」。
在新視野設計的開發流程中，我們會在網站上線前進行「程式碼最小化 (Minification)」。
- 使用專業工具（如 UglifyJS 或 CSSNano）將程式碼中的所有空白、換行和註解全部刪除，並縮短變數名稱。
- 這能讓檔案大小減少 30%~50%。就像是把行李箱裡的空氣抽乾淨一樣，傳輸速度自然變快。
2.3 善用快取 (Caching) 與 CDN：別讓伺服器做白工
為什麼有些網站第一次開很慢，第二次開就飛快？這就是「快取（Cache）」的功勞。
快取技術就像是餐廳的「備料」機制。如果每次客人點餐，廚師都要重新去田裡採菜、洗菜，那出餐一定慢。快取就是把做好的菜（網頁資料）先存起來，下一個人點一樣的菜時，直接端出來就好。
1. 瀏覽器快取 (Browser Caching)：告訴使用者的瀏覽器：「這個 Logo 圖檔一年內都不會變，存這一次就好，下次不要再來下載了。」
2. 伺服器快取 (Server Caching)：減少資料庫查詢次數，降低主機負載。
進階加速：CDN (內容傳遞網路)
若您的客戶遍布全台灣甚至全球，我們會建議導入 CDN。這就像是在各地都建立了「物流倉庫」，讓台北的用戶由台北主機出貨，高雄用戶由高雄主機出貨，實現真正的秒開體驗。
2.4 延遲加載 (Lazy Loading) 的技術實作
雖然我們在上集提過圖片的延遲加載，但在開發層面，這不僅限於圖片。
對於繁重的 JavaScript 腳本（例如 Facebook 聊天室外掛、Google 地圖嵌入），我們也會採用「非同步載入 (Async/Defer)」或延遲執行技術。這確保了網頁的「主要內容（文字與標題）」會優先顯示給使用者看，而那些比較佔資源的外掛程式，則會在背景默默載入，不會卡住畫面的呈現。
第 3 章：優化機器人協議文件 (robots.txt)：控制搜尋引擎爬蟲的訪問權限
3.1 網站的「門禁系統」：請 Google 爬蟲非誠勿擾
如果說 Sitemap 是我們主動遞給 Google 的地圖，那麼 robots.txt 就是掛在門口的「門禁告示牌」。
搜尋引擎的爬蟲（Spiders/Bots）在進入您的網站之前，會先讀取這個檔案，看看主人的規定：
- 「這裡可以進來參觀（Allow）。」
- 「那裡是倉庫重地，請勿進入（Disallow）。」
雖然 Google 爬蟲很強大，但它的資源也是有限的。這就是 SEO 中所謂的「爬取預算（Crawl Budget）」。如果您的網站沒有設定好 robots.txt，爬蟲可能會把時間浪費在抓取「後台登入頁」、「購物車暫存頁」或是「網站搜尋結果頁」。結果就是：當爬蟲把預算用完了，您真正重要的新產品頁面反而沒被抓到，導致收錄延遲。
3.2 robots.txt 的三大戰略用途
(1) 節省爬取預算，提升效率
我們會明確禁止爬蟲進入那些「對 SEO 無益」的頁面。例如：
Disallow: /wp-admin/
Disallow: /cart/
Disallow: /checkout/
這樣做能引導 Google 爬蟲專注於抓取您的部落格文章、產品介紹等具備排名價值的內容。
(2) 防止「重複內容」被索引
有些網站系統會自動產生大量的動態網址（例如 ?sort=price_asc 價格排序頁）。這些頁面的內容跟主分類頁幾乎一樣，如果都被收錄，會導致嚴重的重複內容（Duplicate Content）問題，稀釋網站權重。透過 robots.txt，我們可以命令爬蟲忽略這些動態參數頁。
(3) 指引 Sitemap 位置
雖然我們已經在 Search Console 提交過 Sitemap，但為了保險起見，我們通常會在 robots.txt 的最後一行，再次宣告 Sitemap 的路徑：
Sitemap: https://www.example.com/sitemap.xml
這能確保任何來訪的搜尋引擎（不只 Google，還有 Bing、Yahoo）都能輕易找到地圖。
3.3 嚴禁踩雷：一字之差，排名全滅
這是一個我們在接手救援案時，常看到的恐怖故事。
有些開發者在網站測試階段，為了不想讓 Google 抓到測試站，會在 robots.txt 寫下這行代碼：
Disallow: /
這代表「禁止抓取整個網站」。這在測試期是正確的。但最可怕的是，網站正式上線時忘了把這行刪掉。結果就是，Google 乖乖聽話，把整個網站的索引全部刪除。您的網站會在一夜之間從搜尋結果中憑空消失，流量歸零。
我們擁有嚴格的「上線前檢查清單（Pre-launch Checklist）」。確認 robots.txt 的設定從「開發模式」切換為「正式模式」，是我們絕不會遺漏的關鍵步驟，確保您的網站安全無虞地對外開放。
第 4 章：設置永久性連結 (Permalinks)：為內容生成 SEO 友好的 URL
4.1 為什麼叫「永久」連結？網址的恆久承諾
在 WordPress 或其他 CMS 系統後台，您常會看到一個設定選項叫做「永久連結（Permalinks）」。之所以強調「永久（Permanent）」，是因為在 SEO 的世界裡，穩定性是排名的基石。
當您發布一篇關於「2025 網頁設計趨勢」的文章，Google 索引了它，其他網站引用了它，用戶將它加入了書籤。這個網址（URL）就成為了該內容的唯一身分證。
如果您日後隨意更改了網址結構（例如從 /2025/trends 改成 /blog/trends），雖然內容沒變，但對搜尋引擎來說，舊的身分證失效了，原本累積的權重與外部連結也會隨之斷裂。
因此，「在網站架設初期就選定正確的網址結構」，是我們新視野設計在專案啟動時最重視的環節之一。
4.2 告別動態亂碼：結構設定的最佳實踐
許多未經優化的網站，預設會使用「動態網址」，看起來像這樣：www.example.com/?p=123&cat=7
- 沒人看得懂：用戶無法預判點進去會看到什麼。
- 缺乏關鍵字：浪費了在網址中置入 SEO 關鍵字的機會。
- 信任感低：看起來像是有毒連結或未完成的網站。
我們推薦的 SEO 友善結構：
我們通常會建議客戶將永久連結設定為 「文章名稱（Post Name）」模式，例如：www.example.com/web-design-pricing 或是包含簡單分類的結構：www.example.com/service/web-design
這樣的結構清晰、扁平，且充滿了對搜尋引擎有意義的語意訊號。
4.3 在地化 SEO 的兩難：中文網址 vs. 英文網址
這是台灣企業主最常問的問題：「我的網址應該用中文還是英文？」
- 優點：在搜尋結果頁上，台灣用戶一眼就覺得親切、相關性高。
- 當用戶複製網址要分享到 Line 或 Facebook 時，中文會被轉碼成一長串亂碼，看起來非常雜亂且過長。
- 優點：乾淨、簡短、全球通用，分享時不會變亂碼。
- 需要花時間翻譯對應的英文單字。
為了長遠的傳播便利性與系統相容性，我們通常建議使用「英文單字」作為永久連結。雖然 Google 看得懂中文網址，但乾淨的英文網址在社群分享與後台數據分析（GA4）上會更加友善。
4.4 避坑指南：日期參數的陷阱
在早期的部落格時代，很流行在網址加入日期，例如：www.example.com/2023/10/05/seo-tips
除非您是發布頻率極高的新聞媒體（如 CNN、BBC），否則我們強烈不建議企業網站使用這種結構。
為什麼？因為 SEO 內容通常追求「長青（Evergreen）」。如果您在 2025 年更新了這篇文章，內容是最新的，但網址上卻還掛著 2023 的年份，這會讓搜尋者覺得「這資訊過時了」而不願點擊。移除日期參數，讓網址保持中性（如 /seo-tips），能讓您的內容歷久彌新，隨時更新都能保持競爭力。
第 5 章：有效使用 alt 屬性：透過圖片替代文字提升 SEO 及可及性
5.1 搜尋引擎是「盲人」：它需要你告訴它圖片裡有什麼
人類瀏覽網頁時，第一眼看到的是圖片的視覺衝擊；但對於搜尋引擎的爬蟲程式來說，它們是「看不見」圖片的。它們看到的只是一行程式碼：<img src="photo.jpg">。
如果沒有額外的文字說明，Google 根本不知道這張圖是一隻貓、一台車，還是一張數據圖表。
這就是 Alt 屬性（Alternative Text，替代文字）存在的意義。它是 HTML 圖片標籤中的一個屬性，用來「用文字描述圖片的內容」。當您填寫了 Alt 屬性，就像是在這張圖片背後貼了一張便條紙，告訴 Google：「這是一張關於『台中工業風辦公室設計案例』的照片。」
5.2 Alt 屬性的三大關鍵價值
在新視野設計的開發標準中，我們堅持每一張有意義的圖片都必須包含 Alt 屬性，原因有三：
- 提升 SEO 排名（尤其是圖片搜尋）：Google 圖片搜尋（Google Images）擁有龐大的流量。透過精準的 Alt 描述，您的產品圖片更有機會出現在圖片搜尋結果中。
- 網頁無障礙 (Accessibility)：對於視障人士或使用螢幕閱讀器（Screen Readers）的用戶來說，Alt 文字是他們理解圖片內容的唯一途徑。
- 圖片失效時的備案：如果因為網路不穩或連結錯誤導致圖片「破圖（Broken Image）」，瀏覽器會顯示 Alt 文字。
5.3 如何撰寫完美的 Alt 文字？
寫 Alt 文字是一門藝術，目標是「精準、簡潔、不堆砌」。讓我們以一張「紅色 Nike 慢跑鞋」的照片為例：
❌ 糟糕的寫法（空白或檔名）：alt="" 或 alt="IMG_0023.JPG" (Google 什麼都沒學到)
❌ 作弊的寫法（關鍵字堆砌）：alt="鞋子 慢跑鞋 便宜球鞋 推薦 Nike 運動鞋 紅色 好穿" (Google 會判定為垃圾內容)
⚠ 普通的寫法：alt="鞋子" (太籠統)
✅ 完美的寫法：alt="側面視角的紅色 Nike Air Zoom 男用慢跑鞋" (具體、描述性強，且自然包含關鍵字)
5.4 裝飾性圖片怎麼辦？
並非所有圖片都需要描述。對於那些純粹為了美觀的「裝飾性圖片」（如分隔線、背景花紋、單純的色塊），如果硬要寫 Alt，反而會干擾螢幕閱讀器的使用者（他們會聽到一堆無意義的描述）。
對於裝飾性圖片，我們會保留 Alt 屬性但留空（alt=""）。這告訴搜尋引擎和閱讀器：「這張圖不重要，請直接忽略它。」這才是符合 W3C 標準的正確做法。
第 6 章：實作頁面分頁與麵包屑導航：提升用戶體驗與 SEO 排名
6.1 別讓使用者迷路：麵包屑導航 (Breadcrumbs) 的重要性
您是否曾經在逛一個大型購物網站時，點著點著就忘了自己在哪個分類裡？這時候，頁面頂端那一行小小的文字連結就成了救星。
麵包屑導航（源自童話故事《糖果屋》，沿路丟麵包屑以免迷路）通常長這樣：
首頁 > 男裝 > 運動鞋 > 慢跑鞋
在新視野設計的開發標準中，麵包屑是必備元素，它具有雙重戰略意義：
- 對用戶 (UX)：提供「位置感知」與「快速返回」的路徑。用戶想看其他運動鞋，直接點擊上一層即可。
- 對 SEO：這是告訴 Google 網站層級結構最強烈的訊號。透過麵包屑，Google 能理解「慢跑鞋」是屬於「運動鞋」的子分類。
6.2 分頁設計 (Pagination)：解決「內容過多」的兩難
當您的部落格有 500 篇文章，或是商品有 2000 件時，不可能全部塞在同一頁（那會導致載入速度過慢）。這時就需要「分頁」。
常見的分頁形式有三種：
- 標準分頁條：[1] [2] [3] ... [下一頁]
- 載入更多 (Load More)：點擊按鈕後，下方長出新內容。
- 無限捲動 (Infinite Scroll)：滑到底自動載入（像 Facebook/IG）。
很多現代網站喜歡用「無限捲動」，覺得很潮。但在 SEO 上這是一個高風險設計。Google 爬蟲不像人類會「捲動」，它通常只抓取載入的第一屏內容。如果您沒有做特殊的技術處理（如 History API），爬蟲可能永遠抓不到第二頁以後的商品，導致這些商品無法被索引。
為了 SEO 安全，我們通常建議使用「標準分頁條」，或者在實作無限捲動時，必須確保每個分頁都有獨立的網址（URL），讓爬蟲能順著連結抓取所有內容。
6.3 技術細節：rel="prev" 與 rel="next"
在處理分頁時，為了避免 Google 認為「第 2 頁」跟「第 1 頁」的內容太像而判定為重複內容，過去我們會使用 HTML 標籤 rel="prev"（上一頁）與 rel="next"（下一頁）來將這些頁面串聯成一個序列。
雖然 Google 近期表示他們已經夠聰明，不再依賴這組標籤來索引，但其他搜尋引擎（如 Bing）仍然在使用。因此，作為一個嚴謹的開發團隊，我們仍然會在程式碼中保留這組標籤，作為一種保險機制。
第 7 章：檢查並修復斷開連結 (Broken Links)：避免 SEO 分數下降
7.1 數位世界的「斷橋」：連結失效如何傷害您的網站？
想像一下，您開著車跟著導航走，結果開到一座橋前發現橋斷了，無路可走。您當下的感受一定是挫折、生氣，並且不再信任這個導航系統。
在網站中，斷開連結（Broken Links）——也就是俗稱的 404 錯誤，就是那座斷掉的橋。
- 浪費爬取預算：Google 爬蟲走到死胡同，浪費了寶貴的資源，卻沒抓到東西。
- 權重流失：如果外部網站連結到您的某個頁面（這是高品質的反向連結），結果該頁面變成了 404，那麼這股原本能提升全站排名的 SEO 權重就會憑空蒸發。
7.2 偵測工具：找出隱藏在角落的死連結
斷開連結通常發生在您刪除舊文章、修改網址，或是連結到的外部網站倒閉時。由於它們隱藏在成千上萬的頁面中，肉眼很難發現。
在新視野設計的維護流程中，我們依賴專業工具來進行「全站掃描」：
- Google Search Console (GSC)：這是最權威的來源。在「索引 (Indexing)」報表中，Google 會明確列出它找不到的 404 頁面。
- Screaming Frog SEO Spider：這是工程師級的檢測工具，能模擬爬蟲爬遍全站，抓出所有內外部的斷鏈。
- 線上檢測插件：對於內容管理者，我們也可以安裝 Chrome 外掛（如 Check My Links）來即時檢查當前頁面的連結健康度。
7.3 修復策略：301 轉址與客製化 404 頁面
發現斷鏈後，該怎麼辦？我們有兩種處理邏輯：
1. 使用 301 重定向（最佳解）：
如果該頁面只是搬家了，或者您有另一篇內容相似的文章，請務必設定 301 重定向。例如：舊的「2023 產品型錄」失效了，將它轉址到「2024 最新型錄」。這樣既能留住訪客，又能保留 SEO 權重。
2. 設計「有溫度的」客製化 404 頁面：
如果內容真的永久刪除了，也沒有替代頁面，那麼 404 錯誤是不可避免的。這時，網頁設計的功力就派上用場了。千萬不要使用瀏覽器預設的冷冰冰白底黑字錯誤頁。我們會為客戶設計專屬的 404 頁面：
- 幽默感：放一張可愛的圖片或有趣的文案（例如：「哎呀！這一頁被外星人綁架了」），化解用戶的挫折感。
- 導航指引：提供「回到首頁」、「熱門文章」或「站內搜尋框」的按鈕。
數據顯示，一個設計良好的 404 頁面，能讓原本要離開的訪客，有 20% 的機率繼續留在網站內瀏覽。
第 8 章：導入 SSL 憑證：提高網站安全性並增強搜尋引擎信任
8.1 網址列上的「鎖頭」：信任的起點
當您打開瀏覽器，網址列左邊那個小小的「鎖頭圖示」，或是網址開頭的 https://，代表這個網站安裝了 SSL 安全憑證。
反之，如果您的網站還停留在舊式的 http://，Google Chrome 瀏覽器會毫不客氣地在網址列標示「不安全 (Not Secure)」的紅色警告。這對品牌形象是毀滅性的打擊。
8.2 HTTPS：Google 公認的排名訊號
早從 2014 年開始，Google 就正式宣佈將 HTTPS (Hyper Text Transfer Protocol Secure) 列為影響搜尋排名的因素之一。
- 資料加密：SSL 的核心功能是加密傳輸。它確保用戶與網站之間傳輸的資料（如密碼、信用卡號、個資）不會被駭客中途攔截。
- 排名加分：在內容品質相同的情況下，Google 會優先讓有 HTTPS 的網站排名靠前。
- 數據完整性：使用 HTTPS 的網站，在 Google Analytics 中能看到更完整的參照連結（Referral Data）來源。
8.3 從 HTTP 到 HTTPS 的無痛升級
許多客戶擔心：「裝了 SSL 會不會很麻煩？網站會不會壞掉？」在新視野設計的網站建置標準中，SSL 是預設配備。我們會處理所有複雜的技術細節：
- 憑證安裝：我們協助申請並安裝憑證（現今已有 Let's Encrypt 等免費且高品質的憑證方案）。
- 強制 301 跳轉：我們會設定伺服器規則，強制將所有 http:// 的流量自動轉址到 https://。
- 解決「混合內容 (Mixed Content)」：這是升級最常遇到的問題。如果網站變成了 HTTPS，但裡面的圖片連結還是 HTTP，鎖頭就不會出現。我們會進行全站掃描，修復這些不安全的資源連結。
全文總結：技術 SEO，是網站的隱形護城河
恭喜您讀完了這兩篇關於「SEO 基礎開發與設計」的深度文章。我們從上集的 URL 結構、H 標籤、RWD 設計，一路談到下集的 301 重定向、網站速度優化與 SSL 安全憑證。
這 16 個技術章節，揭示了一個殘酷但也真實的現狀：「SEO 不只是行銷人員的工作，更是開發團隊的責任。」
一個金玉其外、敗絮其中（程式碼雜亂、速度慢、結構差）的網站，無論您投入多少預算寫文章、買廣告，都像是在沙灘上蓋城堡，地基不穩，隨時會倒塌。
在 新視野設計，我們堅持「SEO Driven Development（SEO 驅動開發）」。我們不只是在「做網頁」，我們是在為您打造一個符合 Google 最高標準的數位資產。我們處理那些枯燥、複雜且看不見的技術細節（301、404、Canonical、Schema），讓您可以專注於最重要的事情——經營您的品牌與業務。
第 9 章：進階技術 SEO 常見問題 (Q&A)
為了幫助您釐清下集的進階技術概念，我們整理了 4 個關鍵問答：
Q1: 安裝 SSL 憑證需要每年付費嗎？
A: 不一定。目前有非營利組織提供的 Let's Encrypt 免費憑證，安全性與付費版無異，且會自動續期，適合大多數形象網站與部落格。但如果您是大型電商或金融機構，建議購買付費的 EV SSL（企業驗證憑證），會有更高的保險額度與企業名稱顯示。
Q2: 網站改版忘了做 301 重定向，還有救嗎？
A: 黃金救援時間通常在 2-4 週內。如果發現流量暴跌，請立刻補做 301 設定。雖然這段時間流失的排名可能需要一點時間才能爬回來，但補救永遠比不做好。如果拖太久，Google 已經把舊網址從索引中刪除，那就要花更多力氣重新經營了。
Q3: 為什麼我的網站有些圖片跑不出來，瀏覽器顯示「混合內容」？
A: 這通常發生在網站從 HTTP 升級到 HTTPS 後。原因是網頁雖然加密了，但裡面引用的圖片或腳本（Script）連結仍然是舊的 http:// 開頭。瀏覽器為了安全會封鎖這些資源。解決方法是全面搜尋資料庫，將所有 http:// 替換為 https://。
Q4: 404 頁面太多會被 Google 懲罰嗎？
A: 404 本身是網路的自然現象，Google 不會因為您有 404 頁面就直接懲罰全站排名。但如果 404 頁面過多（例如佔全站 50%），意味著使用者體驗極差，且浪費爬蟲預算，這確實會間接導致整體權重下降。定期清理與修復是必要的。
