圖樂資訊

手機點第一篇卻開啟第二篇？我排查文章卡片連結錯位的過程

發布時間：2026/7/18

作者：沈嘉怡

我的網站曾出現手機首頁第一篇文章點進去卻顯示第二篇內容，而電腦版正常的問題。本文記錄我如何比對卡片標題、網址、資料庫 ID 與排序方式，找出文章連結錯位的原因並完成驗證。

手機點第一篇卻開啟第二篇？我排查文章卡片連結錯位的過程－圖片1
手機點選第一篇文章卻開啟第二篇內容的連結錯位示意圖

手機點第一篇，顯示的卻是另一篇內容

這次問題最早是在手機上發現的。

我開啟網站首頁後，看到文章卡片的圖片、標題和觀看次數都能正常顯示。但是點選第一篇文章後，進入的頁面卻是第二篇文章的標題和內容。

我接著返回首頁測試第二篇文章，結果它又開啟了第一篇文章的內容。兩篇文章就像互相交換了連結一樣。

奇怪的是，使用電腦版網站測試時，文章卡片和內容並沒有出現相同問題。因此，我一開始懷疑可能是手機瀏覽器快取，或者手機版使用了另一套文章排列方式。

我先在手機瀏覽器重新整理頁面，也嘗試關閉分頁後重新開啟網站，但是問題仍然存在。這表示它不只是瀏覽器暫時保留舊畫面的問題。

為了避免只憑畫面判斷，我把檢查範圍分成三個部分：

  1. 首頁文章卡片顯示的標題和圖片。
  2. 點選卡片後產生的文章網址。
  3. 文章頁面實際讀取的資料。

這三個部分看起來很相似，但實際上可能使用不同的識別方式。首頁卡片可以顯示正確資料，不代表卡片裡的連結一定指向同一篇文章。

我也發現，當時部分文章網址仍然使用數字編號，例如：

/article/01

這種網址看起來很簡單，但是如果數字代表的是文章在列表中的排列位置，而不是固定的文章識別碼，新增文章或改變發布順序後，原本的第一篇就可能變成第二篇。

這時候首頁仍然可以顯示新的排序結果，但舊的數字網址卻可能讀取另一筆內容，最後就會出現「點第一篇，卻開啟第二篇」的情況。

使用固定網址讓手機文章卡片連到正確內容的修復示意圖

問題不在手機，而在文章網址的對應方式

進一步檢查後，我確認手機版並沒有另外儲存一份文章內容。手機和電腦讀取的都是同一個資料庫，真正的差異在於頁面產生文章連結的方式。

當時舊網址的數字編號是按照文章發布時間和排列位置動態計算的。發布新文章後，文章在列表中的位置會改變，原本代表某篇文章的數字也可能跟著移動。

例如，今天排在第一位的文章使用：

/article/01

如果明天發布一篇更新的文章，原本的第一篇可能被移到第二位。假如卡片與文章頁面使用的排序結果不同，01 就可能指向另一篇內容。

這也解釋了為什麼直接交換兩篇文章的連結不是可靠的修復方法。即使當下看起來恢復正常，只要之後新增文章或調整發布日期，同樣的錯位仍然可能再次發生。

我最後改用固定英文網址作為每篇文章的主要識別方式，例如：

/article/mobile-article-card-link-content-mismatch

這個網址在文章發布後不會因為排序改變。無論文章出現在首頁第一位、第二位，還是被移到分類頁面，它仍然會連到同一筆資料。

修改後，我把以下位置全部改為使用文章自己的固定網址：

  1. 首頁文章卡片。
  2. 分類頁面的文章列表。
  3. 文章底部的推薦內容。
  4. 搜尋引擎使用的 canonical 網址。
  5. 網站地圖中的文章網址。

至於已經分享出去的舊數字網址，我沒有直接刪除，而是讓它們使用 301 重新導向到正確的新網址。

這樣既能避免舊連結立即失效，也能讓搜尋引擎逐漸確認哪一個才是文章的正式網址。

完成這項修改後，每張文章卡片、固定網址和文章內容就形成一對一的對應關係。即使日後繼續發布新文章，也不會再因為排序變動而互相交換內容。

在資料庫中檢查文章 ID 固定網址與舊數字編號的結果

從資料庫確認每篇文章的固定對應

程式修改完成後，我沒有立刻認定問題已經解決，而是繼續檢查資料庫中的文章資料。

我把文章的 ID、標題、固定網址、內容型別和舊數字編號一起列出來比對。這樣可以確認每篇文章是否擁有自己的固定網址，也能檢查是否有兩篇文章意外使用相同的識別資料。

我主要檢查以下欄位：

  1. id：資料庫中的文章識別碼。
  2. title：文章標題。
  3. slug：文章使用的固定英文網址。
  4. contentMode：確認內容屬於普通文章還是舊圖集。
  5. legacyArticleNumber：保留給舊數字網址使用的固定編號。

這次檢查讓我確認，文章的顯示順序和文章本身的識別資料必須分開處理。

顯示順序可以根據發布時間改變，但是文章的 ID 和固定網址不能跟著改變。否則首頁只要重新排序，舊連結就可能指向另一篇文章。

修復後的實際測試

完成資料庫和網址檢查後，我分別在手機和電腦進行以下測試：

  1. 從首頁點選第一篇和第二篇文章。
  2. 比對卡片標題、瀏覽器網址和文章頁標題。
  3. 從分類頁面重新進入同一篇文章。
  4. 點選文章底部的推薦內容。
  5. 直接開啟文章的固定英文網址。
  6. 測試舊數字網址是否正確使用 301 跳轉。
  7. 發布新文章後，再次確認原有網址沒有改變。

測試結果顯示，手機文章卡片已經能夠開啟正確內容，電腦版也維持正常。發布新文章後，原有文章的固定網址和內容對應關係也沒有再次移動。

這次問題讓我學到的事情

這次錯位問題看起來像是手機版故障，實際原因卻是文章排序和網址識別方式混在一起。

如果只檢查畫面，很容易把問題誤認為瀏覽器快取、手機版樣式或資料庫內容錯誤。真正有效的方法，是把文章卡片、連結、網址引數和資料庫記錄逐一比對。

經過這次處理，我整理出幾個以後會繼續遵守的做法：

  1. 每篇文章發布時就建立固定且唯一的英文網址。
  2. 不使用文章目前的排列位置作為永久識別方式。
  3. 首頁、分類、推薦、canonical 和 sitemap 使用同一個固定網址。
  4. 舊網址使用固定的 301 對應，不再動態計算。
  5. 修改完成後，同時使用手機和電腦進行實際點選測試。

這次修復不只是把兩篇文章的連結換回來，而是把容易隨排序改變的網址方式，改成能夠長期穩定使用的文章識別方式。