跳至主要内容

soft 404

404​

狀態回應碼 404 代表找不到結果，404 (Not Found)，通常在網頁上會出現 404 代表 web server 沒有該路由資源，或是其他情況

  1. 連結到不存在或已被移動的資源
  2. URL 打錯
  3. 伺服器配置問題

當今天的路由是

- https://example.com
    - /blog1
    - /blog2
    - /blog3

代表可以成功拜訪 https://example.com/blog1、https://example.com/blog2、https://example.com/blog3，但如果你今天嘗試拜訪 https://example.com/blog4 的話，因為沒有該路由，因此會回報 404 (Not Found)。

soft 404​

當資源不存在，回覆非 404 的狀態碼 e.g. 200，稱為 soft 404。

檢索器不喜歡看到 soft 404，如果今天檢索到太多回應 soft 404 的網址，他會覺得你在浪費他的檢索資源，因此該怎麼處理資源不見的情況呢？ 除了他覺得你在浪費檢索資源，他也認為這在 UX 上並不友善，因此必須明確跟訪客說這一頁是沒東西的。

建議​

  1. 當資源查找不到時
  • 正確回應 404 status code，呈現一個客製化的 404 頁面，稱為 soft 404，中文叫『轉址式 404』。
fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    window.location.href = '/not-found'; // redirect to 404 page on the server.
  }
})

以下是 Google 對於 soft 404 頁面設計的建議：

  • 明確告訴訪客，系統找不到他們所需的網頁。請使用友善且具吸引力的語句。
  • 確認 404 網頁與您網站的其餘部分使用相同的風格和外觀 (包括導覽方式)。
  • 考慮加入連結，指向網站上最熱門的幾篇文章以及首頁。
  • 考慮為使用者提供回報無效連結的方法。
  • 將 noindex 新增至 meta <meta name="robots" content="noindex">
fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other robots meta tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})
  1. 當資源已被轉移時

若是今天頁面 /blog-1 被移至 /new-blog-1 時，為了不要浪費之前已建立起來的 SEO 成就，就必須跟檢索器說該資源已被轉移，因此要回傳 301 (Moved Permanently) 或是 302 (Found (Previously "Moved temporarily"))，差別在於 301 是永久轉移，而 302 是暫時轉移。

References: