第四章：網站 SEO 前端基礎：開發與設計技巧全攻略（下）

當網站搬家或內容更改URL時,301(永久)轉址就像貼了新門牌給訪客和搜尋引擎,告訴它們「我們已經搬到新地址啦」。Google建議「在需要變更頁面URL時,盡可能使用永久伺服器轉址」,這是確保搜尋引擎和使用者都正確到達新頁面的最佳方式。簡單來說,301轉址會告訴Google你的內容永久移動到新網址,能將原本舊頁面的SEO權重傳遞給新頁面。

採用301轉址有什麼好處?首先,它能避免原有的流量和權重浪費,將排名影響留在新地址;同時使用者也能自動被導向新位置,不會遇到404死鏈。若只是短期維護或測試網站,則可使用302/307等臨時轉址;但一旦決定永久搬家,就應該使用301或308等永久轉址代碼,否則Google可能仍將注意力放在舊URL上。

最穩妥的做法是在伺服器端設置轉址規則。以下是常見範例:

Apache (.htaccess): 使用Redirect或mod_rewrite。例如:

# 永久轉址:將 /old-page.html 轉到新網址
Redirect 301 /old-page.html https://example.com/new-page.html

或用mod_rewrite:

RewriteEngine On
RewriteRule ^old-page\.html$ /new-page.html [R=301,L]

PHP程式碼: 若使用動態頁面,也可在原頁面加上HTTP標頭:

<?php
  header('HTTP/1.1 301 Moved Permanently');
  header('Location: https://example.com/new-page.html');
  exit();
?>

這段程式碼一執行就會告訴瀏覽器和Google「頁面已永久轉址」。

提示: 設定好301轉址後,記得更新站內所有指向舊頁的連結,或者使用轉址將它們導到新頁。避免連續多重轉址(Redirect Chain),因為過多跳轉反而會拖慢速度。正確使用301轉址,才能最大程度地保留原有排名權重。

網站速度不快就等於慢半拍!頁面載入速度直接影響使用者體驗,也已成為Google搜尋排名的關鍵因素。Ahrefs指出,頁面速度是「用戶體驗和網站效能的關鍵因素」,Google自2018年起就將行動裝置載入速度納入排名因素,2021年更把Core Web Vitals(核心網頁效能指標)正式列入排名算法。簡單來說,如果你的網頁載入超過3-4秒,訪客很可能就跑光光了。

提升使用者體驗: 沒人喜歡等,速度快的網站讓訪客更願意逛下去;反之,如果頁面龜速載入,訪客容易「跳出」,對SEO很不友善。

搜尋引擎友善: Google明確表示「載入速度就是效能」,建議開發者優化圖片、腳本等資源來改善速度。快速的網站能得到搜尋引擎的青睞,也讓排名更穩定。

行動優先: 行動網路的載入速度更是關鍵。根據Ahrefs,若網站超過3秒沒完成載入,就可能失去一半以上的用戶。

讓網站飛快載入的常見方法包括:快取(Caching)、檔案壓縮(Minify)和延遲載入(Lazy Loading)。

瀏覽器快取: 透過設定資源快取,讓CSS、JavaScript、圖片等靜態資源在使用者重訪時直接從本地載入,降低伺服器請求次數。例如在Apache的.htaccess加入:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType text/css   "access plus 1 week"
  ExpiresByType application/javascript "access plus 1 week"
</IfModule>

上面設定讓JPEG圖片快取一年,CSS/JS快取一週。下次訪客再來,就直接從瀏覽器快取撈取,網頁載入時間自然縮短。

檔案壓縮: 將HTML、CSS、JavaScript原始碼去除不必要的空白和註解,以減小檔案尺寸。舉例來說,可以將styles.css壓縮成styles.min.css,並在頁面引用壓縮後的版本。原本使用:

<link rel="stylesheet" href="/css/styles.css">
<script src="/js/script.js"></script>

壓縮後變成:

<link rel="stylesheet" href="/css/styles.min.css">
<script src="/js/script.min.js"></script>

檔案小了,自然下載更快。

延遲載入(Lazy Loading): 不是所有內容都要在一開始就載入。一般做法是先載入首螢幕內容,其他圖片或影片「用到時才載」。對圖片而言,只要在<img>標籤加上loading="lazy"屬性即可啟用(現代瀏覽器多已支援):

