跳至內容
Mera News

出版商指南，第 2 章

行動裝置與桌機上的頁面結構

最後審閱：2026 年 11 月

讀者會很快判斷一個新聞頁面值不值得留下來。標題應該迅速出現，頁面應該保持穩定，每一次點選都應該得到回應。Google 也是以網頁的行動版建立索引，所以手機版面同樣是搜尋時真正算數的版本。

應該達成的數字

Google 的 Core Web Vitals 提供三項指標，每一項都有明確的目標。

指標衡量內容良好
Largest Contentful Paint (LCP)載入2.5 秒以內
Interaction to Next Paint (INP)對輸入的回應200 毫秒以內
Cumulative Layout Shift (CLS)視覺穩定性0.1 以下

請以頁面載入的第 75 百分位數來衡量，行動裝置與桌機分開計算。當三項指標在該百分位數都達到目標，頁面才算通過。

請使用來自真實造訪的實際資料：Search Console 的 Core Web Vitals 報告、PageSpeed Insights 或 Chrome User Experience Report。Lighthouse 在實驗環境中很有用，但它無法測量 INP，只會改為回報 Total Blocking Time。

Google 表示並不存在單一的網頁體驗訊號。它確實說明 Core Web Vitals 會被其排名系統使用，而網頁體驗的其他面向並不會直接幫助網站排名，不過仍可以讓網站更好用。

一個頁面，適用兩種螢幕

Google 建議採用響應式設計，因為這是最容易實作與維護的模式。同一份 HTML 服務所有裝置，因此內容與中繼資料不需額外處理就能一致。如果您另外經營行動版頁面，請讓以下項目與桌機版完全相同：

  • 主要內容
  • 標題
  • 結構化資料
  • Robots meta 標籤（一個多餘的 noindex 可能讓行動版頁面無法進入索引）

先從 viewport 標籤開始，再確認頁面在 320 CSS 像素寬度下能夠重新排版，而且不需要左右捲動。

<meta name="viewport" content="width=device-width, initial-scale=1">

在行動裝置上

  • 先放標題、作者署名與可見的日期，再放主圖或開頭段落。
  • 文章內文要保留在 HTML 中。如果「繼續閱讀」按鈕要等點選後才載入其餘內容，這些文字可能會對 Google 隱藏，因為 Google 不會點選、滑動或輸入。
  • 觸控目標至少要有 24 x 24 CSS 像素，這是 WCAG 2.2 AA 的最低要求。選單與關閉按鈕則建議做到 44 x 44，也就是 AAA 等級。
  • 固定式頁首要保持矮小，並把 scroll-padding-top 設成它的高度，讓取得焦點的連結不會被它遮住。

在桌機上

  • 內文每行不超過 80 個字元，中文、日文與韓文則是 40 個。這是 WCAG AAA 的準則，對每一位讀者都有幫助。
  • 段落內的行距至少設為 1.5。
  • 輔助內容放在側邊欄，而且載入時不要讓文章移位。

更快的載入速度

新聞頁面上最大的元素通常是主圖。請把它當作頁面上最重要的請求。

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • 絕對不要對 LCP 圖片使用延遲載入。
  • 把它放在初始 HTML 中，讓瀏覽器在任何指令碼執行之前就能找到它。
  • fetchpriority="high" 最多用在一到兩張圖片上。超過這個數量就不再有效。
  • loading="lazy" 只用於第一個可視範圍以外的圖片與 iframe。
  • 減少重新導向，並讓頁面可以被快取。獨特的 URL 參數可能讓請求回到您的來源伺服器，而不是 CDN。

保持穩定的頁面

  • 在每張圖片與每段影片上設定 width 與 height，並在 CSS 中保留 height: auto。
  • srcset 中的每張圖片都使用相同的長寬比。
  • 在廣告、嵌入內容與 iframe 載入之前，先預留空間。廣告章節會說明版位尺寸。
  • Cookie 通知與註冊提示請以疊加方式呈現，或為它們預留空間，避免把文章往下推。
  • 使用 font-display: optional，或使用經調整、與網頁字型度量相符的備用字型。
  • 動畫請使用 transform。對 top 或 left 做動畫會造成版面位移。

快速回應

互動的總時間由三部分組成：您的程式碼執行前的等待、您的程式碼，以及隨後的繪製。任何超過 50 毫秒的工作都算是長任務。

  • 事件回呼裡盡量少做事。先更新畫面，再延後處理其餘工作。
  • 用 scheduler.yield() 把長時間的工作拆開，在不支援它的瀏覽器中則改用 setTimeout。
  • 讓 DOM 保持精簡。很長的文章清單可以使用 content-visibility，晚一點再渲染畫面外的項目。
  • 請記得每個 iframe 都有自己的主執行緒，因此要確認緩慢的互動來自哪個框架。

長頁面與無限捲動

如果某個版區頁面會無止盡地往下捲，請為每一段內容提供各自的永久網址，使用絕對頁碼，例如 ?page=12，並依序連結這些頁面。隨著讀者往下，用 History API 更新網址。Google 不會捲動或點選，所以延遲載入的內容必須在進入可視範圍時就載入，不需要任何操作。

檢查清單

  • 在 Search Console 中檢查 LCP、INP 與 CLS，行動裝置與桌機分開看。
  • 在手機上開啟您最熱門的文章範本，確認標題與日期出現在第一個畫面。
  • 確認完整的文章內文就在伺服器送出的 HTML 中。
  • 比對行動版與桌機版的內容、標題、結構化資料與 robots 標籤是否一致。
  • 移除主圖上的 loading="lazy"，並加上 fetchpriority="high"。
  • 為每張圖片與每段影片加上 width 與 height。
  • 為每個廣告、嵌入內容與橫幅預留空間。
  • 把 scroll-padding-top 設成與固定式頁首相符。
  • 以 320 CSS 像素寬度測試頁面。
  • 讓無限捲動頁面的每一段內容都有自己的網址。

來源