<!-- 圖片懶加載範例 -->
<img src="banner.jpg" alt="網站橫幅圖" loading="lazy">

這樣瀏覽器會等到用戶滾到圖片位置時才載入圖片,減少初始請求數量,加速首屏渲染。

提示: 可以利用Google PageSpeed Insights、Lighthouse等工具分析網站瓶頸,針對「圖片未壓縮」或「CSS未優化」等問題逐一改進。此外,結合CDN、GZIP壓縮等也能進一步提升速度;載入外部腳本時,別忘記加上async或defer屬性,以避免阻塞頁面渲染。

robots.txt檔案就像網站的交通號誌,用來告訴搜尋引擎機器人哪些頁面可以爬、哪些不能爬。Google指出:robots.txt主要是用來控制爬蟲的訪問,以避免過度請求壓垮伺服器;它並非讓頁面「不見」的機制。換句話說,如果想讓某頁面不被收錄,應該使用noindex或密碼保護,而不是只在robots.txt阻擋。Yoast也說明,robots.txt能幫助網站管理者「控制搜尋機器人行為、管理訪問範圍,限制特定區域的索引並調整爬行頻率」。簡單來說,這份公開的檔案可以引導爬蟲「去哪爬、哪裡不爬」,讓搜尋引擎更有效率地抓取你允許的內容。

控制爬行流量: 若網站很大或頻繁更新,想避免搜尋機器人反覆爬掃某些區域(如後台、登入頁面),可在robots.txt使用Disallow封鎖,減少不必要的伺服器負擔,讓爬行資源更集中在重要頁面。

引導搜尋重點: 透過Allow、Disallow,可引導Googlebot專注抓取重要內容,忽略不需要或重複的頁面,提升爬取效率,將搜尋權重集中在業務關鍵頁面。

使用者隱私: robots.txt是公開文件,切勿把敏感資訊寫進去;封鎖爬行並不等於不被收錄。若想真正讓頁面消失,必須使用noindex或其他手段。

robots.txt必須放在網站根目錄,基本格式如下:

User-agent: *
Disallow: /admin/
Disallow: /private/
Allow: /
Sitemap: https://example.com/sitemap.xml

上例表示「所有爬蟲(*)都禁止存取/admin/與/private/目錄,但其他路徑都允許爬行」。最後一行Sitemap:則告訴搜尋引擎網站地圖的位置,幫助它更快找到所有頁面。你也可以針對不同爬蟲設定規則,例如:

User-agent: Googlebot
Disallow: /secret/
User-agent: Bingbot
Disallow:

Disallow:後留空即表示不封鎖任何頁面(完全開放)。

儘量只封鎖必要的區域。注意:robots.txt不能防止頁面被列入搜尋結果,只能阻止爬行。若要阻止收錄,必須用noindex標籤或密碼保護。

提示: 編輯robots.txt後,請利用Google Search Console的「robots.txt測試工具」檢查規則是否正確。並經常查看「封鎖的資源」報表,確保沒有誤封重要檔案。記得robots.txt是公開文件,依序寫入規則非常重要,避免格式錯誤導致爬蟲誤動。

永久連結(Permalink),字面意思就是內容的「永久網址」。它是加在域名之後的文字,用來讓訪客和搜尋引擎辨識頁面內容。好的永久連結短而有意義,能讓人一眼看出這個網址在談什麼。Yoast提到,可讀又簡潔的網址比一堆亂碼更誘人分享;亂碼網址既不專業,也不易被複製和點閱。

易讀易懂: 好的網址通常包含關鍵字,直接說明頁面主題。相反,像?p=101這樣只有編號的網址,就算Google還能收錄,使用者和搜索引擎也難以從中看出內容。只要網址含有與主題相關的詞,就在告訴大家「這頁講的是什麼」。

分享友好: 清晰的網址更方便複製與分享,用戶點擊意願也更高。舉例來說,example.com/2025-market-trends直白明瞭,比起example.com/?id=2345更吸引人,搜尋時也更容易匹配到關鍵字。

輕微加分: 搜尋引擎在評估內容時,短而有意義的網址也能提供額外提示。將主要關鍵字放在網址中,可以在排名上獲得一點小小優勢(雖然重點還是要在內容品質)。

若使用WordPress等CMS,可在「設定」裡選擇「文章名稱」作為固定連結結構,確保每篇內容的slug都簡潔有意義。自行撰寫連結時,範例如下:

<!-- 假設要連結到一篇SEO教學頁 -->
<a href="https://example.com/seo-intro">SEO前端教學</a>

以上連結中的/seo-intro就是一個描述性的永久連結。又如,如果內容是「2025年市場趨勢」,可設置:

<a href="https://example.com/2025-market-trends">2025年市場趨勢分析</a>

小撇步: 網址中盡量使用英文或有意義的詞彙,不要亂用大量數字或參數。設定好後不要輕易更動;若真的要改變結構,務必使用301轉址將舊網址導至新網址,才不會丟掉累積的排名。例如在伺服器設定:

Redirect 301 /old-url https://example.com/new-url

這樣Google就能把舊網址的價值傳給新網址。

提示: 儘量讓網址維持簡潔、符合語意,避免堆砌關鍵字。如在中文網站,可以用拼音或簡單英文翻譯。好的URL就像給文章取了個易懂的名字,有助於使用者和搜尋引擎記住與分享。

網頁上的圖片不只要「好看」,替代文字(Alt屬性)也很重要。Google Search Central明確指出:「在為影像提供描述性元資料時,最重要的屬性就是alt文字,且這也提升了無法看到圖片的使用者的可及性」。Yoast也提醒:用精心撰寫的alt文字可以加強頁面訊息在搜尋爬蟲心中的意義,並改善網站無障礙。簡單來說,alt文字能讓搜尋引擎「看懂」圖片,大幅提高在圖片搜尋(Google圖片)中的曝光機會,還能讓視障使用者透過螢幕閱讀器了解圖片內容。

關鍵字相關: 在alt中加入描述性的文字,能讓圖片關鍵字被搜尋到。Google透過alt瞭解圖片裡「有什麼」,並將其與頁面主題連結。舉例,一張帽子圖片若寫了alt="紅色棒球帽",當有人搜尋「紅色帽子」時就有機會出現你的圖片。

無障礙加分: 螢幕閱讀器會讀出alt文字,讓視障朋友也能「看」到圖片內容。對於純裝飾用的圖片,可以把alt留空(alt=""),這樣輔助工具就會略過它。

SEO友好: 正確使用alt屬性等於幫頁面「加插隱形文字」。記得不要刻意堆砌關鍵字,而是寫簡潔且與圖片相關的文字,傳達真正資訊。

在HTML的<img>標籤中寫入alt屬性,例如:

<img src="/images/hat.jpg" alt="紅色的棒球帽">

這樣搜尋引擎就知道這張圖是「紅色的棒球帽」了。如果圖片純粹是裝飾,例如分隔線圖,可將alt設為空字串,這樣使用者和搜索引擎都知道不必過度關注它:

<img src="/images/decorative-line.png" alt="">

上例中,搜尋引擎會略過這張裝飾圖,不會誤以為這是有意義的內容。提醒您:每張圖片都應該有alt屬性,但文字要簡潔、符合圖意。若使用WordPress,可在媒體庫的「替代文字(alt)」欄位直接填入描述;如果真的找不到合適說明,也可以留空。

提示: 除了img,在使用圖示或SVG時,也要加上對應的aria-label或<title>來描述;確保所有圖片都有文字替代,才能兼顧SEO與無障礙。

當文章、商品列表或搜尋結果眾多時,分頁機制(Pagination)和麵包屑導航(Breadcrumbs)是提升用戶體驗的好幫手。分頁能將大量內容拆成多頁,讓用戶透過「上一頁/下一頁」或數字按鈕翻閱。Google建議「每頁都要有唯一URL」,並為每個分頁設置canonical,讓搜尋引擎將它們視為獨立頁面。切忌只用#片段讓分頁切換,否則Google不會認為那是新頁面。每個分頁應有可訪問的連結,才能被Googlebot抓到並索引。

麵包屑導航則清楚顯示當前頁面在網站階層中的位置,比如「首頁>書籍>暢銷排行」。它不但告訴使用者「你現在在哪裡」,也讓搜尋引擎理解頁面結構。Google文件提到,麵包屑會顯示頁面在網站階層中的位置,方便使用者往上層導航;搜尋結果頁上也常會顯示麵包屑,作為豐富摘要的一部分。總之,麵包屑可讓搜尋引擎知道頁面位置,並提升搜尋的點擊率。

分頁範例: 在文章列表頁標示分頁導覽:

<nav aria-label="分頁">
  <a href="/news?page=1">1</a>
  <a href="/news?page=2">2</a>
  <a href="/news?page=3">3</a>
  <a href="/news?page=2">下一頁 »</a>
</nav>

確保每個分頁的URL不同(可用query參數或漂亮路徑),並在<head>中用<link rel="canonical">指向當前頁,讓Google明白每頁都是獨立內容。

麵包屑範例: 利用語意化HTML,將麵包屑置於<nav>裡並用有序列表表示:

<nav aria-label="麵包屑導航">
  <ol>
    <li><a href="/">首頁</a></li>
    <li><a href="/books">書籍</a></li>
    <li>暢銷排行</li>
  </ol>
</nav>

此範例表示「首頁>書籍>暢銷排行」。使用<nav>和<ol>等語意標籤有助搜尋引擎理解結構,也符合結構化資料格式需求。完成後,你還可以在Search Console的豐富摘要測試工具檢查麵包屑是否被正確抓取。

提示: 如果網站包含大量分頁和導航,建議建立完整的XML Sitemap,確保搜尋引擎不漏抓任何重要頁面。此外,在分頁內容有限時,可在頁尾加入「第一頁」或「首頁」連結,方便使用者快速返回頂層。

斷開的連結就像網站的絆腳石,一旦使用者踩到就可能流失流量,也浪費原本可能的SEO權重。Ahrefs指出,修復斷鏈「幾乎肯定會對你的排名產生正面影響」。換句話說,如果網站上有連向已刪除或不存在頁面的連結,點擊它只會看到404頁面,錯過傳遞流量及連結權重的機會。

權重浪費: 斷開的外部連結會造成「link juice」流失。正如Ahrefs所說,這些無效鏈結在PageRank演算法中已經失去價值,不會給網站帶來排名優勢。

用戶體驗: 想像訪客點了「詳細資訊」卻跳到404,錯誤頁面會讓他們馬上關閉分頁,對網站的停留時間和整體流量都造成打擊。

定期使用爬蟲工具(如Google Search Console的「覆蓋範圍」報表、Ahrefs Site Audit、Screaming Frog等)掃描網站,找出斷開的內部與外部連結。找到後可以採取以下對策:更新連結目標、刪除過時連結或設置轉址。舉例來說:

<!-- 錯誤範例:指向已刪除的頁面 -->
<a href="/old-page.html">舊版產品頁面</a>
<!-- 修正範例:連到新頁面 -->
<a href="/new-page.html">最新產品頁面</a>

你也可以在伺服器上設置301轉址,讓老網址自動導到新網址:

# 將已刪除的舊網址永久轉到新網址
Redirect 301 /old-page.html https://example.com/new-page.html

提示: 修復斷鏈後,建議再次用爬蟲檢查是否還有其他404錯誤。如果外部網站的連結失效,考慮聯繫對方更新連結,或找其他可信網站以取得同類資訊。保持內容更新、移除過時資訊,也能減少未來斷鏈的產生。

分析競爭對手網站的關鍵字是一個很有效的學習方式。透過查看對手排名的關鍵字,可以快速掌握哪些詞在你的領域中有價值。Ahrefs說明,競爭者關鍵字分析的核心是找出「對手排名但你沒有涵蓋」的關鍵詞。換句話說,如果競爭者某些相關詞有排名,那些詞很可能也是你應該考慮的目標。

快速找機會: 直接從競爭者的成功中學習,有助發現自己可能忽略的熱門關鍵字或長尾詞。

評估競爭強度: 分析你和對手誰的排名更高,可以了解這些關鍵字的難度及流量潛力。

優化內容策略: 得知對手重點關鍵詞後,可對比自身內容差距,補足不足,並創造更有價值的內容搶占排名。

使用競爭分析工具(如Ahrefs、SEMrush、Moz等)進行關鍵字研究。常見做法:

確定競爭者: 首先找出主要競爭對手,通常是Google搜尋同一主題時,經常出現在前幾頁的網站。

挖掘關鍵字: 在工具中輸入競爭者網站域名,查看他們帶來流量的關鍵字(Organic Keywords)。Ahrefs的「Content Gap」功能就是專門用來找出競爭者關鍵字的好幫手。

分析與套用: 將挖出的關鍵字與自己網站已有的關鍵字做比較,挑出高流量或高轉換潛力的詞,並規劃內容或調整現有頁面以爭取排名。

提示: 分析對手時,盡量選擇業務模式和內容主題相近的網站。如果對手使用的關鍵字與你服務範圍太不相關,就不一定有參考價值。別只是簡單複製,更要結合創新與自身優勢,將學到的長處融入自己的內容,才能真正提升網站競爭力。

網站導入SSL憑證(HTTPS)不僅保護使用者資料安全,也對SEO有加分效果。Google曾宣布開始將HTTPS作為排名信號之一,目前影響範圍約占全球搜尋的不到1%,仍屬輕微因素;但Google表示未來可能會逐步加強此訊號,以鼓勵更多網站使用加密連線。換句話說,擁有SSL的網站比只用HTTP的網站更能得到Google的信任。

使用者信任: HTTPS可加密數據傳輸,提高網站安全性,瀏覽器會顯示鎖頭圖示,讓訪客更放心。Google官方也鼓勵站長「全網走HTTPS」,推廣安全瀏覽。

SEO信號: 雖然排名加分目前有限,但確實存在微弱加權。完成HTTPS後,記得更新網站地圖和Search Console中設定的網址為新協議,確保安全版頁面能被完整索引。

未來趨勢: 隨著瀏覽器對非HTTPS網站標示「不安全」,加上搜尋引擎的偏好及政策轉向,提早切換可以避免未來的麻煩。

取得SSL憑證後,將網站預設從HTTP轉到HTTPS。對於Apache伺服器,可在.htaccess加上:

# 強制將所有流量導向HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

對Nginx可設定:

server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

設定完成後,務必檢查是否有「混合內容」(即部分資源仍透過HTTP載入)的問題,並將站內所有連結與腳本資源更新為HTTPS。最後,在Google Search Console重新提交HTTPS版的網站地圖,確保安全版網頁被正確收錄。

提示: 選用可信任的SSL憑證頒發機構並使用至少2048-bit的加密金鑰,以確保安全性。如使用Let's Encrypt等免費憑證,也要定期自動更新,避免憑證過期導致網站警告。

Google Search Console是Google提供的免費工具,能讓你監控和維護網站在Google搜尋中的表現。透過Search Console,站長可以看到關鍵數據:包括網站的搜尋點擊率、關鍵字排名、點擊次數、曝光次數等;也能檢查爬蟲狀況,如索引收錄頁面數量、爬行錯誤、行動裝置可用性問題等。

問題通知: Search Console會自動發送警告,告訴你網站是否有嚴重問題,例如抓取錯誤、手動處罰或索引問題。這讓你可以及時修復錯誤,避免排名滑落。

關鍵字洞察: 可以查看哪些關鍵字帶來流量,曝光和點擊數據一目了然,幫助你了解訪客是透過什麼搜尋詞找到網站,也可以評估哪個頁面最受歡迎。

網站診斷: 能檢查robots.txt與Sitemap是否正確、測試網站在行動裝置的使用體驗、檢測速度表現與安全性(如是否被注入惡意軟件)等。

要使用Search Console,首先需要驗證網站所有權。最常見的方法是在<head>中加入一行驗證碼,例如:

<!-- Google Search Console 網站驗證範例 -->
<meta name="google-site-verification" content="ABCDEFG123456">

或者將Google提供的HTML驗證檔上傳到網站根目錄。驗證完成後,你就可以提交網站地圖(Sitemap),讓Google更快速抓取內容。日常可定期查看「搜尋成效」、「覆蓋範圍」等報表,追蹤排名變化與錯誤。

提示: Search Console也能檢測行動裝置的可用性問題、Core Web Vitals表現等。別忘了將HTTP與HTTPS(以及含www/不含www)的多個版本都驗證一次,確保不同版本的資料都蒐集得到。另外,可結合Google Analytics進行更深入的流量分析。